Оптимизация изображений для сайта: форматы, вес, alt

Почему изображения критичны для SEO и Core Web Vitals

Поисковые алгоритмы оценивают скорость загрузки страниц через набор метрик Core Web Vitals: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) и INP (Interaction to Next Paint). Изображения напрямую влияют на два из трёх: LCP ухудшается, если главная картинка страницы грузится дольше 2,5 секунды, а CLS растёт, когда изображения не имеют заранее указанных размеров и сдвигают контент при подгрузке. По данным HTTP Archive, медианный вес страницы на мобильных устройствах превышает 2 МБ, и примерно половина этого веса — изображения. Это не абстрактные числа: каждые лишние сотни килобайт ощутимо отодвигают LCP на среднем мобильном соединении.

С точки зрения ранжирования Google официально использует CWV как сигнал с 2021 года, а Яндекс учитывает скорость загрузки в своих алгоритмах как минимум с 2022-го. Практика показывает: сайты, перешедшие с JPEG/PNG на WebP/AVIF и настроившие lazy-load, улучшают LCP на 30–60% и получают ощутимый прирост позиций в конкурентных нишах. Параллельно изображения — самостоятельный канал трафика: Google Images генерирует от 5 до 15% поисковых переходов в нишах e-commerce, недвижимости, туризма и медицины. Оптимизированные alt-тексты и правильные имена файлов напрямую влияют на ранжирование в картиночном поиске.

WebP, AVIF, JPEG, PNG — какой формат выбрать и когда

Выбор формата — первый и самый весомый шаг оптимизации. JPEG остаётся стандартом де-факто для фотографий, но WebP при сопоставимом качестве (SSIM ≈ 0,93) весит на 25–34% меньше. AVIF — следующее поколение: он обеспечивает сжатие на 45–55% лучше JPEG и на 20–25% лучше WebP при аналогичном воспринимаемом качестве, особенно заметно на деталях с градиентами. PNG актуален только там, где нужна прозрачность без артефактов — логотипы, иконки, скриншоты интерфейсов. GIF в 2026 году не имеет оправданий: WebP-анимация или короткие MP4 заменяют его с выигрышем в 60–80% по весу.

Поддержка браузерами перестала быть проблемой: WebP поддерживают 96% активных браузеров (включая iOS Safari с версии 14, выпущенной ещё в 2020 году), AVIF — около 90% по состоянию на середину 2026-го. Правильная стратегия — использовать элемент HTML <picture> с несколькими <source>: сначала AVIF, затем WebP, затем JPEG как фолбэк. Браузер сам выберет максимально эффективный формат. Для изображений в CSS (background-image) применяют аналогичный подход через медиазапросы или JavaScript-детекцию через window.CSS.supports().

Настройка степени сжатия: где баланс между качеством и весом

Степень сжатия задаётся параметром quality при экспорте. Для JPEG и WebP золотой стандарт — quality 75–85 для фотографий на страницах товаров и статей; quality 60–70 для второстепенных изображений (фоны, декоративные элементы). AVIF менее чувствителен к снижению quality: значение 60–70 в cq-шкале даёт визуально неотличимое от JPEG-85 качество при вдвое меньшем файле. Практический тест: откройте изображение на 100% зума и сравните оригинал со сжатой версией. Если артефакты видны только при увеличении и отсутствуют при нормальном просмотре — сжатие оптимально. Инструменты для проверки SSIM/DSSIM (Structural Similarity Index) позволяют автоматизировать этот контроль в CI/CD-пайплайне.

Как правильно сжимать изображения: инструменты и пайплайны

Ручное сжатие — тупик для сайтов с сотнями и тысячами изображений. Промышленный подход — автоматизированный пайплайн обработки при загрузке или деплое. На уровне CMS: для WordPress работают плагины ShortPixel, Imagify, Smush Pro — они конвертируют и сжимают изображения при загрузке, генерируют WebP-версии и автоматически подставляют <picture> или srcset. Для Next.js и Nuxt встроенные компоненты Image (next/image, nuxt/image) выполняют автоматическую конвертацию, генерацию srcset и lazy-load из коробки. На уровне CDN: Cloudflare Image Optimization, Imgix, Cloudinary и аналоги конвертируют формат и разрешение «на лету» по URL-параметрам — идеальный вариант для высоконагруженных ресурсов.

• squoosh.app — браузерный инструмент Google для сравнения форматов и ручного сжатия
• sharp (Node.js) — самая быстрая библиотека для серверной обработки, поддерживает AVIF/WebP
• ImageMagick / libvips — CLI-инструменты для батч-обработки в CI/CD
• Cloudflare Images / Cloudinary — CDN-решения с трансформацией по URL
• ShortPixel / Imagify — WordPress-плагины с автоматической конвертацией
• next/image / nuxt/image — встроенная оптимизация для фреймворков

Атрибут alt: как писать описания, которые работают в SEO

Alt-текст выполняет три функции одновременно: доступность (скринридеры для пользователей с ограниченными возможностями), SEO (сигнал для индексации в поиске по картинкам), запасное отображение (когда изображение не загрузилось). Ошибки, которые встречаются в 80% аудитов: полное отсутствие alt, заполнение alt именем файла (img001.jpg), дублирование alt одного и того же текста на всех изображениях раздела, чрезмерное насыщение ключевыми словами. Правильный alt — конкретное, точное описание того, что изображено, с органичным вхождением целевого запроса там, где это семантически уместно. Длина: 50–120 символов, без вводных фраз типа «изображение показывает» или «картинка с».

Для товарных изображений формула: [бренд/тип] + [модель/название] + [ключевой параметр] + [контекст]. Пример: вместо alt="кроссовки" → alt="кроссовки Nike Air Max 270 чёрные мужские, вид сбоку". Для информационных изображений (инфографики, диаграммы) alt должен кратко передавать главный вывод: alt="График роста органического трафика на 47% после оптимизации структуры сайта". Декоративные изображения (разделители, фоны) получают пустой alt alt="" — это правильно и accessibility-friendly. Для правильного распределения ключевых слов между alt-текстами разных изображений полезно понять принципы семантического поиска и кластеризации.

Имена файлов и структура папок: ещё один сигнал для индексации

Имя файла — слабый, но реальный сигнал для Google Images. Файл product-nike-air-max-270-black.webp будет проиндексирован релевантнее, чем DSC_04829_final_v2.jpg. Правила: использовать транслит или английский для кириллических названий, разделять слова дефисами (не подчёркиваниями), включать 2–4 ключевых слова, избегать стоп-слов и цифровых идентификаторов. Структура папок: /images/products/, /images/blog/, /images/team/ — логичная иерархия помогает поисковому роботу понять контекст изображений даже без дополнительных сигналов.

Responsive images и srcset: правильные размеры для каждого устройства

Отдавать изображение 2000×1500 пикселей пользователю смартфона с экраном 390 пикселей — значит тратить его трафик и своё LCP впустую. Атрибут srcset с дескрипторами ширины (w) позволяет браузеру самостоятельно выбрать оптимальный вариант изображения. Стандартный набор брейкпойнтов для большинства сайтов: 320w, 640w, 1024w, 1440w, 2048w (для retina-экранов). Атрибут sizes описывает, какую долю вьюпорта занимает изображение при разных разрешениях: sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px". Без sizes браузер использует консервативную эвристику и может выбрать слишком тяжёлое изображение.

Критически важно явно указывать атрибуты width и height на всех изображениях — это позволяет браузеру зарезервировать место под изображение до его загрузки и устраняет CLS. В современных фреймворках (Next.js, Nuxt, Astro) это делается автоматически компонентом Image. На «ручных» сайтах добавление width и height в разметку снижает CLS на 90% случаев его возникновения. Подробнее об ускорении сайта и влиянии скоростных метрик на ранжирование — в отдельном материале.

Lazy-load и preload: когда грузить изображение немедленно, а когда — лениво

Нативный lazy-load через loading="lazy" поддерживается во всех современных браузерах и откладывает загрузку изображений, находящихся вне вьюпорта. Это мгновенно снижает начальный вес страницы и улучшает FCP и LCP для изображений в первом экране. Правило: loading="lazy" ставится на все изображения ниже первого экрана. Изображения первого экрана — особенно главный баннер, hero-секция, первое фото товара — должны загружаться с loading="eager" (или вообще без атрибута) и желательно получать <link rel="preload"> в <head> страницы для предзагрузки.

Атрибут fetchpriority="high" (поддерживается с Chrome 101, Safari 17) подсказывает браузеру приоритизировать загрузку конкретного изображения в очереди запросов. Его нужно добавлять к LCP-изображению каждой страницы — это один из самых эффективных инструментов улучшения LCP без изменения самого контента. Обратная ситуация: fetchpriority="low" полезен для декоративных изображений, которые технически находятся в первом экране, но не являются контентно значимыми. Мониторинг эффективности lazy-load ведётся в Google Search Console через отчёт Core Web Vitals и в Lighthouse.

Техническая SEO-оптимизация изображений: sitemap, schema, structured data

Image Sitemap ускоряет и улучшает индексацию изображений в Google Images. Это либо отдельный файл sitemap-images.xml, либо расширение основного sitemap тегами <image:image>. Для каждого изображения можно указать <image:loc> (URL), <image:title> (заголовок), <image:caption> (подпись) и <image:geo_location> (для локальных изображений). Яндекс поддерживает аналогичное расширение. Практика: для интернет-магазинов с тысячами товаров Image Sitemap генерируется автоматически через YML/XML-фид — это же снижает трудозатраты на товарный фид.

Разметка Schema.org для изображений повышает шанс попасть в расширенные сниппеты. Тип ImageObject используется внутри Product, Article, Recipe, LocalBusiness и других схем: указывается url, width, height, caption, description. Для товарных страниц важен image в Product-схеме — это прямой сигнал для Google Shopping и Knowledge Panel. Для статей блога изображение в Article-схеме увеличивает вероятность попадания в Google Discover. Вместе с качественной разметкой Schema изображения становятся частью семантического контекста страницы, а не просто медиафайлами.

Аудит изображений: как найти и устранить ошибки на существующем сайте

Полноценный технический SEO-аудит всегда включает анализ изображений. Типовые ошибки, которые выявляются при аудите: изображения без alt (в среднем 30–40% всех img на коммерческих сайтах), дублированные alt-тексты, использование устаревших форматов JPEG/PNG при наличии WebP-альтернатив, отсутствие width/height атрибутов, изображения, блокирующие рендеринг из-за отсутствия lazy-load, слишком большие изображения относительно отображаемого размера (oversized images), изображения, загружаемые с разных доменов без CDN, что увеличивает DNS lookup time.

Инструменты аудита: Screaming Frog SEO Spider (вкладка Images — показывает все alt, размеры, форматы, коды ответа), PageSpeed Insights и Lighthouse (раздел Opportunities — конкретные рекомендации с оценкой экономии), WebPageTest (waterfall загрузки, анализ порядка запросов), Chrome DevTools (Coverage tab — процент неиспользованных данных на странице). Автоматизированный мониторинг через Яндекс Вебмастер и Google Search Console позволяет отслеживать индексацию изображений и выявлять страницы с проблемами CWV в реальном времени.

• Screaming Frog — полный краул с выгрузкой всех img и их атрибутов
• PageSpeed Insights — оценка конкретных изображений, блокирующих LCP
• Lighthouse (DevTools) — аудит «Properly size images», «Serve images in next-gen formats»
• WebPageTest — waterfall и filmstrip для анализа порядка загрузки
• Semrush / Ahrefs — контроль индексации изображений и их позиций в Google Images
• Chrome Coverage — выявление oversized изображений относительно вьюпорта

Чеклист оптимизации: что проверить перед публикацией изображения

1. Выбрать правильный формат: AVIF/WebP для фото, SVG для иконок/логотипов, PNG только для прозрачности
2. Задать оптимальный quality: 65–80 для AVIF, 75–85 для WebP, 80–85 для JPEG
3. Указать srcset с 3–5 брейкпойнтами и атрибут sizes
4. Прописать width и height для предотвращения CLS
5. Написать информативный alt (50–120 символов, с ключевым словом)
6. Назвать файл транслитом с дефисами, включить 2–4 ключевых слова
7. Добавить loading="lazy" для изображений ниже первого экрана
8. Добавить fetchpriority="high" и preload для LCP-изображения
9. Добавить изображение в Image Sitemap
10. Добавить ImageObject в Schema.org разметку страницы

Картиночный поиск как отдельный канал трафика

Google Images — полноценный поисковый канал с собственной аудиторией и логикой ранжирования. Факторы ранжирования в картиночном поиске отличаются от текстового: качество и уникальность самого изображения, релевантность alt-текста и подписи (caption) к запросу, авторитетность страницы-хоста (PageRank), свежесть (дата последнего изменения страницы), структурированные данные с ImageObject, скорость загрузки страницы с изображением. В нишах с высоким визуальным компонентом — интернет-магазины, медицина, недвижимость, туризм, мебель — картиночный поиск может приносить до 15–20% всего органического трафика.

Яндекс Картинки работает по схожему принципу, но с особым акцентом на поведенческие факторы: CTR миниатюры в выдаче и время просмотра изображения напрямую влияют на позиции. Это означает, что качество и привлекательность самого изображения важны не меньше технических сигналов. Уникальные авторские фотографии и иллюстрации ранжируются лучше стоковых изображений, которые присутствуют на десятках тысяч других страниц. Для блога и информационных разделов это открывает стратегию: оригинальные инфографики и авторские иллюстрации одновременно улучшают пользовательские поведенческие факторы и приносят самостоятельный трафик из картиночного поиска.

CDN и хостинг изображений: инфраструктурный уровень оптимизации

Даже идеально сжатое изображение будет грузиться медленно, если сервер физически расположен далеко от пользователя. CDN (Content Delivery Network) решает эту проблему, кэшируя изображения на серверах в разных географических точках. Для российского рынка актуальны: Cloudflare (глобальная сеть, включая несколько PoP в России), Selectel CDN, МТС Edge, G-Core Labs — последние три обеспечивают низкую задержку именно для российской аудитории. Правильная настройка CDN для изображений включает: Cache-Control с max-age не менее 30 дней (лучше 1 год с версионированием в URL), сжатие gzip/brotli для SVG, HTTP/2 или HTTP/3 для параллельных запросов. Выбор хостинга с учётом CDN-возможностей — часть технической стратегии продвижения.

Отдельный вопрос — использование внешних CDN-доменов для изображений (например, images.example.com вместо example.com/images/). Это требует дополнительного DNS lookup и TCP-соединения, что при первом визите добавляет 100–200 мс задержки. Решение — <link rel="preconnect"> к домену изображений в <head>. Другая стратегия — держать изображения на том же домене или использовать поддомен без отдельного SSL handshake через HTTP/2 connection coalescing. SEO-аналитика трафика из разных источников помогает измерить реальный вклад изображений в общую картину привлечения аудитории.