В разделе «Возможности» отчёта Lighthouse перечислены все изображения на вашей странице, размер которых не соответствует требованиям, а также потенциальная экономия в кибибайтах (КиБ) . Измените размер этих изображений, чтобы сэкономить трафик и ускорить загрузку страницы:
Как Lighthouse рассчитывает изображения слишком большого размера
Для каждого изображения на странице Lighthouse сравнивает размер отрендеренного изображения с размером фактического изображения. Размер отрендеренного изображения также учитывает соотношение пикселей устройства. Если размер отрендеренного изображения меньше фактического как минимум на 4 КБ, изображение не проходит проверку.
Стратегии правильного выбора размера изображений
В идеале на вашей странице никогда не должны отображаться изображения, размер которых превышает размер, отображаемый на экране пользователя. Всё, что больше, приводит к лишней трате байтов и замедляет загрузку страницы.
Основная стратегия предоставления изображений подходящего размера называется «адаптивные изображения». При использовании адаптивных изображений вы генерируете несколько версий каждого изображения, а затем указываете, какую версию использовать в HTML или CSS, используя медиазапросы, размеры области просмотра и т. д. Кроме того, RespImageLint — это полезный букмарклет для определения оптимальных значений srcset и sizes для ваших изображений. Подробнее об этих атрибутах см. в разделе «Реализация адаптивных изображений» .
Сети доставки изображений (CDN) — ещё одна важная стратегия для доставки изображений подходящего размера. CDN можно рассматривать как API веб-сервисов для преобразования изображений.
Другая стратегия — использование векторных форматов изображений, таких как SVG. Благодаря ограниченному объёму кода изображение SVG можно масштабировать до любого размера. Подробнее см. в статье Замена сложных значков на SVG .
Такие инструменты, как gulp-responsive или responsive-images-generator, помогут автоматизировать процесс конвертации изображения в различные форматы. Существуют также CDN-сети изображений, которые позволяют генерировать несколько версий изображения как при загрузке, так и при запросе его со страницы.
Руководство по конкретному стеку
AMP
Используйте поддержку srcset в компоненте amp-img , чтобы указать, какие изображения использовать в зависимости от размера экрана. См. также раздел Адаптивные изображения с srcset, размерами и высотой .
Угловой
Рассмотрите возможность использования утилиты BreakpointObserver из Component Dev Kit (CDK) для управления точками останова изображений.
Друпал
Убедитесь, что вы используете встроенные адаптивные стили изображений Drupal . Используйте адаптивные стили изображений при отображении полей изображений через режимы просмотра, представления или изображения, загруженные через редактор WYSIWYG.
Гэтсби
Используйте плагин gatsby-image для создания нескольких небольших изображений для смартфонов и планшетов. Он также может создавать заглушки в виде SVG-изображений для эффективной ленивой загрузки.
Джумла
Рассмотрите возможность использования плагина адаптивных изображений .
WordPress
Загружайте изображения непосредственно через медиатеку , чтобы убедиться, что доступны необходимые размеры, а затем вставляйте их из медиатеки или используйте виджет изображений, чтобы использовать оптимальные размеры (включая размеры для адаптивных контрольных точек). Избегайте использования изображений Full Size если их размеры не соответствуют их назначению. См. раздел «Вставка изображений в сообщения и страницы» .