В разделе «Возможности» вашего отчета Lighthouse перечислены все неоптимизированные изображения с потенциальной экономией в кибибайтах (КиБ) . Оптимизируйте эти изображения, чтобы страница загружалась быстрее и потребляла меньше данных:
Как Lighthouse помечает изображения как оптимизируемые
Lighthouse собирает все изображения JPEG или BMP на странице, устанавливает уровень сжатия каждого изображения на 85, а затем сравнивает исходную версию со сжатой версией. Если потенциальная экономия составляет 4 КБ или больше, Lighthouse помечает образ как оптимизируемый.
Как оптимизировать изображения
Для оптимизации изображений можно предпринять множество шагов, в том числе:
- Использование CDN изображений
- Сжатие изображений
- Замена анимированных GIF-файлов на видео
- Ленивая загрузка изображений
- Показ адаптивных изображений
- Показ изображений с правильными размерами
- Использование изображений WebP
Оптимизируйте изображения с помощью инструментов графического интерфейса.
Другой подход — запустить изображения через оптимизатор, который вы устанавливаете на свой компьютер и запускаете как графический интерфейс. Например, с помощью ImageOptim вы перетаскиваете изображения в его пользовательский интерфейс, а затем он автоматически сжимает изображения без заметного ущерба для качества. Если у вас небольшой сайт и вы можете вручную оптимизировать все изображения, этот вариант, вероятно, достаточно хорош.
Сквош — еще один вариант. Squoosh поддерживается командой Google Web DevRel.
Рекомендации для конкретного стека
Друпал
Рассмотрите возможность использования модуля , который автоматически оптимизирует и уменьшает размер изображений, загружаемых через сайт, сохраняя при этом качество. Кроме того, убедитесь, что вы используете собственные адаптивные стили изображений , предоставленные Drupal , для всех изображений, отображаемых на сайте.
Джумла
Рассмотрите возможность использования плагина оптимизации изображений , который сжимает изображения, сохраняя при этом качество.
Магенто
Рассмотрите возможность использования стороннего расширения Magento, оптимизирующего изображения .
WordPress
Рассмотрите возможность использования плагина WordPress для оптимизации изображений , который сжимает ваши изображения, сохраняя при этом качество.