Почему оптимизация изображений важна
Крупные или поздно загружаемые изображения могут задерживать основной контент и ухудшать LCP. Начните с картинок, которые страница действительно запрашивает, и измерьте их вклад. Сокращение передачи данных может ускорить загрузку, но не гарантирует позиции в поиске или определённый рост конверсии.
Выбор формата изображения
Сравнивайте JPEG, PNG, WebP и AVIF на характерных изображениях при приемлемом качестве. Минимальный размер зависит от самого изображения, кодировщика и настроек. Проверьте поддерживаемые браузеры и при необходимости предусмотрите запасной формат. Для подходящей векторной графики используйте SVG.
| Формат | Преимущества | Ограничения | Где применять |
|---|---|---|---|
| JPEG | Часто эффективен для фотографий | Сжатие с потерями; нет альфа-прозрачности | Фотографии |
| PNG | Сжатие без потерь и прозрачность | Фотографии могут занимать много места | Графика, где важны детали без потерь |
| WebP | Режимы с потерями и без потерь, прозрачность | Проверяйте старые целевые браузеры и размер результата | Фотографии, графика, анимация |
| AVIF | Может хорошо сжимать при приемлемом качестве | Нужно проверить стоимость кодирования и поддержку | Фотографии и графика |
| SVG | Масштабируемая векторная графика | Не заменяет растровые фотографии | Иконки, логотипы, иллюстрации |
Адаптивные изображения: srcset и sizes
В srcset перечислите варианты файла, а в sizes опишите ширину изображения в макете. Браузер выберет вариант с учётом этих данных и условий устройства. Ширины ниже — пример: согласуйте их с фактическим CSS. Пример предназначен для изображения вне первого экрана; замените учебное описание и укажите реальные пропорции файла.
<img
src="example-400w.jpg"
srcset="example-400w.jpg 400w, example-800w.jpg 800w, example-1200w.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Горное озеро"
width="1200"
height="800"
loading="lazy"
/>
Отложенная загрузка изображений вне экрана
Атрибут loading="lazy" позволяет браузеру отложить загрузку картинки вне экрана до её приближения к видимой области. Запрос может начаться ещё до появления картинки. Конкретный момент зависит от браузера и условий.
- Отложенная загрузка некритичных изображений может сократить начальный объём данных и конкурирующие запросы.
- Не откладывайте главное изображение первого экрана, особенно вероятный LCP-элемент. Это может ухудшить LCP.
- Зарезервируйте место правильными размерами или пропорциями, чтобы уменьшить сдвиги макета.
Пример картинки ниже первого экрана. Размеры учебные: подставьте размеры фактического файла.
<img src="example.webp" alt="Горное озеро" width="1200" height="800" loading="lazy" />
Инструменты и сервисы для оптимизации
| Инструмент | Описание | Ссылка |
|---|---|---|
| TinyPNG | Онлайн-сервис для сжатия PNG и JPEG | TinyPNG |
| ImageOptim | Оптимизация изображений на macOS | ImageOptim |
| Squoosh | Мощный инструмент от Google | Squoosh |
Практические рекомендации и примеры
- Сравните форматы при приемлемом качестве и при необходимости добавьте запасной вариант.
- Согласуйте
srcsetиsizesс реальным макетом и устройствами. - Применяйте
loading="lazy"к картинкам вне экрана, сохраняя обычную загрузку вероятного LCP-изображения. Для нативной отложенной загрузки Intersection Observer обычно не требуется; собственная логика нужна для конкретной задачи. - Автоматизируйте изменение размеров и сжатие при сборке или доставке, затем проверяйте результат.
- Сравните PageSpeed Insights и нужные Web Vitals до и после, включая LCP и CLS, в сопоставимых условиях.
Проверьте опубликованный результат
Проверьте выбранный браузером файл, переданные байты, качество и приоритет загрузки. Повторите проверку на характерных мобильных и настольных макетах. Убедитесь, что главное изображение появляется без лишнего ожидания, а макет остаётся стабильным.
Сокращайте лишние байты, сохраняя нужное читателю содержимое и качество.
Используйте проверку скорости для исследования страницы, затем проверьте конкретные изменения картинок в браузере. Отделяйте измеренный эффект от непроверенных предположений.