Животные меняются при загрузке страницы
Оптимизация изображений для SEO: размер, атрибуты alt и lazy‑load на практике
Карточки, чек-листы, таблицы и примеры помогают быстро найти нужный ответ.
В поисковой выдаче важную роль играет скорость загрузки и доступность контента. Изображения – один из ключевых факторов, влияющих на Core Web Vitals и индексацию. В этом руководстве рассматриваются конкретные шаги, которые помогут оптимизировать изображения на сайте, учитывая требования 2026 года.
Оптимизация изображений – это сочетание правильного выбора формата, размера, alt‑тегов и lazy‑load, проверяемое метриками Core Web Vitals и инструментами индексации. Следуя плану, вы уменьшите время загрузки, улучшите пользовательский опыт и обеспечите лучшую видимость в поиске.
Что такое оптимизация изображений для SEO?
Изображения – не просто украшение страницы. Они дают поисковому боту визуальный контекст, подтверждают смысл текста и повышают вовлечённость пользователей. В поисковой выдаче картинки появляются в отдельном разделе, а в результатах SERP – в сниппетах. Поэтому оптимизированные изображения напрямую влияют на CTR и, как следствие, на позиции.
В Core Web Vitals изображения оказывают двойное воздействие. Слишком большие файлы замедляют Largest Contentful Paint (LCP), а отсутствие указанных размеров приводит к Layout Shift, повышающему CLS. Кроме того, медленная загрузка может вызвать задержки FID, если скрипты ждут рендеринга.
Google может «читать» изображения только через их атрибуты и контекст. Если alt‑текст не описывает содержимое, картинка теряет релевантность, а поисковый бот пропустит её в индексе. Правильно структурированные изображения с атрибутом src, width/height и alt создают дополнительный семантический слой, который поисковый движок использует для оценки страницы.
В практических рекомендациях важно использовать современные форматы WebP и AVIF, а также атрибуты srcset и sizes. Это позволяет браузеру выбирать оптимальный размер в зависимости от устройства, уменьшая трафик и ускоряя LCP.
Lazy loading отложит загрузку изображений вне видимой области, снижая начальный поток данных и повышая First Contentful Paint (FCP). Однако поисковый бот иногда не видит lazy‑loaded контент, если не реализован IntersectionObserver или server‑side rendering, поэтому важно тестировать индексацию через Search Console.
оптимизация изображений – это баланс между визуальной привлекательностью, техническими метриками и семантикой. Без правильной настройки изображения могут стать источником медленной загрузки, потери индексации и низкого CTR.
Как измерить размер изображения и его влияние на Core Web Vitals?
Для точного измерения размеров изображений, влияющих на Core Web Vitals, сначала соберите полный набор ресурсов. Нужно иметь доступ к исходным файлам изображений в каталоге /assets, возможность запустить скрипты на сервере и получить лог HTTP‑запросов. Включите в конфигурацию CDN или Varnish, чтобы видеть реальные размеры передаваемых файлов. Настройте метрики LCP и CLS в Google Analytics через Measurement Protocol, чтобы сравнивать до и после оптимизации. Важно, чтобы в коде страницы были атрибуты width/height, чтобы браузер мог резервировать место.
Методы измерения: 1) Используйте Chrome DevTools → Network → фильтр «Img», смотрите поле «Size» и «Transferred». 2) Запустите скрипт Node.js с библиотекой sharp для расчёта пиксельных размеров и битрейта. 3) Откройте исходный файл в ImageMagick и выполните команду identify -format "%w %h %b" image.jpg. 4) В Lighthouse (включённом в DevTools) найдите раздел «Largest Contentful Paint» – в отчёте указан размер загружаемого блока.
Пороговые значения: LCP ≤ 2 с при размере изображения ≤ 1 МБ; CLS
Инструменты анализа: Chrome DevTools, Lighthouse, PageSpeed Insights, WebPageTest, GTmetrix, ImageKit.io (для анализа размера и качества), и собственный скрипт на Python/Node.js, который парсит HTML, собирает размеры и выводит отчёт.
- Доступ к каталогу изображений (S3, FTP, CI/CD)
- Включённые метрики LCP и CLS в Google Analytics
- Настроенный CDN с логами HTTP‑запросов
- Установленные инструменты: Chrome DevTools, Lighthouse, Node.js + sharp
- Скрипт для парсинга HTML и измерения размеров (Python/Node.js)
- Отдельная ветка в репозитории для тестов без влияния на продакшн
Практический план выбора формата и сжатия
- Соберите образцы: фотографии, графики, логотипы. Для каждой группы определите нужный баланс качества и размера.
- Выберите формат:
- WebP – подходит для фотографий и сложных изображений, почти все браузеры.
- AVIF – лучший коэффициент сжатия, но ограничена поддержка в Safari.
- JPEG‑XL – универсальный, поддерживает lossy и lossless, хорош для больших библиотек.
- Сожмите изображения:
- Для lossy‑сжатия используйте libvips, mozjpeg, AVIF‑encoder, задавая качество 70‑80 %.
- Для lossless‑сжатия применяйте pngquant, optipng или jpeg‑xl‑encoder с флагом lossless.
- Проверьте качество:
- В Chrome DevTools откройте Compare Images, оцените видимые потери.
- Сравните метрики File Size и Lighthouse Core Web Vitals для исходного и сжатого изображения.
- Если потери заметны, уменьшите степень lossy‑сжатия до 85‑90 % или переключитесь на lossless.
- Подготовьте финальный набор файлов, разместите в CDN, добавьте атрибуты loading="lazy" и корректный alt. Проверьте, что поисковые боты видят все версии через srcset.
Атрибут alt: как писать, что проверять
- Определить функцию изображения: контент, навигация, декоративность.
- Для контентных картинок писать alt, описывающий смысл, а не ключевые слова.
- Для декоративных изображений ставить alt="".
- Включать в alt название бренда, если это значимый элемент.
- Не превышать 125–150 символов, чтобы сохранить читаемость.
- Учитывать контекст страницы: alt должен дополнять текстовый материал.
- Для изображений, ведущих по ссылке, описывать цель ссылки.
- Проверять уникальность alt: одинаковые изображения в разных местах → разные alt.
- Внимательно относиться к изображениям с динамическим контентом (carousel, gallery).
- Убедиться, что alt находится в видимом HTML, а не генерируется скриптом после загрузки.
- Для lazy‑load включать alt сразу в тег
, чтобы поисковый бот видел его.
- Проверять наличие alt в sitemap‑файле для изображений, если он используется.
- В Google Search Console просматривать отчёт «Изображения», чтобы увидеть пропущенные alt.
- В Bing Webmaster Tools проверять «Изображения», чтобы убедиться в индексации alt.
- В Yandex Webmaster проверять «Изображения» и «Картинки» для корректной индексации.
- Скриншотить и сравнить alt в исходном коде и в итоговом HTML после сборки.
- Использовать Screaming Frog: включить «Image Alt Text» в отчёте, чтобы быстро выявить дубли.
- В Ahrefs или SEMrush проверять «Image Alt Text» в отчётах о техническом аудите.
- В CMS задать шаблон автогенерации alt, основанный на заголовке изображения и контексте.
- Периодически обновлять alt, если меняется смысл изображения или контекст страницы.
Lazy‑loading: как реализовать без потери индексации
/* 1️⃣ Маркировка изображения */
<img
src="placeholder.jpg" /* маленькая картинка-заполнитель */
data-src="real-image.webp" /* реальный путь к изображению */
data-srcset="real-image-400.webp 400w, real-image-800.webp 800w"
sizes="(max-width: 600px) 100vw, 600px"
alt="Описание изображения" /* важный атрибут для SEO */
loading="lazy" /* браузерный атрибут lazy‑load */
class="lazy"
/>
/* 2️⃣ JavaScript‑плагин IntersectionObserver */
<script>
(function() {
// Проверяем поддержку IntersectionObserver
if ('IntersectionObserver' in window) {
const lazyImgs = document.querySelectorAll('img.lazy');
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // подгружаем src
img.srcset = img.dataset.srcset; // подгружаем srcset
img.classList.remove('lazy');
obs.unobserve(img);
}
});
});
lazyImgs.forEach(img => observer.observe(img));
} else {
/* 3️⃣ Fallback для старых браузеров: сразу загружаем все */
const lazyImgs = document.querySelectorAll('img.lazy');
lazyImgs.forEach(img => {
img.src = img.dataset.src;
img.srcset = img.dataset.srcset;
img.classList.remove('lazy');
});
}
})();
</script>
/* 4️⃣ Noscript‑fallback для поисковых ботов и пользователей без JS */
<noscript>
<img src="real-image.webp" alt="Описание изображения" />
</noscript>
Проверка результатов: метрики и инструменты
- Запускаем Search Console → Core Web Vitals → Page, выбираем URL с новыми изображениями. Проверяем LCP
- С той же страницей открываем PageSpeed Insights. Отмечаем рекомендации по оптимизации изображений и lazy‑load. Сравниваем полученные LCP/CLS с данными из Search Console; разница > 0.5 с указывает на различия в окружениях.
- В URL Inspection вводим URL и нажимаем «Проверить». Вкладка «Image index» должна показывать, что все изображения доступны и проиндексированы. Если изображения скрыты за
noscriptилиdata-src, они не попадают в индекс. - Параллельно запускаем Lighthouse в DevTools, выбираем вкладку «Performance» и проверяем, что все изображения загружаются с атрибутом
loading="lazy"и имеют корректные размеры. - Если сайт использует PWA, убедитесь, что Service Worker кэширует изображения правильно: в DevTools → Application → Cache Storage → проверяем наличие
image/файлов.
| Инструмент | Что проверяем |
|---|---|
| Search Console – Core Web Vitals | LCP, CLS, FID; сравнение с PageSpeed |
| PageSpeed Insights | Рекомендации по изображению; LCP, CLS, First Contentful Paint |
| URL Inspection – Image index | Наличие и индексация изображений |
| Lighthouse (DevTools) | Lazy‑load, размеры, атрибуты loading |
| Application → Cache Storage | Кэширование изображений в Service Worker |
Если все показатели совпадают: LCP
Частые ошибки и риски
-
Перегрузка сервера из‑за больших изображений
Большие файлы растут до сотен килобайт и даже мегабайт, заставляя сервер обрабатывать запросы дольше, увеличивая время отклика и нагрузку на сеть. Это приводит к падению Core Web Vitals, потере позиций в поиске и ухудшению UX. Чтобы избежать, применяйте автоматическую компрессию (JPEG‑XL, WebP), генерируйте responsive‑версии, храните изображения в CDN и включайте lazy‑load.
-
Неправильный alt‑тег
Если alt содержит «image», «photo» или пустой текст, поисковый бот не получает смысловой нагрузки, а пользователи с ограничениями видят ничего. Это снижает индексируемость и доступность, а также убивает потенциал ключевых слов. Убедитесь, что alt описывает содержимое, использует ключевые слова естественно и уникален для каждой картинки.
-
Lazy‑load без fallback
Боты Google не выполняют JavaScript, поэтому изображения, загружаемые только через lazy‑load, остаются невидимыми. Это приводит к потере контента в индексе, падению CTR и ухудшению Core Web Vitals. Добавьте
<noscript>‑fallback, используйте атрибутыdata-srcи проверяйте поддержку lazy‑load черезIntersectionObserverперед применением.
Мониторинг после внедрения
После запуска оптимизации изображений ключевой задачей становится постоянный мониторинг. LCP и CLS – индикаторы, которые напрямую влияют на UX и Core Web Vitals. Их можно измерять в Lighthouse, PageSpeed Insights, GTmetrix, а также в Chrome DevTools (панель Performance). CTR по картинкам собирается через события Google Analytics, где атрибуты alt и title выступают как текст клика. Периодический аудит в квартал проверяет размер, lazy‑load, наличие 404, качество alt и работу CDN‑кеширования.
| Параметр | Где смотреть | Частота | Краткое замечание |
|---|---|---|---|
| LCP | Lighthouse, PageSpeed Insights, GTmetrix | Еженедельно | Цель – |
| CLS | Chrome DevTools, Web Vitals API | Еженедельно | Цель – |
| CTR по картинкам | Google Analytics Events (alt/title) | Еженедельно | Сравнивать с предыдущими периодами |
| Размер изображений | GTmetrix, Lighthouse (Image size) | Квартально | Оптимизировать до |
| Lazy‑load статус | Chrome DevTools (Network), Lighthouse | Квартально | Все изображения должны иметь loading="lazy" |
| Alt‑текст | Проверка вручную через инспектор, Screaming Frog | Квартально | Текст должен быть описательным, без ключевых слов |
| 404 ошибки | Google Search Console, Screaming Frog | Еженедельно | Устранить все broken links |
| Кеширование CDN | Панель управления CDN, HTTP заголовки (Cache‑Control) | Квартально | Максимум 1 мес |
Вопросы и ответы
Какой формат изображения лучше использовать для SEO?
Для SEO предпочтительнее использовать форматы, поддерживающие сжатие без потери качества: WebP, AVIF, JPEG‑XL. Они уменьшают размер до 30–50 % по сравнению с JPEG, ускоряя загрузку и повышая показатель Core Web Vitals. Выбор зависит от браузерной поддержки и конкретного контента.
Можно ли использовать lazy‑load для всех изображений на сайте?
Lazy‑load удобно для изображений, которые не видны при первоначальной загрузке, но не стоит применять к баннерам, логотипам и первым блокам, где критична скорость отображения. Для остальных изображений включение lazy‑load повышает скорость страницы и экономит трафик. Внедрение зависит от структуры сайта.
Как правильно назвать файлы изображений для поисковой оптимизации?
Имена файлов должны быть короткими, описательными и содержать ключевые слова, разделённые дефисом. Избегайте бессмысленных буквенных комбинаций, дат и лишних цифр. Это помогает поисковикам понять контент изображения и улучшает ранжирование в выдаче.
Что такое атрибут alt и зачем он нужен в SEO?
Атрибут alt – текстовое описание изображения, которое читается скрин‑ридерами и поисковыми ботами. Он повышает доступность, помогает понять контекст изображения и влияет на позиционирование в поиске по изображению. Текст должен быть точным и содержать ключевые слова.
Как оптимизировать размер изображения без потери качества?
Используйте инструменты сжатия без потери (TinyPNG, ImageOptim) и конвертируйте в современные форматы (WebP, AVIF). Уменьшайте разрешение до нужного для макета, удаляйте EXIF‑данные и применяйте прогрессивный JPEG для больших фотографий.
Какие инструменты помогут с автоматической генерацией атрибутов alt?
Существуют плагины для CMS (WordPress – Auto Image Attributes), скрипты на Python и сервисы с API, которые анализируют контент страницы и генерируют описания. Автоматизация экономит время, но всегда проверяйте корректность сгенерированного текста.
Как проверить, что изображения загружаются с lazy‑load?
Откройте инструменты разработчика, перейдите в вкладку Network и включите фильтр по изображений. При прокрутке страницы убедитесь, что запросы появляются только после появления изображения в зоне видимости. Также можно проверить наличие атрибута loading="lazy" в теге img.
Нужно ли использовать WebP для всех изображений?
WebP обеспечивает лучшую компрессию, но не поддерживается всеми браузерами (особенно старые версии IE). Поэтому используйте WebP в сочетании с fallback‑изображением в формате JPEG/PNG. Это гарантирует совместимость и сохраняет преимущества сжатия.
Как влияет скорость загрузки изображений на ранжирование страниц?
Быстрая загрузка улучшает Core Web Vitals, которые являются факторами ранжирования в поиске. Медленные изображения могут привести к падению позиций, особенно в мобильной версии. Оптимизация изображений напрямую влияет на пользовательский опыт и рейтинг.
Как избежать ошибок 404 при работе с изображениями?
Проверяйте пути к файлам перед публикацией, используйте относительные URL и храните изображения в стабильной структуре каталогов. При переносе сайта обновляйте ссылки и настройте редиректы 301, чтобы избежать «потерянных» изображений.
Важно
Материал носит информационный характер. Перед внедрением рекомендаций учитывайте нишу, регион, конкурентов, текущее состояние сайта и бизнес-цели проекта.
Материал подготовлен и проверен редакцией AX.SEO
Редакция AX.SEO готовит материалы о SEO, разработке, AI, аналитике, маркетинге и росте digital-проектов.
Проверяет практическую применимость рекомендаций, корректность терминов и соответствие материала digital-тематике.