Оптимизация изображений для SEO в 2026: ALT, WebP, AVIF и lazy-load

В современном цифровом мире изображения — это не просто декоративный элемент сайта. Они являются критически важным компонентом пользовательского опыта, поисковой оптимизации и технической производительности. На большинстве веб-сайтов медиафайлы занимают от 30 до 60% общего веса страницы, при этом часто остаются полностью неоптимизированными. Несвоевременная загрузка картинок, отсутствие альтернативного текста, использование устаревших форматов и неправильная настройка ленивой загрузки — всё это напрямую влияет на ранжирование, конверсию и удержание аудитории. В 2026 году, когда алгоритмы поисковых систем всё больше ориентируются на качество пользовательского взаимодействия и техническую чистоту, игнорирование оптимизации изображений становится одной из главных причин снижения видимости сайта в поисковой выдаче. В этой статье мы подробно разберём, как правильно настроить атрибуты alt, выбрать оптимальные форматы изображений, настроить lazy-load и избежать распространённых ошибок, которые мешают достигать высоких показателей Core Web Vitals.

Зачем оптимизировать изображения для SEO: три ключевых причины

Многие владельцы сайтов считают, что изображения — это вопрос дизайна и визуальной привлекательности, но не SEO. Это серьёзное заблуждение. Грамотная оптимизация медиафайлов оказывает прямое влияние на три основных аспекта поискового продвижения: видимость в поиске по изображениям, технические метрики производительности и поведенческие сигналы пользователей.

Поиск по изображениям как источник трафика

Яндекс.Картинки и Google Images — это мощные, но недооценённые источники органического трафика. По данным аналитических исследований, до 15% всех кликов на e-commerce-сайты и информационные порталы приходят именно через поисковые системы изображений. При этом большинство сайтов теряют этот трафик из-за отсутствия или некорректного заполнения атрибута alt. Если изображение не имеет описания, поисковые системы не могут понять его содержание и не будут включать его в результаты поиска. Даже если картинка привлекательна и релевантна запросу, она останется невидимой для пользователей, ищущих контент через изображения. Устранение этой проблемы — один из самых простых способов увеличить органический трафик без дополнительных затрат на рекламу.

Core Web Vitals: LCP и влияние изображений

Один из ключевых показателей производительности — Largest Contentful Paint (LCP) — в 80% случаев определяется именно изображением, расположенным в области первого экрана. Если это фото или баннер не оптимизирован по размеру, формату и способу загрузки, LCP может превысить порог в 2.5 секунды (рекомендованное значение Google), что приведёт к снижению рейтинга страницы. Браузеры приоритизируют загрузку текстового контента, и если изображение в верхней части страницы имеет большой вес или не загружается с высоким приоритетом, пользователь будет видеть пустое пространство или блок с текстом без визуального контекста — это создаёт ощущение медленной работы сайта. Результат? Повышенная отскок, снижение времени на сайте и падение позиций в поисковой выдаче.

Поведенческие факторы: pogo-sticking и удержание

Пользователи в 2026 году не имеют терпения к медленным сайтам. Если изображение на странице загружается дольше 3–4 секунд, более половины посетителей покинут её до завершения загрузки. Это явление называется pogo-sticking — когда пользователь переходит на сайт, быстро возвращается в выдачу и кликает на другой результат. Поисковые системы, особенно Яндекс, активно отслеживают такие паттерны поведения. Повторяющиеся случаи pogo-sticking становятся прямым сигналом о низком качестве страницы. Изображения, которые не загружаются быстро или «прыгают» при отрисовке из-за отсутствия заданных размеров, являются основной причиной этого явления. Оптимизация медиафайлов — это не просто техническая задача, а стратегический инструмент удержания аудитории.

ALT-атрибут: как писать правильно, чтобы улучшить SEO и доступность

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

Правило 1: Описывайте картинку буквально

Alt-текст должен быть точным, конкретным и описательным. Вместо фразы «купить диван в Москве за 15 тысяч» пишите: «Угловой диван серого цвета в интерьере современной гостиной с окном и ковром». Такой текст помогает скринридеру точно передать содержание изображения, а поисковой системе — понять контекст. Поисковые алгоритмы анализируют текстовые описания, чтобы сопоставить изображение с запросами вроде «диваны для гостиной», «серые угловые диваны» или «интерьер с большим окном». Чем точнее описание, тем выше шансы на попадание в результаты поиска изображений и связанных запросов.

Правило 2: Длина — от 5 до 15 слов

Слишком короткий alt-текст (например, «диван») не даёт достаточной информации для анализа. Слишком длинный — обрезается скринридерами, что делает его бесполезным для людей с ограниченными возможностями. Оптимальная длина — 5–15 слов. Это позволяет передать суть без перегруза. Например: «Крупный план обивки дивана с текстурой бархата» — идеальный вариант для товарного фото.

Правило 3: Уникальность каждого изображения

На странице с товарами или статьями часто встречается множество изображений одного объекта. Например, товарный лист может включать 10–20 фотографий: вид спереди, сбоку, крупный план, детали ткани, упаковка. Каждое из них должно иметь уникальный alt-текст. Использование одинакового описания для всех картинок — это дублирование, которое снижает релевантность. Правильный подход: «Вид спереди дивана с подлокотниками», «Вид сбоку дивана с отделкой ног», «Крупный план ткани: бархатная текстура». Это не только улучшает SEO, но и повышает доступность — пользователи скринридеров получают чёткое представление о каждом элементе.

Правило 4: Избегайте переспама ключевых слов

Ни в коем случае не пишите: «купить диван Москва недорого лучший выбор». Такие формулировки выглядят как спам, и поисковые системы могут их игнорировать или применить санкции. Алгоритмы становятся всё более умными — они понимают контекст, а не просто подсчитывают вхождения слов. Лучше использовать один ключевой запрос, если он уместен, или вообще обойтись без него. Главное — описать, что вы видите на картинке.

Правило 5: Декоративные изображения — пустой alt

Если картинка используется исключительно для украшения — логотип в шапке, фоновая текстура, декоративные значки — её alt-атрибут должен быть пустым: alt="". Это специальный сигнал для скринридеров: «пропустить этот элемент». Не пишите «декоративная картинка» — это создаёт лишний шум для людей с нарушениями зрения. Пустой alt — это не ошибка, а правильная практика.

Практический совет: как проверить alt-тексты

Чтобы убедиться, что все изображения на вашем сайте правильно описаны, используйте инструменты разработчика в браузере. Откройте DevTools (F12), перейдите во вкладку Elements, найдите теги <img> и проверьте атрибут alt. Также можно использовать бесплатные сканеры, которые автоматически вытягивают все изображения со страницы и показывают, у каких отсутствует alt, есть дубли или переспам. Регулярная проверка (раз в квартал) — гарантия того, что вы не потеряете трафик из-за технических ошибок.

Форматы изображений: WebP, AVIF, JPG, PNG — как выбрать в 2026

Выбор формата изображения — один из самых значимых решений в оптимизации. От этого зависит не только скорость загрузки, но и качество воспроизведения. В 2026 году технология сжатия изображений достигла нового уровня, и использование старых форматов становится экономически нецелесообразным.

AVIF: новый стандарт сжатия

Формат AVIF (AV1 Image File Format) — это самый современный и эффективный формат для фотографий. Он основан на кодеке AV1, разработанном Alliance for Open Media. По сравнению с WebP, AVIF обеспечивает на 30–50% меньший размер файла при одинаковом или лучшем качестве. Это особенно важно для мобильных пользователей, у которых ограниченная пропускная способность. AVIF поддерживается всеми современными браузерами — Chrome, Firefox, Edge и Safari — с 2023 года. Для большинства сайтов он должен быть основным форматом.

WebP: надёжный фолбэк

WebP, разработанный Google в 2010 году, остаётся одним из самых популярных форматов благодаря своей совместимости. Он сжимает фото на 25–35% лучше, чем JPG, без заметной потери качества. WebP поддерживается практически всеми браузерами, включая старые версии Android и iOS. Его преимущество — стабильность: даже если CDN или сервер не поддерживают AVIF, WebP станет надёжной альтернативой. Используйте его как fallback-формат.

JPG: только для особых случаев

Формат JPG (JPEG) — это устаревший стандарт, который до сих пор используется из-за привычки. Он подходит только в двух случаях: когда требуется максимальная совместимость с почтовыми клиентами (например, Outlook) и при работе с устаревшими системами, где невозможно внедрить современные форматы. Для веб-сайтов JPG — это устаревший выбор: файлы в 2–5 раз тяжелее, чем у AVIF или WebP. Использование JPG для фотографий на сайте — это прямой удар по Core Web Vitals.

PNG: только для прозрачности и графики

PNG — это формат без потерь, идеальный для логотипов, иконок, изображений с прозрачным фоном. Однако его использование для фотографий — это огромная ошибка. PNG не использует эффективные алгоритмы сжатия, и файлы в 5–10 раз тяжелее JPG. В 2026 году PNG для фото — это устаревший подход, который замедляет загрузку страницы. Используйте его только для векторных элементов с прозрачностью.

SVG: идеальный выбор для векторной графики

Все иконки, логотипы, схемы, диаграммы и простые иллюстрации должны быть в формате SVG. Этот векторный формат масштабируется без потери качества, не зависит от разрешения экрана и имеет минимальный вес — часто менее 1 КБ. SVG можно редактировать в текстовом редакторе, анимировать с помощью CSS и JavaScript. Это не просто формат — это стандарт для современной веб-графики.

Как реализовать несколько форматов: тег

Чтобы обеспечить совместимость и оптимальную загрузку, используйте тег <picture>. Он позволяет браузеру выбирать подходящий формат автоматически:

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg" alt="Описание изображения" width="1200" height="630" loading="lazy">
</picture>

Браузер последовательно проверяет каждый элемент <source> и загружает первый поддерживаемый формат. Если ни один из них не подходит — используется тег <img> с JPG. Это решение не требует JavaScript, работает на всех устройствах и обеспечивает максимальную производительность.

Сравнение форматов: таблица

Размеры и оптимизация: как не убить Core Web Vitals

Даже если вы используете AVIF, неправильный размер изображения может полностью свести на нет все усилия. Самая распространённая ошибка — загрузка фотографий в оригинальном разрешении (например, 4000×3000 пикселей) и последующее масштабирование через CSS. Это означает, что браузер загружает 10–20 МБ данных, чтобы показать изображение размером 600×400 пикселей. Это убийца производительности.

Рекомендации по размерам файлов в 2026

• Hero-изображение (первый экран): до 150 КБ в AVIF или до 250 КБ в WebP. Если файл больше — используйте инструменты сжатия (например, Squoosh, TinyPNG) или уменьшите физический размер до 1200–1600 пикселей по ширине.
• Контентные изображения в статьях: до 80 КБ. Достаточно разрешения 1000–1200 пикселей по ширине.
• Превью и миниатюры: до 30 КБ. Уменьшайте до 400–600 пикселей по наибольшей стороне.
• Иконки и UI-элементы: только SVG. Размер не имеет значения — они масштабируются.

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

Не доверяйте CSS-масштабированию. Всегда обрезайте и сжимайте изображения перед загрузкой на сервер. Используйте инструменты:

• Squoosh (от Google) — бесплатный онлайн-редактор с настройкой качества и формата.
• ImageOptim (для macOS) — удаляет метаданные и оптимизирует PNG/JPG.
• ShortPixel, Compressor.io — автоматические сервисы с API.
• WordPress плагины: Smush, ShortPixel Image Optimizer — автоматическая оптимизация при загрузке.

Также используйте responsive images с атрибутом srcset, чтобы загружать разные версии изображения в зависимости от размера экрана:

<img src="/images/photo-800.jpg" 
     srcset="/images/photo-400.jpg 400w, /images/photo-800.jpg 800w, /images/photo-1200.jpg 1200w" 
     sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
     alt="Описание изображения">

Это позволяет браузеру загружать изображение нужного размера, а не всегда самое большое.

Lazy-load: как настроить правильно, чтобы не сломать LCP

Ленивая загрузка (lazy-load) — это техника, при которой изображения загружаются только тогда, когда пользователь прокручивает страницу до их местоположения. Это отличный способ сэкономить трафик и ускорить начальную загрузку. Но если применять её неправильно — можно серьёзно повредить производительность.

Правило 1: Никогда не используйте lazy-load для LCP-изображения

Если изображение является Largest Contentful Paint (LCP) — то есть главным элементом первого экрана — оно должно загружаться немедленно. Установка loading="lazy" на таком изображении заставит браузер отложить его загрузку, и LCP увеличится с 1.5 до 3+ секунд — это приведёт к падению рейтинга в Google PageSpeed. Вместо этого используйте:

<img src="/images/hero.avif" 
     alt="Описание герой-изображения"
     width="1200" 
     height="630"
     loading="eager"
     fetchpriority="high">

Атрибут loading="eager" принудительно загружает изображение сразу. А fetchpriority="high" даёт браузеру сигнал, что это изображение имеет высокий приоритет — даже если оно не является первым в HTML-коде.

Правило 2: Всегда используйте lazy-load для остальных изображений

Все картинки ниже первого экрана — логично загружать с задержкой. Это уменьшает объём данных, передаваемых при первом запросе. Для этого достаточно добавить:

<img src="/images/content-image.webp" alt="Описание" loading="lazy">

Этот атрибут поддерживается всеми современными браузерами с 2022 года. Никакие JS-библиотеки не нужны — это встроенная функция браузера.

Правило 3: Обязательно указывайте width и height

Если вы не задаёте атрибуты width и height, браузер не знает, какое пространство зарезервировать для изображения. Когда картинка наконец загружается, она «выталкивает» текст вниз — это вызывает Cumulative Layout Shift (CLS), что является важным показателем Core Web Vitals. CLS должен быть ниже 0.1, иначе Google будет снижать рейтинг страницы.

Пример правильного кода:

<img src="/images/photo.jpg" 
     alt="Описание изображения"
     width="600"
     height="400" 
     loading="lazy">

Размеры должны соответствовать реальным размерам изображения. Если вы используете CSS для масштабирования — задавайте размеры в пикселях, а не процентами.

Имена файлов и структура путей: важные детали

Многие считают, что имя файла не влияет на SEO. Это неверно. Поисковые системы анализируют имена файлов как сигнал релевантности. Имя IMG_4827.jpg не содержит ни одного семантического слова, тогда как uglovoe-divan-seroe.webp прямо говорит о содержании изображения.

Правила именования файлов

• Используйте транслит или английский. Избегайте кириллицы, пробелов и специальных символов. Пишите: kraskoraspylitel-elektricheskij.webp, а не Краскораспылитель электрический.webp.
• Используйте дефисы, а не подчёркивания. uglovoe-divan-seroe — правильно. uglovoe_divan_seroe — не так хорошо.
• Не переспамьте ключами. Достаточно одного-двух описательных слов. Не пишите: divan-uglovoj-seriy-kupit-moskva-nedorogo.
• Используйте структурированные пути. Лучше: /images/products/divany/uglovye/seryj-pravyj.avif. Вместо: /img/12345.jpg. Это помогает поисковикам понимать структуру сайта и повышает релевантность.

Что перестало работать: устаревшие практики

В интернете до сих пор циркулируют гайды, которые предлагают использовать методы 2015–2020 годов. Вот список устаревших советов, которые вы должны игнорировать:

«Микроразметка ImageObject для всех картинок»

С 2024 года Google перестал использовать микроразметку ImageObject для большинства типов страниц. Она работает только в специфичных случаях: товары, рецепты, статьи с картинками. В остальных случаях она бесполезна и может даже замедлить загрузку страницы.

«Загружайте изображения на отдельный поддомен»

Раньше считалось, что статические файлы нужно хостить на отдельном домене (например, static.example.com) для ускорения. Это было актуально в эпоху HTTP/1.1, когда браузеры ограничивали количество одновременных соединений. Сегодня HTTP/2 и HTTP/3 позволяют передавать несколько файлов по одному соединению — поддомены больше не дают преимущества. Используйте CDN, но без создания отдельных поддоменов для картинок.

«PNG для фотографий — лучше качество»

PNG действительно не имеет артефактов, но его вес в 5–10 раз выше, чем у JPG/WebP/AVIF. При правильном сжатии современные форматы не уступают по качеству. В 2026 году PNG для фото — это пережиток прошлого.

«Заполняйте alt-атрибут 10 синонимами»

Переспам ключевых слов в alt — это старый метод, который давно распознаётся как манипуляция. Поисковые системы теперь используют NLP (Natural Language Processing) и понимают контекст. Лучше один точный, читаемый текст, чем список ключей.

Чек-лист для самостоятельной проверки сайта

Примените этот чек-лист к своему сайту — если все пункты выполнены, вы в топе 20% рунета по качеству работы с изображениями.

1. ALT-атрибуты: У каждой контентной картинки есть осмысленный, уникальный alt-текст (не пустой и не переспамлен).
2. LCP: Главное изображение на первом экране загружается с loading="eager" и fetchpriority="high".
3. Lazy-load: Все изображения ниже первого экрана имеют атрибут loading="lazy".
4. Размеры: У всех тегов <img> указаны атрибуты width и height.
5. Форматы: Основной формат — AVIF, фолбэк — WebP. JPG и PNG используются только там, где это необходимо.
6. Сжатие: Изображения не превышают рекомендованных размеров (150 КБ для hero, 80 КБ для контента).
7. Файлы: Имена файлов в транслите, через дефисы. Нет пробелов, кириллицы или спецсимволов.
8. Декоративные изображения: Имеют пустой alt или загружены как CSS-фоны.

Выводы и рекомендации

Оптимизация изображений — это не техническая деталь, а стратегический элемент SEO. Она напрямую влияет на три ключевых показателя: видимость в поиске изображений, производительность сайта и поведение пользователей. В 2026 году игнорировать эту область — значит сознательно отказываться от части органического трафика и снижать качество пользовательского опыта.

Ваша задача — не просто загружать картинки, а создавать их с учётом всех аспектов: доступности, скорости и семантики. Используйте AVIF как основной формат, WebP — как фолбэк. Пишите точные alt-тексты для каждого изображения. Никогда не применяйте lazy-load к LCP-изображению. Указывайте размеры. Используйте структурированные имена файлов.

Эффект от этих действий часто проявляется уже через 2–4 недели после переобхода сайта поисковыми системами: рост позиций на 1–3 пункта, увеличение трафика из Яндекс.Картинок и Google Images, улучшение Core Web Vitals на 15–30 баллов. Эти изменения не требуют больших бюджетов — только внимания к деталям.

Не дожидайтесь, пока ваш сайт начнёт терять трафик из-за медленных картинок. Примените этот чек-лист сегодня — и вы получите не просто более быстрый сайт, а более привлекательный, доступный и эффективный продукт для пользователей.