Эффективное кодирование изображений

В разделе «Возможности» вашего отчета Lighthouse перечислены все неоптимизированные изображения с потенциальной экономией в кибибайтах (КиБ) . Оптимизируйте эти изображения, чтобы страница загружалась быстрее и потребляла меньше данных:

Скриншот аудита Lighthouse Efficiently encode images

Как Lighthouse помечает изображения как оптимизируемые

Lighthouse собирает все изображения JPEG или BMP на странице, устанавливает уровень сжатия каждого изображения на 85, а затем сравнивает исходную версию со сжатой версией. Если потенциальная экономия составляет 4 КБ или больше, Lighthouse помечает образ как оптимизируемый.

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

Для оптимизации изображений можно предпринять множество шагов, в том числе:

Оптимизируйте изображения с помощью инструментов графического интерфейса.

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

Сквош — еще один вариант. Squoosh поддерживается командой Google Web DevRel.

Рекомендации для конкретного стека

Друпал

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

Джумла

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

Магенто

Рассмотрите возможность использования стороннего расширения Magento, оптимизирующего изображения .

WordPress

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

Ресурсы