Guide 19 мая 2026 г. 3 мин чтения

SEO и изображения: золотые правила для роста Core Web Vitals

Не позволяйте картинкам губить ваше SEO. Освойте оптимизацию картинок для сайта, метрику LCP и формат AVIF, чтобы обойти конкурентов по Core Web Vitals.

#seo
#avif
#google
#производительность
#core web vitals
#lcp

Когда изображение определяет ваши позиции в поиске

С момента появления Core Web Vitals скорость загрузки перестала быть просто бонусом к удобству: это прямой фактор ранжирования в SEO. И главный виновник «красного» показателя Core Web Vitals почти всегда один и тот же — метрика LCP (Largest Contentful Paint).

LCP измеряет время, необходимое для отображения самого крупного видимого элемента на экране (обычно это баннер «Hero» или главное изображение товара). Если на его отрисовку уходит более 2,5 секунд, поисковик понижает вас — а конкуренты, у которых та же страница грузится за 1,8 с, обходят вас в выдаче.

3 ключевых Core Web Vitals

Метрика	Что измеряет	Порог «Good»
LCP (Largest Contentful Paint)	Время отрисовки самого крупного элемента	≤ 2,5 с
INP (Interaction to Next Paint)	Задержка отклика на действия пользователя	≤ 200 мс
CLS (Cumulative Layout Shift)	Визуальная стабильность (скачки вёрстки)	≤ 0,1

Из трёх метрик две зависят от изображений:

LCP (тяжёлое hero-изображение = высокий LCP);
CLS (изображение без указанных размеров = скачок вёрстки в момент загрузки).

Новый король: формат AVIF

Вы знаете JPG, вы освоили WebP. Пора перейти на следующий уровень.

AVIF (AV1 Image File Format) — это кодек нового поколения, поддерживаемый Netflix, Google и Apple. Его эффективность впечатляет: файл AVIF —

в среднем на 50 % легче, чем JPG при равном визуальном качестве;
на 20 % легче, чем WebP;
лучше справляется с артефактами сжатия (меньше цветовых полос на градиентах, меньше JPEG-блоков на однородных участках);
поддерживает 10-битную прозрачность (против 8 бит у PNG/WebP).

Если ваш LCP — это изображение в шапке, перевод его с JPG на AVIF — самый мощный SEO-приём из категории «Quick Win», который вы можете внедрить сегодня, не трогая остальной код.

Тег `<picture>`: отдавать AVIF с запасным вариантом

AVIF поддерживается ~92 % браузеров на май 2026 года — но пока не всеми версиями Safari. Лучшая практика — отдавать AVIF в приоритете, с запасным вариантом WebP, а затем JPG:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="…"
       width="1920" height="1080"
       loading="eager" fetchpriority="high">
</picture>

Ключевые моменты этой структуры:

явные width и height → предотвращают CLS, резервируя место до загрузки изображения;
loading="eager" на главном изображении (над линией сгиба) → использовать lazy на LCP-изображении контрпродуктивно;
fetchpriority="high" → указывает браузеру отдать приоритет этой загрузке над остальными ресурсами.

Для изображений ниже линии сгиба (каталог, статьи блога) — наоборот: loading="lazy", чтобы не блокировать LCP видимой зоны.

Измеряй, чтобы управлять: инструменты

До и после каждой оптимизации проводите замеры:

PageSpeed Insights (pagespeed.web.dev) → оценка Lighthouse + данные CrUX (Chrome User Experience Report) в реальных условиях;
GTmetrix → подробный waterfall запросов, выявление конкретного файла, тянущего LCP вниз;
WebPageTest.org → тесты из разных локаций и браузеров;
Chrome DevTools → Performance → Web Vitals → локальный замер в условиях разработки.

Минимальная цель для SEO: 75 % визитов в зелёной зоне по Core Web Vitals (порог переключения у поисковика).

Архитектура «Zero-Upload» для вебмастеров

Оптимизация сотен изображений для клиента — это технический и этический вызов. Использование сторонних API или классических онлайн-конвертеров означает загрузку интеллектуальной собственности ваших клиентов на неизвестные серверы, с раздражающими лимитами по весу — и серьёзным риском нарушения закона о персональных данных, если на изображениях есть узнаваемые люди.

Будущее за обработкой на стороне клиента (Client-Side Processing). С помощью технологий WebAssembly теперь можно компилировать сложные кодеки (такие как libavif, libheif, mozjpeg) и запускать их прямо в браузере вебмастера.

Ни одно изображение не покидает машину специалиста. Никакого риска утечки. Никакого лимита по весу, кроме доступной оперативной памяти.

Чек-лист SEO-оптимизации изображений

Перед каждой публикацией:

Подходящий формат: AVIF (или WebP как запасной вариант) для веб-изображений, JPG — только для обратной совместимости;
Откалиброванные размеры: не шире реального отображения (макс. 1200 px для контента статьи, 1920 px для hero);
Качество 80–85 для сжатых изображений;
явные width и height в HTML → защита от CLS;
loading="lazy" за пределами видимой зоны, eager для LCP-изображения;
описательный alt (SEO + доступность);
описательное имя файла (krasnoe-shelkovoe-plate-skidki.avif > IMG_8421.jpg).

Приведите сайт к нормам поисковиков (мгновенно и бесплатно)

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

Автор: Nikola Markovic · опубликовано 19 мая 2026 года.