Оптимизировать изображения (WebP/AVIF)

Зачем оптимизировать изображения

Изображения — самый тяжёлый тип контента на большинстве веб-страниц. По данным HTTP Archive, изображения составляют в среднем 40–50% от общего веса страницы. Неоптимизированная фотография весом 3–5 МБ в формате JPEG загружается на мобильном 3G-соединении 8–15 секунд. Та же фотография в формате WebP с правильным сжатием весит 150–300 КБ и загружается за секунду.

Для поисковых систем это критично. Google учитывает метрику Largest Contentful Paint (LCP) — время загрузки самого крупного видимого элемента на странице. В большинстве случаев LCP-элемент — это изображение: баннер, фото товара, иллюстрация к статье. Медленное LCP напрямую влияет на ранжирование через Core Web Vitals. Яндекс также учитывает скорость загрузки в своих алгоритмах оценки качества сайта.

По моему опыту, оптимизация изображений — это пункт, который даёт максимальный прирост скорости при минимальных усилиях. На многих сайтах одна только конвертация картинок в WebP и настройка lazy loading поднимает мобильный балл PageSpeed на 15–25 пунктов.

Пошаговая инструкция

Шаг 1. Проведите аудит текущих изображений

Прежде чем оптимизировать, оцените масштаб проблемы. Откройте любую страницу сайта в Chrome DevTools (F12) → вкладка Network → фильтр Img. Обновите страницу и посмотрите:

• Сколько изображений загружается и каков их суммарный вес.
• Форматы: JPEG, PNG, GIF, WebP, AVIF или SVG.
• Размеры файлов: всё, что больше 200 КБ для фотографий и 50 КБ для иконок — кандидат на оптимизацию.
• Реальные размеры vs отображаемые: если изображение 3000×2000 показывается в блоке 600×400, браузер загружает в 5 раз больше данных, чем нужно.

PageSpeed Insights также показывает список изображений, которые можно оптимизировать, с указанием потенциальной экономии в килобайтах и времени.

Для масштабного аудита всего сайта используйте Screaming Frog: он просканирует все страницы и покажет полный список изображений с размерами файлов и разрешениями.

Шаг 2. Выберите целевые форматы

Современные форматы изображений обеспечивают значительно лучшее сжатие при том же визуальном качестве:

WebP — основной формат для веба на сегодня. Разработан Google, поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge). Обеспечивает сжатие на 25–35% лучше, чем JPEG при одинаковом качестве. Поддерживает прозрачность (альфа-канал) — замена для PNG. Это безопасный выбор: 97%+ браузеров поддерживают WebP.

AVIF — формат нового поколения, основан на видеокодеке AV1. Сжимает на 30–50% лучше, чем WebP, особенно заметно на фотографиях с плавными градиентами. Поддержка: Chrome, Firefox, Safari 16.4+. Для критичных изображений стоит использовать AVIF с фоллбэком на WebP.

SVG — для иконок, логотипов, простых иллюстраций. Векторный формат не теряет качество при масштабировании и часто весит меньше растровых аналогов. Не подходит для фотографий.

PNG — оставьте только для случаев, когда нужна точная попиксельная отрисовка (скриншоты интерфейсов, схемы с мелким текстом) и WebP не обеспечивает нужное качество. В большинстве случаев WebP с прозрачностью заменяет PNG.

Шаг 3. Конвертируйте изображения

Инструменты для конвертации, в зависимости от масштаба задачи:

Для разовой конвертации (десятки файлов):

• Squoosh (squoosh.app) — онлайн-инструмент от Google. Позволяет сравнить оригинал и сжатый файл, настроить качество и формат. Удобен для поштучной обработки и подбора оптимального уровня сжатия.
• TinyPNG / TinyJPG (tinypng.com) — онлайн-сервис для пакетного сжатия. Загружаете до 20 файлов, получаете оптимизированные версии. Поддерживает WebP.

Для массовой конвертации (сотни файлов):

• cwebp — утилита командной строки от Google для конвертации в WebP. Позволяет обработать целую папку за секунды:

# Конвертация одного файла
cwebp -q 80 input.jpg -o output.webp

# Пакетная конвертация всех JPEG в папке (Linux/Mac)
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

• ShortPixel CLI — платный сервис с API и утилитой командной строки. Конвертирует в WebP и AVIF, поддерживает пакетную обработку. Есть бесплатная квота на 100 изображений в месяц.

Для WordPress (автоматическая конвертация):

• ShortPixel Image Optimizer — конвертирует изображения при загрузке в медиатеку и автоматически подставляет WebP-версии. Есть lossy, glossy и lossless режимы.
• Imagify — аналогичный плагин, работает через облачный сервис. Конвертирует в WebP, оптимизирует существующие изображения.
• EWWW Image Optimizer — работает локально на сервере (не отправляет изображения на внешние серверы), конвертирует в WebP, поддерживает AVIF.
• Performance Lab — официальный плагин от команды WordPress Performance Team. Включает модуль конвертации в WebP и AVIF на уровне ядра WordPress.

Рекомендуемый уровень качества для WebP: 75–85 (в шкале 0–100). При 80 разница с оригиналом визуально неразличима для 95% фотографий, а размер файла меньше в 3–5 раз.

Шаг 4. Настройте адаптивные изображения (srcset и sizes)

Одно изображение не подходит для всех устройств. Экран смартфона шириной 375px не нуждается в картинке 1920px. Атрибуты srcset и sizes позволяют браузеру выбрать подходящий размер:

<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w,
          photo-800.webp 800w,
          photo-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Описание изображения"
  width="800"
  height="600"
  loading="lazy"
>

Как это работает:

• srcset перечисляет варианты изображения с указанием их ширины (400w, 800w, 1200w).
• sizes сообщает браузеру, какой размер слота занимает изображение на экране при разных разрешениях.
• Браузер сам выбирает оптимальный файл, учитывая размер экрана и плотность пикселей (Retina).

Для тега <picture> можно указать разные форматы с фоллбэком:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Описание" width="800" height="600" loading="lazy">
</picture>

В WordPress функция wp_get_attachment_image() и стандартный блок Image автоматически генерируют srcset для загруженных изображений. Плагины оптимизации (ShortPixel, EWWW) добавляют WebP/AVIF-варианты в этот набор.

Шаг 5. Настройте lazy loading

Lazy loading (отложенная загрузка) — загрузка изображений только когда они попадают в область видимости при прокрутке. Изображения ниже первого экрана не загружаются сразу, экономя трафик и ускоряя начальную отрисовку страницы.

В современных браузерах достаточно атрибута:

<img src="photo.webp" alt="Описание" loading="lazy" width="800" height="600">

Важные нюансы:

• Не ставьте loading="lazy" на изображения первого экрана. LCP-элемент (баннер, главная фотография) должен загружаться сразу. Lazy loading на LCP-изображении ухудшит метрику LCP, а не улучшит. Для первого экрана используйте loading="eager" (значение по умолчанию) или вообще опустите атрибут.
• Для LCP-изображения добавьте fetchpriority="high" — это сигнал браузеру загружать его в первую очередь.
• Всегда указывайте width и height — это позволяет браузеру зарезервировать место под изображение до его загрузки, предотвращая Layout Shift (CLS).

В WordPress начиная с версии 5.5 атрибут loading="lazy" добавляется автоматически ко всем изображениям в контенте. С версии 6.3 WordPress также автоматически убирает lazy loading с LCP-изображения первого экрана.

Шаг 6. Оптимизируйте размеры

Даже в формате WebP изображение 4000×3000 пикселей будет весить неоправданно много, если отображается в блоке 600×450. Определите максимальные размеры, в которых изображения реально показываются на сайте, и подготовьте файлы соответствующих размеров:

• Для контентных изображений в статьях — обычно 800–1200px по ширине достаточно.
• Для баннеров на всю ширину экрана — 1920px максимум, с srcset для меньших экранов.
• Для карточек товаров или превью — 400–600px.
• Для миниатюр — 150–300px.

В WordPress при загрузке изображения автоматически создаются копии стандартных размеров (thumbnail, medium, large). Проверьте в настройках «Медиафайлы», какие размеры заданы, и при необходимости скорректируйте их. Плагин Regenerate Thumbnails поможет пересоздать миниатюры для уже загруженных файлов.

Шаг 7. Сжимайте без потери визуального качества

Сжатие делится на два типа:

• Lossy (с потерями) — уменьшает размер файла за счёт удаления деталей, незаметных глазу. Для фотографий при качестве 75–85% разница с оригиналом не видна без попиксельного сравнения, а размер меньше в 3–5 раз.
• Lossless (без потерь) — сжимает файл без потери данных. Экономия скромнее (10–30%), но качество идентично оригиналу. Подходит для скриншотов, схем, изображений с текстом.

Для большинства задач используйте lossy-сжатие. Рекомендуемые настройки:

• WebP: quality 75–85
• AVIF: quality 60–75 (AVIF сжимает агрессивнее, поэтому при меньшем значении quality результат визуально сопоставим с WebP 80)
• JPEG (если остаётся): quality 75–85 с progressive encoding

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

Типичные ошибки

• Загрузка оригиналов с камеры без обработки. Фотография 5000×3500 весом 8 МБ загружена в медиатеку WordPress как есть. Даже если WordPress создаёт уменьшенные копии, оригинал хранится и может подтягиваться через прямые ссылки. Всегда уменьшайте и сжимайте изображения перед загрузкой или настройте автоматическую оптимизацию через плагин.
• Отсутствие фоллбэка для WebP/AVIF. Сайт отдаёт только WebP, но у части пользователей старые браузеры (особенно устаревшие WebView в мобильных приложениях). Всегда используйте тег <picture> с фоллбэком на JPEG/PNG или серверную отдачу через Accept-заголовок.
• Lazy loading на LCP-изображении. Главный баннер или первая фотография загружается с loading="lazy" — браузер ждёт прокрутки, которой не будет, и LCP ухудшается. LCP-элемент первого экрана должен загружаться немедленно.
• Отсутствие width и height. Изображения без заданных размеров вызывают Layout Shift: контент прыгает при загрузке. Каждое изображение должно иметь атрибуты width и height или CSS-аналог (aspect-ratio).
• Одинаковый размер для мобильных и десктопа. Баннер 1920px загружается на смартфоне с экраном 375px. Используйте srcset — пусть браузер загрузит версию 400px вместо 1920px, это экономит 70–80% трафика.
• Конвертация всего в PNG «для качества». PNG хорош для графики с чёткими линиями, но для фотографий он в 3–10 раз тяжелее WebP. Фотография заката в PNG весит 5 МБ, в WebP при визуально идентичном качестве — 300 КБ.
• Оптимизация через CSS вместо реального уменьшения. Изображение 3000px сжато до 300px через CSS-свойства width и height. Визуально выглядит нормально, но браузер загрузил все 3000px. CSS не уменьшает размер загружаемого файла — нужны реальные файлы меньшего размера.
• Забытые декоративные изображения. Фоновые картинки, иконки, паттерны — тоже влияют на скорость. Иконки замените на SVG-спрайт или иконочный шрифт. Фоновые паттерны конвертируйте в WebP. Декоративные элементы по возможности реализуйте через CSS (градиенты, тени, рамки).

Что проверить в итоге

• Все фотографии и растровые изображения конвертированы в WebP (основной формат) с фоллбэком на JPEG/PNG
• Для ключевых изображений подготовлены AVIF-версии с фоллбэком на WebP
• Уровень сжатия проверен визуально — нет видимых артефактов при рекомендуемом качестве 75–85%
• Максимальная ширина изображений не превышает 1920px (для баннеров) и 1200px (для контентных изображений)
• Настроен srcset с вариантами 400w, 800w, 1200w (минимум) для адаптации под разные экраны
• Атрибут loading=»lazy» добавлен ко всем изображениям ниже первого экрана
• LCP-изображение первого экрана загружается без lazy, с fetchpriority=»high»
• У всех изображений заданы width и height для предотвращения Layout Shift
• В WordPress установлен и настроен плагин оптимизации изображений (ShortPixel, EWWW или аналог)
• Иконки и логотипы используют SVG вместо растровых форматов
• PageSpeed Insights не показывает предупреждений «Serve images in next-gen formats» и «Properly size images»
• Суммарный вес изображений на ключевых страницах не превышает 500 КБ на мобильных