Оптимизация изображений: ускорьте сайт с помощью WebP и AVIF

Почему изображения определяют скорость страницы

На большинстве страниц изображения составляют наибольшую долю байтов, которые загружает браузер. Это делает их целью номер один для ускорения сайта — и главной причиной, по которой страница не проходит Core Web Vitals, ведь самое большое изображение часто и есть элемент LCP (Largest Contentful Paint), который измеряет Google. Оптимизация изображений не означает более низкое качество — она означает отдачу той же картинки в гораздо меньшем количестве байтов. Сделайте это правильно, и всё остальное — LCP, мобильные оценки, расход трафика — улучшится сразу.

Правильный размер и адаптивность

Самая частая трата — отдавать огромное изображение в маленькое пространство: фото на 4000px, показанное в 800px, всё равно полностью загружается в 4000px. Экспортируйте изображения в размере, близком к тому, в котором они реально показываются. Затем отдавайте разные размеры для разных экранов с помощью srcset и sizes, чтобы телефон получал маленький файл, а десктоп — файл побольше.

Адаптивные изображения с srcset

<img
  src="/hero-800.jpg"
  srcset="/hero-400.jpg 400w, /hero-800.jpg 800w, /hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Product hero"
  width="800" height="500">

Переход на форматы нового поколения: WebP и AVIF

WebP, а там, где поддерживается — AVIF, дают файлы на 25–50% меньше, чем JPEG или PNG при том же визуальном качестве. Именно это изменение убирает рекомендацию PageSpeed Insights «Отдавайте изображения в форматах нового поколения». Отдавайте их через элемент picture, чтобы браузеры, поддерживающие новый формат, получали его, а старые автоматически откатывались к оригиналу.

Отдача AVIF/WebP с запасным вариантом

<picture>
  <source srcset="/photo.avif" type="image/avif">
  <source srcset="/photo.webp" type="image/webp">
  <img src="/photo.jpg" alt="Photo" width="1200" height="800">
</picture>

Отложенная загрузка — но не для главного изображения

Отложенная загрузка откладывает загрузку изображений до тех пор, пока они вот-вот не появятся в области просмотра, чтобы длинная страница не загружала всё сразу. Большинство платформ делают это по умолчанию. Единственное исключение — ваше главное или hero-изображение, которое обычно и есть элемент LCP: загружайте его сразу (и рассмотрите fetchpriority="high"), чтобы самый важный пиксель отрисовался как можно быстрее. Откладывайте загрузку всего, что ниже первого экрана, и отдавайте приоритет одному элементу над ним.

Доставка с edge — и автоматическая конвертация

Даже идеально сжатое изображение будет медленным, если оно передаётся с далёкого сервера. CDN кеширует ваши изображения на edge и отдаёт их каждому посетителю из ближайшей точки, так что байты приходят быстро, где бы человек ни находился. cdn.com.tr делает это для каждого файла, по современному HTTP/2 и Brotli, с автоматическим SSL на входе.

А конвертировать форматы вручную не нужно. Для WordPress бесплатный плагин CDNTR создаёт WebP (и AVIF там, где это поддерживает ваш сервер) прямо на вашем сервере и отдаёт их через CDN с помощью элемента picture, с оригиналом в качестве автоматического запасного варианта. Он отдаёт конвертированный файл только тогда, когда тот действительно меньше, поэтому хорошо сжатое фото никогда не станет больше, и он может массово конвертировать всю вашу медиатеку.

Измерьте и подтвердите

Прогоните страницу через PageSpeed Insights до и после изменений. Ищите две вещи: исчезновение рекомендаций «Отдавайте изображения в форматах нового поколения» и «Правильно задавайте размер изображений», а также снижение LCP. Если самое большое изображение всё ещё медленное, проверьте, что оно не загружается отложенно и что оно отдаётся в формате нового поколения через CDN. Быстрое сравнение до/после честно покажет, что реально помогло.

Где это окупается больше всего