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

Question

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

Answer 1

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

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

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

Answer 2

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

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

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

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

Answer 3

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

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

Обоснование состоит в том, что если вы собираетесь уменьшить вниз изображение, то почему бы просто не использовать вначале уменьшенное изображение?

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

Answer 4

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

Answer 5

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

Answer 6

В целом:

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

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