Обновлены команды оптимизации изображений, совместимые с Pageinsights, для JPG и PNG

Question

В документе по адресу https://developers.google.com/speed/docs/insights/OptimizeImages есть предупреждение об устаревании.

И ссылка на обновленный документ не содержит подробностей о рекомендуемых командах преобразования.

Есть ли какие-либо изменения в требованиях к оптимизации обновленной версии Google Pagespeed Insights?

convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

Я также проверил образцы на странице Github API Pagespeed Insights, но ничего не упомянул об оптимизации изображений.

Answer 1

Краткий ответ

Если формат jpg, изображения должны иметь сжатие не менее 85%. Для PNG удалите альфа-канал, если он не прозрачный. Вы также должны использовать инструмент оптимизации, такой как tinypng для png, чтобы удалить как можно больше веса (хотя Lighthouse не будет сообщать об этом)

Длинный ответ

Это руководство было заменено двумя разными документами (насколько я могу судить)

https://web.dev/uses-optimized-images/

и

https://web.dev/uses-webp-images/

Первый документ является основным.

Все это руководство в основном говорит: "Не отправляйте по сети больше информации, чем необходимо".

Например, если вы отправляете несжатые файлы JPEG, вы можете отправлять файл, который в 2,3 или даже в 4 раза больше, чем JPEG, с качеством, скажем, 70%. Разница в качестве будет едва заметной, но разница в скорости может быть огромной, если у вас несколько изображений.

Требование - степень сжатия не менее 85%.

Что делает Lighthouse, так это проверка размера файла после установки уровня сжатия на 85%, и если вы получите сохранение размера файла более 4 КБ, он покажет предупреждение для изображения.

Что касается того, как вы достигнете сжатия, это полностью зависит от вас и какой бы серверной среды / языка вы ни использовали.

Если вы используете двоичный файл преобразования в вашем примере, возможно, сэмплируйте 4:2:2 для субдискретизации цветности и установите качество на 75, экраны намного ярче, так как это руководство было написано, поэтому цвет более заметен, чем разница в качестве между 85% и 75% сжатие. Это чисто предложение, вы делаете то, что лучше для вас.

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

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