Какое обоснование правила YSlow «Не масштабировать изображения в HTML»

Question

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

Answer 1

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

Кроме того, время обработки на стороне клиента для масштабирования изображения использует циклы процессора и замедляет рендеринг страниц. Не так уж плохо на быстром рабочем столе, о котором вы можете подумать, но на восприятие времени загрузки страницы может влиять даже 1/10 секунды (см. Пункт 5 here - 100 мс = 1% потерянных продаж для Amazon). На мобильные устройства еще более серьезно повлияет необходимость изменения размера, поскольку их процессоры не так сильны.

Все, что связано с YSlow, заключается в том, что 90% восприятия пользователем скорости связано с обработкой на стороне клиента, а не с временем загрузки с сервера, поэтому они так сильно обманывают.

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

Answer 2

Изображение с более высоким разрешением будет не только выглядеть плохо при уменьшении браузером, но и потребляет ненужную полосу пропускания.

Answer 3

Основная причина заключается в том, что если вы показываете изображение в 60x40, вам не понадобится изображение размером 600x400, которое тяжелее.

Answer 4

Прочитайте описание под заглавием:

Не используйте больше изображений, чем вам нужно только потому, что вы можете установить ширину и высоту в HTML. Если вам нужно
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
тогда ваше изображение (mycat.jpg) должно быть 100x100px, а не уменьшенное изображение 500x500px.

Смысл заключается в том, что если вы собираетесь масштабировать вниз изображение, почему бы не просто использовать меньшее изображение в первую очередь?

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

Answer 5

В общем:

1. Если вы установите размер меньше, чем реальный размер, чем фактический загруженный файл будет больше, чем это может быть (так что нет необходимости сетевой нагрузки)
2. Если установить размер выше, чем реальный размер чем изображение будет выглядеть хуже, чем это может быть
3. это небольшие накладные расходы на использование браузера CPU

Действительно вы должны рассмотреть его, но в некоторых случаях лучше изменить размер изображения в браузере й иметь много изображений или готовить их на стороне сервера.

Answer 6

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

Существует несколько способов определения, имеет ли пользователь экран сетчатки и загружает только большее изображение, когда у него это есть.

Так что для меня это тоже не имеет смысла, чтобы установить общее правило, что «Изображения не должны быть масштабируются» без исключения (ов) ..