Практический ответ: никогда , особенно когда вы говорите об относительно незначительных объемах данных, таких как килобайт или два.
Настоящим врагом производительности веб-страницы является не количество переданных байтов; скорее это сетевая задержка . Давайте возьмем ваш пример и рассмотрим соединение со скоростью 5 Мбит / с (средняя скорость соединения в США немного выше) с временем пинга до вашего сервера 80 мс:
1x 20 kB files: 80ms latency + 31ms transfer time = 111ms
2x 4 kB files: 160ms latency + 13ms transfer time = 173ms
Эта "оптимизация" просто стоит , по крайней мере, 62 мс, а все остальные переменные равны. В реальном мире я бы поспорил, что производительность будет еще хуже из-за таких вещей, как дополнительная загрузка сервера.
Также учтите, что теперь вы используете дополнительный один из ограниченного числа параллельных запросов, которые браузер будет делать (где-то между 2 и 8 в зависимости от браузера) для половины изображения, а не что-то более ценное, например скрипт, CSS или другое некачественное изображение. Это замедлит общее время загрузки вашей страницы.
Кроме того, у меня есть подозрение, что вся ваша предпосылка ошибочна . В целом, разбиение изображения на два файла не может действительно привести к меньшему общему размеру файла, поскольку каждый формат контейнера изображения содержит данные заголовка ; например, файл PNG имеет как минимум 57 байтов служебной информации перед любыми фактическими данными изображения. Кроме того, дополнительный HTTP-запрос означает дополнительный & plusmn; 800-900 байтов служебной информации по проводу.
Я подозреваю, что вы обнаружите, что один должным образом сжатый PNG не будет больше, чем общий размер двух PNG, составляющих одно и то же изображение.
http://josh3736.net/images/is1.png (1027 байт)
http://josh3736.net/images/is2a.png http://josh3736.net/images/is2b.png (730 + 809 = 1539 байт)
Несмотря на то, что первый одиночный PNG имеет «мертвое» прозрачное пространство размером 150x100 пикселей, он на 33% меньше , чем два PNG, представляющих одно и то же изображение. (Не обращайте внимания на то, что я не могу правильно выровнять теги <img>, чтобы два примера выглядели одинаково.)