Мало больших изображений против множества маленьких изображений

Question

Я всегда думал, что когда вы вынуждены использовать изображения на веб-сайтах, лучше всего использовать наименьшие изображения.Однако, если это означает использование нескольких небольших изображений для получения одного и того же результата, что и одного большого изображения, я не уверен, что это также не годится из-за выполнения большего количества HTTP-запросов.

Каков наилучший подход в этом случае?

• Несколько больших изображений = большие файлы для загрузки
• Много маленьких изображений = небольшие файлы для загрузки, но много HTTP-запросов

Когда я говорю "много«Я просто имею в виду 4 или 5, а не одно большое изображение.

Спасибо!

---

ОБНОВЛЕНИЕ

Просто чтобы позволить вамзнаю разницу в размере файла, о котором я говорю.В одном случае, с которым я столкнулся сегодня:

• Использование одного большого изображения = 1 запрос @ 11,3 КБ
• Использование пяти небольших изображений = 5 запросов @ 1,2 КБ (всего)

Answer 1

Я бы посоветовал использовать 1 большое изображение вместо нескольких меньших.

Общий размер (в байтах) будет (примерно) одинаковым, если вы используете 1 большой файл или несколько меньших. Но, как вы уже отметили, вы делаете больше HTTP-рукопожатий, которые замедляют процесс.

Для нескольких веб-сайтов, над которыми я работаю, мы пытаемся объединить несколько одинаковых изображений в один файл изображения, просто чтобы сократить HTTP рукопожатия.

Answer 2

Как указывает EricLaw в ответе Йохана; Другое решение состоит в том, чтобы объединить меньшие изображения в одно изображение, которым вы можете затем управлять с помощью CSS Sprites. Это решение имеет следующие преимущества:

• уменьшено количество HTTP-запросов (поскольку вы запрашиваете только один изображение)
• позволяет кэшировать для повторного использования с различными фонами (как указано в ответ Курта)

Answer 3

Я бы рекомендовал использовать множество маленьких изображений вместо одного большого.

Причина этого в том, что если на одной странице у вас есть фон контента с закругленными углами, и все это делается как одно изображениеэто будет лучше, чем наличие нескольких HTTP-запросов на один и тот же эффект.

Однако, если на другой странице у вас аналогичный фон контента, то это будет другое большое изображение.

Если первый фон был разбит на несколько изображений, существует вероятность того, что второй фон сможет использовать некоторые из этих изображений, сохраняя несколько HTTP-запросов.Например, если оба изображения имеют закругленные углы, вторая страница может использовать те же закругленные углы и просто новое изображение для основной области содержимого.