🎧 Прослушать аудио
Подкаст: Оптимизация изображений для сайтов
Оптимизация изображений для сайта — это не только сжатие файлов. Это работа с форматом, размером, весом, alt-текстом, адаптивностью, индексацией и влиянием картинок на скорость загрузки страницы.
Если картинки загружены “как получилось”, сайт может выглядеть нормально, но проигрывать конкурентам по скорости, мобильному удобству, Core Web Vitals и трафику из Google Images и Яндекс Картинок.
меньше отказов, быстрее первый экран, выше шанс заявки
понятные alt, имена файлов, контекст, индексация
структурированные ответы, примеры, чек-листы и ясные определения
Короткий ответ: что входит в оптимизацию изображений
В норме изображение должно быть релевантным странице, иметь подходящий формат, не быть тяжелее нужного, быстро загружаться на мобильных устройствах и иметь понятное текстовое описание для поисковых систем и пользователей с экранными дикторами.
Минимальный стандарт: WebP или AVIF с fallback при необходимости, корректный размер под блок, width и height, alt без переспама, понятное имя файла, lazy loading для изображений ниже первого экрана, отдельный контроль LCP-изображения.
Почему изображения влияют не только на SEO, но и на заявки
Картинка на сайте одновременно влияет на восприятие, скорость, доверие и понимание предложения. Проблема начинается тогда, когда визуал красивый, но технически неподготовленный.
Скорость
Тяжелые изображения увеличивают время загрузки. На мобильном трафике это особенно заметно: пользователь может закрыть страницу до того, как увидит предложение.
Понимание страницы
Поисковик анализирует не только файл, но и окружающий текст, подпись, alt, имя файла и общий контекст страницы.
Доверие
Оригинальные фото работ, товаров, процесса, команды и результатов обычно сильнее стоковых картинок. Но их тоже нужно готовить к публикации.
Если вы продвигаете сайт комплексно, изображения нужно проверять вместе с техническим SEO, контентом и конверсией. Для общей диагностики можно использовать SEO-продвижение сайта как услугу, где изображения входят в более широкий контур внутренней оптимизации.
Что проверять первым: приоритеты вместо хаотичной оптимизации
Не все картинки одинаково важны. Если начать с иконок в футере, а тяжелый баннер на первом экране оставить без изменений, видимого эффекта может не быть.
| Приоритет | Что проверить | Почему важно | Что должно быть в норме |
|---|---|---|---|
| 1 | Изображение первого экрана | Часто влияет на LCP и первое впечатление | Не lazy, оптимальный вес, правильный размер, можно fetchpriority=»high» |
| 2 | Картинки в карточках товаров или услуг | Влияют на выбор, доверие и коммерческие факторы | Единый размер, понятные alt, не размыты, не весят мегабайты |
| 3 | Изображения в статьях | Помогают раскрыть интент и получить трафик из поиска по картинкам | Есть подписи, alt, связь с абзацем, нормальный размер |
| 4 | Служебные иконки | Могут создавать мусор в медиабиблиотеке и индексе | SVG или легкий PNG, декоративные элементы с пустым alt |
Форматы изображений: JPEG, PNG, WebP, AVIF, SVG и GIF
Формат выбирают не по привычке, а по задаче. Фотографии, схемы, иконки, скриншоты и анимации требуют разных решений.
| Формат | Когда использовать | Сильная сторона | Риск |
|---|---|---|---|
| JPEG | Фото, фоновые изображения, баннеры | Широкая поддержка и хороший баланс качества | Нет прозрачности, при сильном сжатии появляются артефакты |
| PNG | Скриншоты, интерфейсы, графика с прозрачностью | Четкость линий и отсутствие потерь | Для фото часто слишком тяжелый |
| WebP | Большинство изображений на современных сайтах | Хорошее сжатие, поддержка прозрачности | Нужен контроль fallback для старых окружений |
| AVIF | Фото и баннеры, где важен минимальный вес | Очень эффективное сжатие | Нужно тестировать качество и поддержку |
| SVG | Логотипы, иконки, простые схемы | Масштабируется без потери качества | Не подходит для фотографий, требует аккуратности с безопасностью |
| GIF | Только простые анимации, если без них нельзя | Простая совместимость | Часто тяжелее, чем видео или WebP-анимация |
Размер, вес и LCP: где чаще всего теряются скорость и конверсия
Главная ошибка — загружать изображение 4000×3000 пикселей в блок, где оно показывается как 600×450. Пользователь скачивает лишние пиксели, а сайт получает лишнюю нагрузку.
Что должно быть в норме
- размер файла соответствует реальному размеру блока на странице;
- для первого экрана нет loading=»lazy»;
- у изображения указаны width и height, чтобы не было сдвига макета;
- для разных экранов подключены srcset и sizes;
- изображения ниже первого экрана загружаются лениво.
Пример для изображения первого экрана
<img class="hero-image"
src="seo-audit-dashboard-1200.webp"
srcset="seo-audit-dashboard-640.webp 640w, seo-audit-dashboard-1200.webp 1200w"
sizes="(max-width: 768px) 100vw, 1200px"
alt="пример SEO-аудита сайта с проверкой скорости и изображений"
width="1200"
height="675"
fetchpriority="high">Для мобильной версии важно не прятать ценные изображения и не менять их на случайные заглушки. Если тема шире мобильной адаптации, полезно отдельно проверить viewport и мобильную адаптацию.
Alt, title, имя файла и подпись: как описывать изображение без переспама
Alt должен описывать, что изображено на картинке и как это связано со страницей. Это не место для набора ключевых слов.
Плохой вариант
alt=»SEO продвижение сайт купить SEO раскрутка продвижение Яндекс Google»
Проблема: переспам, нет описания сцены, плохо для пользователя и поисковика.
Хороший вариант
alt=»таблица SEO-аудита с ошибками изображений, скоростью загрузки и рекомендациями»
Плюс: понятно, что на изображении и зачем оно вставлено в статью.
Имя файла
Используйте латиницу, нижний регистр и дефисы: seo-audit-images-report.webp вместо IMG_8847.jpg.
Alt
Краткое описание изображения в контексте страницы. Для декоративных иконок допустим пустой alt=»».
Title
Всплывающая подсказка. Может дополнять alt, но не должна копировать его слово в слово.
Подпись
Помогает связать картинку с абзацем и объяснить, почему она важна для читателя.
Отдельный разбор по этой теме есть в материале про атрибуты Alt изображений для SEO.
Адаптивные изображения: srcset, sizes и picture
Адаптивное изображение позволяет браузеру выбрать версию файла под экран пользователя. Это особенно важно, когда на десктопе нужен крупный баннер, а на телефоне достаточно облегченной версии.
640w
920w
1200–1600w
Пример picture с WebP и JPEG fallback
<picture>
<source srcset="image-640.webp 640w, image-1200.webp 1200w" type="image/webp">
<img src="image-1200.jpg"
alt="описание изображения в контексте страницы"
width="1200"
height="675"
loading="lazy">
</picture>Микроразметка, image sitemap и индексация картинок
Микроразметка не заменяет нормальный alt, текст вокруг изображения и скорость сайта. Но она помогает структурировать данные, особенно на страницах товаров, услуг, рецептов, инструкций, кейсов и медиа-контента.
Что проверить
- картинки доступны поисковому роботу и не закрыты robots.txt;
- важные изображения находятся в HTML, а не только в CSS background;
- в sitemap передаются страницы, где размещены изображения;
- на товарных страницах изображение связано с Product-разметкой;
- для авторских изображений понятно, кому принадлежат права.
Если на сайте есть PDF-каталоги, инструкции или прайсы с изображениями, стоит отдельно проверить и документы. Для этого подойдет материал про SEO для PDF-файлов.
Как проверить изображения на сайте: практический порядок
Проверку лучше делать не вручную по одной картинке, а через связку инструментов. Так вы увидите не только вес файла, но и влияние на страницу.
- Screaming Frog или аналогичный краулер: выгрузить все изображения, найти пустые alt, тяжелые файлы, битые URL.
- PageSpeed Insights или Lighthouse: проверить LCP, CLS, lazy loading, современные форматы, размеры.
- Google Search Console: посмотреть страницы с низкими Core Web Vitals и динамику в поиске по изображениям.
- Яндекс Вебмастер и Метрика: проверить индексацию, скорость, отказы, поведение на важных страницах.
- Ручной просмотр мобильной версии: убедиться, что изображения не обрезают смысл и не создают горизонтальный скролл.
Красные флаги: когда оптимизация изображений сделана плохо
Файлы по 1–5 МБ
Особенно опасно для первого экрана, каталога и страниц с большим количеством фото.
Одинаковые alt на всех картинках
Это выглядит как шаблонная SEO-накрутка и не помогает понять конкретное изображение.
Lazy loading на hero-изображении
Первый экран должен загружаться быстро, а не ждать, пока скрипт решит подгрузить главное изображение.
Картинки только через background
Для декоративного фона это нормально, но важные изображения лучше размещать как img или picture.
Что спросить у подрядчика перед оптимизацией
Честный блок: проблема может быть не только в картинках
Оптимизация изображений может ускорить сайт и улучшить техническое качество страницы, но она не обязана сама по себе увеличить продажи. Если продукт слабый, цена неконкурентна, оффер непонятен, отдел продаж плохо обрабатывает заявки или сезонность падает, одни картинки проблему не решат.
Правильный подход — смотреть связку: скорость сайта, релевантность страницы, доверие, оффер, форма заявки, аналитика, качество трафика и обработка обращений. Тогда оптимизация изображений становится частью системы, а не отдельной “галочкой”.
Итоговый чек-лист оптимизации изображений
Перед загрузкой
- выбран формат под задачу;
- файл уменьшен до нужных пикселей;
- сжатие не испортило качество;
- имя файла написано латиницей;
- подготовлены версии для разных экранов.
После загрузки
- заполнен alt;
- при необходимости добавлен title;
- указаны width и height;
- для нижних изображений включен lazy loading;
- главное изображение не отложено.
После публикации
- страница проверена на мобильном;
- нет горизонтального скролла;
- PageSpeed не ругается на тяжелые изображения;
- картинки доступны роботам;
- аналитика показывает, что страница не просела по поведению.
Что делать дальше
Начните не с массовой переделки всей медиабиблиотеки, а с проверки 10–20 страниц, которые дают или должны давать заявки: главная, услуги, категории, карточки товаров, сильные статьи и кейсы.
Если нужно понять, где сайт теряет скорость, индексацию и конверсию, можно заказать разбор: какие изображения исправлять первыми, какие alt переписать, где нужен WebP/AVIF, а где проблема вообще не в картинках.
