Опубликовано: 8 октября 2025 г.
Сокращение времени загрузки изображений может улучшить воспринимаемое время загрузки страницы и LCP.
Как терпит неудачу проницательность
Анализ выявляет изображения с неоправданно большим размером для скачивания. Расчетная экономия байтов производится путем сравнения размера загружаемого изображения с эффективным соотношением байтов к пикселям для данного формата изображения.
Как сократить время загрузки изображений
В данном исследовании рекомендуется несколько стратегий для сокращения времени загрузки изображений в зависимости от их размера и формата. Развертывание CDN для изображений может оказаться чрезвычайно полезным для реализации всех этих стратегий.
Увеличьте коэффициент сжатия изображения.
Большинство форматов изображений поддерживают уровень сжатия, который можно настроить для уменьшения размера файла изображения за счет снижения качества. Для оптимизации коэффициента сжатия изображения можно использовать такие инструменты, как ImageOptim , Squoosh и Imagemin .
Используйте современные форматы изображений.
AVIF и WebP — это форматы изображений, обладающие превосходными характеристиками сжатия и качества по сравнению со своими более старыми аналогами JPEG и PNG. Кодирование изображений в этих новых форматах — хорошая стратегия для уменьшения размера загружаемых изображений.
Формат AVIF поддерживается последними версиями всех основных браузеров и обеспечивает меньший размер файлов по сравнению с другими форматами при тех же настройках качества. Более подробную информацию о AVIF см. в разделе «Обработка изображений AVIF» на Codelab .
WebP поддерживается всеми основными браузерами и обеспечивает лучшее сжатие изображений в интернете как с потерями, так и без потерь. См. раздел «Использование изображений WebP» для получения дополнительной информации о WebP.
Используйте видеоформаты для создания анимированного контента.
Большие GIF-файлы менее эффективны для передачи анимированного контента по сравнению с видео. Для экономии сетевого трафика рекомендуется использовать видео в формате MPEG4 или WebM для анимации и PNG или WebP для статических изображений вместо GIF.
См. раздел «Замена анимированных GIF-файлов видео для более быстрой загрузки страниц», чтобы узнать, как заменить GIF-изображения видео.
Отображение изображений с адаптивным размером
В идеале, на вашей странице никогда не должны отображаться изображения, размер которых превышает размер версии, отображаемой на экране пользователя. Любые изображения большего размера приводят к потере байтов и замедляют время загрузки страницы.
Одна из стратегий — использование векторных форматов изображений, таких как SVG. С помощью ограниченного количества кода изображение SVG может масштабироваться до любого размера. Подробнее см. в разделе «Замена сложных значков на SVG» .
Если векторные изображения недоступны, лучше всего использовать адаптивные изображения. Адаптивные изображения позволяют создавать несколько версий каждого изображения, а затем указывать, какую версию использовать, в HTML или CSS с помощью медиа-запросов, размеров области просмотра и т.д.
Например, элемент <img> имеет атрибуты srcset и sizes , которые позволяют указывать URL-адреса изображений разных размеров:
Если вам нужно полностью изменить изображение, вы можете использовать элемент <picture> :
Подробнее см. разделы «Адаптивные изображения» и «Элемент изображения» .
Рекомендации, специфичные для конкретного стека
Данная информация также содержит рекомендации, специфичные для используемых технологий, в частности, для страниц, использующих следующие стеки технологий:
АМП
- Рекомендуется отображать все компоненты
amp-imgв формате WebP, указав при этом соответствующий резервный вариант для других браузеров. - Для анимированного контента используйте
amp-anim, чтобы минимизировать нагрузку на процессор, когда контент находится за пределами экрана.
Drupal
- Рассмотрите возможность использования модуля , который автоматически оптимизирует и уменьшает размер изображений, загружаемых через сайт, сохраняя при этом их качество.
- Убедитесь, что для всех изображений, отображаемых на сайте, используются встроенные адаптивные стили изображений Drupal.
Joomla
Рассмотрите возможность использования плагина или сервиса, который автоматически преобразует загруженные вами изображения в оптимальные форматы.
Магенто
Рассмотрите возможность использования стороннего расширения Magento, которое оптимизирует изображения .
WordPress
Рассмотрите возможность использования плагина WordPress для оптимизации изображений , который сжимает изображения, сохраняя при этом их качество.