1. обзор
2. рекомендации
3. Оптимизация для всех типов изображений

Это правило срабатывает, когда PageSpeed ​​Insights обнаруживает, что изображения на странице можно оптимизировать, чтобы уменьшить их размер без существенного влияния на их визуальное качество.

обзор

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

рекомендации

Поиск оптимального формата и стратегии оптимизации для ваших графических ресурсов требует тщательного анализа по многим параметрам: типу кодируемых данных, возможностям формата изображения, настройкам качества, разрешению и т. Д. Кроме того, вам необходимо подумать о том, лучше ли обслуживать некоторые изображения в векторном формате, можно ли добиться желаемых результатов с помощью CSS, и как доставить соответствующим образом масштабированные ресурсы для каждого типа устройств.

Оптимизация для всех типов изображений

Оптимизация для изображений GIF, PNG и JPEG

GIF , PNG , а также JPEG форматы делают 96% всего интернет-трафика изображения. Из-за своей популярности PageSpeed ​​Insights предоставляет конкретные рекомендации по оптимизации. Для вашего удобства вы можете загрузить оптимизированные изображения непосредственно из PageSpeed ​​Insights (которая использует библиотеку оптимизации изображений из modpagespeed.com ).

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

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

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

• Всегда конвертируйте GIF в PNG, если оригинал не является анимированным или крошечным (менее нескольких сотен байтов).
• Для GIF и PNG удалите альфа-канал, если все пиксели непрозрачны.

Например, вы можете использовать преобразовать двоичный файл чтобы оптимизировать изображения в формате GIF и PNG с помощью следующей команды (параметры в скобках необязательны):

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

cuppa.png (1763 байта)

convert cuppa.png -strip cuppa_converted.png

cuppa_converted.png (856 байт)

JPEG - это формат с потерями. Процесс сжатия удаляет визуальные детали изображения, но степень сжатия может быть в 10 раз больше, чем GIF или PNG.

• Уменьшите качество до 85, если оно было выше. С качеством выше 85 изображение быстро увеличивается, а визуальное улучшение незначительно.
• Уменьшите выборку цветности до 4: 2: 0, потому что зрительная система человека менее чувствительна к цветам по сравнению с яркостью.
• Используйте прогрессивный формат для изображений размером более 10 Кб. Прогрессивный JPEG обычно имеет более высокий коэффициент сжатия, чем базовый JPEG для большого изображения, и имеет преимущества прогрессивного рендеринга.
• Используйте цветовое пространство в оттенках серого, если изображение черно-белое.

Например, вы можете использовать преобразовать двоичный файл чтобы оптимизировать изображения JPEG с помощью следующей команды (параметры в скобках не обязательны):

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

puzzle.jpg (13 501 байт)

convert puzzle.jpg -sampling-factor 4: 2: 0 -полоса -качество 85 -перемежитель JPEG -колорпространство sRGB puzzle_converted.jpg

puzzle_converted.jpg (4,599 байт)

Была ли эта страница полезной?

да нет

Похожие

Комментарии