SEO-оптимизация изображений: WebP, AVIF, Alt-теги

В 2026 году время текстовых “портянок” давно прошло. Пользователи хотят смотреть на товар, разглядывать инфографику и листать фото в портфолио. Изображения могут приносить до 30% всего целевого трафика из Яндекса и Google Картинок.

Однако графические файлы — главные “убийцы” скорости загрузки (страдают метрики Core Web Vitals). Как найти баланс между качеством контента и высокой скоростью для SEO? Разбираем форматы, атрибуты и инструменты оптимизации.

Почему тяжелые изображения вредят SEO?

Большой вес картинок тормозит загрузку страницы. Чем медленнее работает сайт:

1. Тем чаще пользователи возвращаются в поиск (рост показателя отказов).
2. Google понижает ваши страницы, так как алгоритм Core Web Vitals пессимизирует медленные сайты (LCP > 2.5 секунд — это проблема).
3. Краулеры поисковиков тратят лимиты на загрузку мегабайтных JPEG, оставляя без индексации другие страницы.

Выбор современных форматов: WebP vs AVIF

Время классических JPEG и PNG прошло. Сегодня стандарт оптимизации графики для Web — это форматы следующего поколения.

Формат WebP

Создан Google специально для веба.

• Преимущества: Поддерживает сжатие с потерями и без (как JPEG и PNG в одном флаконе), прозрачность (альфа-канал) и анимацию.
• Сжатие: Примерно на 25-35% меньше по размеру, чем JPEG аналогичного качества.
• Поддержка: 98% современных браузеров отлично отображают WebP.

Формат AVIF (Новинка)

Следующий шаг эволюции изображений от Альянса открытых медиа (AOMedia).

• Преимущества: Файлы еще меньше, чем WebP (до 50% экономии размера по сравнению с исходниками при минимальных артефактах сжатия).
• Сжатие: Лучше справляется с текстурами, градиентами и текстом на картинках.
• Поддержка: Сейчас AVIF поддерживается в Google Chrome, Firefox, Opera и новых версиях Safari. Для старых устройств и отстающих Apple (через раз) требуется fallback-вариант (запасной исходник).

Вывод 2026 года: Оптимально отдавать <picture> и использовать связку AVIF -> WebP -> JPEG в теле страницы: браузер выберет и скачает лучший формат (самый легкий, который поддерживает).

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Красивое описание изображения" loading="lazy" width="800" height="600">
</picture>

Как оптимизировать изображения для поиска по картинкам

Чтобы получать реферальный трафик из Яндекса / Google Картинок, нужно объяснить боту, что нарисовано на фото.

1. Атрибут Alt (Альтернативный текст)

Самый сильный текстовый фактор для картинок. Заполнять его нужно обязательно.

• Зачем: Бот читает этот текст + его озвучивают скринридеры для слабовидящих.
• Как писать: Опишите картинку своими словами, добавив ключевую фразу. Без спама!
• Пример: alt="Белый кожаный диван Гектор 2-местный в интерьере лофт".
• Ошибка: alt="купить диван, диван цена, кожаные диваны москва".

2. Имя файла

Боты читают URL. Файл IMG_10294.jpg ни о чем не говорит. Файл iphone-15-pro-max-blue.webp рассказывает всё. Используйте только латиницу и дефисы (забудьте про пробелы, нижние подчеркивания или кириллицу).

3. Окружающий текст

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

4. Атрибут Title

Опциональный атрибут. Это подсказка, всплывающая при наведении курсора. Менее важен для SEO, но полезен для UX (опыта) на десктопе. Пишите туда короткое название: title="Диван Гектор в белой коже".

Ленивая загрузка (Lazy Loading)

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

В 2026 году это делается нативно средствами браузера: просто добавьте loading="lazy" ко всем изображениям, кроме самых первых (находящихся на первом экране, в зоне LCP). Главную картинку сверху, наоборот, стоит загружать приоритетно, без lazy-load атрибута, иногда используя fetchpriority="high".

Инструменты пакетной оптимизации

Как перевести тысячи фотографий ИМ в WebP/AVIF:

• Squoosh.app: Тестирование разных компрессоров от Google в онлайне.
• TinyPNG / TinyJPG: Для легкой обрезки (хоть и не WebP).
• Консольные утилиты / Плагины Astro: Встроенные интеграции с sharp сжимают картинки в нужные форматы на лету при генерации страниц.

Не бойтесь внедрять AVIF и нативно сжимать картинки. Один день работы разработчика окупится ускорением сайта и лояльностью клиентов с медленным мобильным интернетом.

Что рядом

• Картинки — это часть Core Web Vitals: LCP чаще всего упирается именно в изображение первого экрана.
• Полный список технических проверок — в чек-листе технического аудита.
• Если сайт только проектируется, требования к форматам стоит заложить в ТЗ на разработку.

Не уверены, что тормозит именно графика — покажем в техническом аудите, что даёт основную задержку.