Оптимизация изображений: адаптивные изображения, WebP, AVIF и LCP

Начните с изображения, которое читатель действительно видит

Изучите отображаемые размеры, выбранный ресурс, объём переданных байтов и роль изображения на странице. Схема с мелкими подписями требует иного подхода, чем фотография. Большой исходный файл не обязательно отдавать каждому посетителю без изменений.

Найдите в трассировке фактический элемент Largest Contentful Paint. Это может быть текст, а не изображение. Оптимизация миниатюры ниже первого экрана не исправит никак не связанную с ней таблицу стилей, блокирующую рендеринг.

Выбирайте формат и качество для каждого файла

Сравнивайте AVIF и WebP с текущими JPEG или PNG в тех размерах, которые реально используются. Проверяйте края, градиенты, оттенки кожи, прозрачность и текст. Экономия зависит от содержимого и настроек кодировщика; универсальный процент — бесполезная цель качества.

Используйте SVG для подходящих схем и иконок, чтобы подписи и линии оставались чёткими, и при необходимости держите растровую версию для платформ, где ими делятся. Важные пояснения должны быть и в HTML. Не называйте изображение со сжатием с потерями «без потерь» только потому, что оно получает высокую оценку перцептивного сходства.

Пишите адаптивную разметку в соответствии с макетом

Следующий пример предполагает изображение на всю ширину в колонке контента шириной 48rem с отступами 1rem на маленьких экранах. Подстройте sizes под свой реальный макет. Браузер выбирает ресурс по ширинам кандидатов, размеру места и условиям устройства.

<picture>
  <source type="image/avif"
    srcset="/media/diagram-480.avif 480w,
            /media/diagram-960.avif 960w,
            /media/diagram-1440.avif 1440w"
    sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem">
  <img src="/media/diagram-960.webp"
    srcset="/media/diagram-480.webp 480w,
            /media/diagram-960.webp 960w,
            /media/diagram-1440.webp 1440w"
    sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem"
    width="1440" height="900"
    loading="eager" fetchpriority="high" decoding="async"
    alt="Public requests pass through a cache before the origin">
</picture>

Для вспомогательного изображения за пределами экрана используйте ленивую загрузку и обычный приоритет. Ширина и высота резервируют пропорции; CSS по-прежнему может сделать изображение резиновым. Держите одинаковые пропорции у всех вариантов, если вы сознательно не используете арт-дирекшн.

По возможности используйте конвейер изображений WordPress

Для изображений из медиатеки используйте функции вложений WordPress, чтобы доступные размеры и адаптивные атрибуты формировались из метаданных вложения. Проверьте результат: собственная разметка или отсутствующие варианты могут свести эти преимущества на нет. Для иллюстраций темы можно использовать явный версионированный набор размеров.

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

Проверьте доставку и поведение кеша

• Проверьте выбранные URL изображений на узких и широких экранах, включая экраны с высокой плотностью пикселей.
• Убедитесь, что основное изображение можно обнаружить, не дожидаясь JavaScript.
• Оценивайте качество изображения в реальном размере отображения, а не только в маленьком превью.
• Убедитесь, что медиафайлы за пределами экрана не занимают основную часть первоначальной передачи.
• Если CDN согласовывает форматы, проверьте, что ключи кеша правильно различают ответы.
• Версионируйте изменённые файлы или очищайте соответствующие кеши, чтобы читатели получали обновление.

Источники и дополнительное чтение

• MDN: адаптивные изображения
• WordPress: wp_get_attachment_image
• Google: оптимизация LCP

Читайте дальше

Продолжите с диагностикой Core Web Vitals или полным чек-листом производительности.