Оптимизировать изображения

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

Обзор

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

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

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

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

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

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

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

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

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

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

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

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

чашка.png
cuppa.png (1763 байта)

convert cuppa.png -strip cuppa_converted.png

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 Gray/sRGB] OUTPUT.jpg

головоломка.jpg
Puzzle.jpg (13 501 Байт)

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

Puzzle_converted.jpg
Puzzle_converted.jpg (4599 байт)

Обратная связь

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