Это правило срабатывает, когда 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
convert cuppa.png -strip cuppa_converted.png
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
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
Обратная связь
Была ли эта страница полезной?