Что браузер будет загружать быстрее изображение размером 1000 на 1 пиксель или изображение размером 1 на 1000 пикселей

Question

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

Кроме того, какой формат изображения для изображения одного цвета будет загружаться быстрее всего?

Answer 1

Кроме того, какой формат изображения для изображения одного цвета будет загружаться быстрее всего?

Если вы собираетесь загрузить один цвет, скорее всего, использование элемента с background: #HEX; будет несколько быстрее, поскольку вам не потребуется загружать реальное изображение.

Изменить # 1:

Я создал два чёрных изображения в формате jpg, 1000x1 и 1x1000, и оба получили одинаковый размер (399 байт).

Далее я создал PNG-изображение 1000x1, а также GIF-изображение 1000x1 (оба заполнены черным) - получается, что размеры были следующими:

PNG-image: 96 bytes
GIF-image: 63 bytes

Победитель: GIF-изображение с данными на 33 байта меньше, чем PNG-изображение. Если вы загрузите 1000 изображений, подобных тем, которые использовались в тесте, накладные расходы в формате PNG составят 33 000 bytes (или 32.22 kilobytes, если вы предпочитаете этот формат).