На сайте услуг изображения обычно занимают 50-80% веса страницы, поэтому именно они чаще всего тормозят первый экран. При этом правильно подписанные фото приносят отдельный трафик из поиска по картинкам Яндекса и Google - особенно в нишах, где клиент выбирает глазами.
Ниже - 7 правил, которые закрывают обе задачи: сайт быстрый, а изображения понятны поисковику. Их можно отдать разработчику и контент-менеджеру как чек-лист.
I. Как картинки влияют на SEO
Влияние идёт по трём линиям. Первая - скорость: тяжёлое фото на первом экране ухудшает LCP, и часть мобильных посетителей уходит до загрузки. Вторая - понимание страницы: подпись, alt и окружающий текст подтверждают поисковику, о чём страница. Третья - прямой трафик: в поиске по картинкам человек видит ваше фото и переходит на сайт.
Картинки не заменяют текст. Страница из одних фото без описаний для поиска почти пустая, даже если выглядит как премиальный журнал. Лучший результат дают фото, встроенные в полезный текст: работа мастера рядом с описанием услуги, схема рядом с объяснением.
Проще всего увидеть проблему на мобильном. Откройте страницу услуги через 4G и засеките, сколько секунд вместо фото висит пустой прямоугольник. Если больше 2-3 секунд, часть посетителей с рекламы уходит до того, как увидит работу. Для ниш, где продаёт картинка, это прямые потери заявок, а не абстрактная техническая оценка.
Отдельная история - галереи портфолио на 50-100 фото. Если все они грузятся разом в исходном размере, страница может весить десятки мегабайт. Поисковик такую страницу обработает, но человек с телефона её не дождётся.
II. Форматы и вес: таблица
| Формат | Когда использовать | Типичный вес фото 1600 px | Комментарий |
|---|---|---|---|
| JPEG | Запасной вариант для старых браузеров | 300-600 КБ | Устаревает, но полезен как fallback |
| WebP | Основной формат для фото и иллюстраций | 100-250 КБ | Поддерживают все современные браузеры |
| AVIF | Крупные фото, где важен минимальный вес | 70-180 КБ | Сжимает сильнее, дольше кодируется |
| PNG | Скриншоты интерфейсов, прозрачность | от 500 КБ | Для фото избыточен |
| SVG | Логотипы, иконки, простая графика | 1-20 КБ | Масштабируется без потери качества |
Цифры ориентировочные и зависят от сюжета: фото с мелкими деталями (волосы, ткань, листва) весит больше, чем фото интерьера с ровными стенами. Разумная цель для страницы услуг - общий вес изображений первого экрана до 200-300 КБ.
III. 7 правил подготовки изображений
- WebP или AVIF по умолчанию. Через тег picture отдавайте современный формат и JPEG как запасной.
- Размер под место на экране. Не загружайте фото 4000 px в карточку шириной 400 px. Готовьте 2-3 версии и отдавайте их через srcset.
- Явные width и height. Браузер резервирует место заранее, и вёрстка не прыгает при загрузке - это метрика CLS.
- Lazy-load ниже первого экрана. Атрибут loading="lazy" для галерей и портфолио, но не для главного фото hero.
- Понятные имена файлов. okrashivanie-airtouch-blond.webp вместо IMG_4583.webp. Латиница, дефисы, без пробелов.
- Содержательный alt. Коротко описывает, что на фото, в контексте страницы. Подробнее - в следующем разделе.
- Картинки в карте сайта и разметке. Главное изображение статьи - в JSON-LD и в теге og:image, чтобы ссылка красиво выглядела в мессенджерах.
Быстрая самопроверка: откройте страницу в браузере, панель разработчика, вкладку «Сеть», фильтр «Изображения». Если отдельные файлы весят больше 500 КБ, это первое, что стоит пережать.
Порядок внедрения на готовом сайте обычно такой: сначала пережать и перевести в WebP 10-20 самых посещаемых страниц по Метрике, затем прописать размеры и lazy-load в шаблоне, и только потом переименовывать файлы и переписывать alt. Переименование меняет адреса картинок, поэтому его лучше делать один раз и вместе с обновлением карты сайта, чтобы поисковик не потерял уже проиндексированные изображения.
IV. Как писать alt без спама
Alt нужен в первую очередь людям с программами экранного доступа и на случай, когда картинка не загрузилась. Поисковик использует его как подсказку, но спам ключами распознаёт легко.
- Хорошо: «Окрашивание airtouch на длинных тёмных волосах, результат после 5 часов работы».
- Плохо: «окрашивание москва окрашивание цена окрашивание airtouch недорого».
- Плохо: «фото1», «картинка», пустой alt у содержательного изображения.
- Нормально: пустой alt="" у чисто декоративных элементов - фоновых текстур, разделителей.
Ориентир по длине - до 100-125 символов. Одинаковый alt на 30 фото галереи не помогает никому: лучше коротко описать разницу между работами.
V. Трафик из поиска по картинкам
Поиск по изображениям особенно полезен нишам, где выбор визуальный: окрашивание волос, интерьеры, мебель, одежда, мероприятия. Человек ищет «пепельный блонд на короткие волосы», листает фото и переходит к тому, чья работа понравилась.
Хороший пример - сайт салона сложного окрашивания ayvazzovsky.com: портфолио, много видео работ мастеров, команда и онлайн-запись на два адреса. Для такой ниши фото и видео работ - главный аргумент, поэтому важно, чтобы у каждой работы было осмысленное описание, а тяжёлые медиа не тормозили страницу записи. Другой пример визуальной витрины - проект для магазина кроссовок Monkey Market с каталогом, трендами и заказом в Telegram.
Чтобы фото вообще попали в поиск по картинкам, нужны уникальные собственные снимки, открытая для индексации папка с изображениями в robots.txt и текст рядом с фото. Результат приходит постепенно, обычно за несколько недель после индексации страниц, и гарантировать его объём нельзя.
Для визуальных ниш полезно также добавлять к фото короткие подписи под изображением: техника, срок работы, материал. Подпись читают и люди, и поисковик, а в поиске по картинкам она помогает показать фото по уточняющим запросам.
VI. Ошибки, права и риски
Фото из поиска и чужих сайтов нельзя просто взять и поставить: у изображений есть правообладатель, и претензии за нарушение исключительных прав реальны. Используйте свои снимки, фото с лицензией или бесплатные стоки с разрешением на коммерческое использование. Для фото клиентов нужно их согласие.
- стоковые фото, которые уже стоят на сотнях сайтов: поиску нечего показывать нового, а клиенту нечему верить;
- текст услуг и цены, вшитые в картинку баннера: поисковик их не прочитает;
- закрытая в robots.txt папка /images/ или /uploads/;
- слишком сильное сжатие, из-за которого портфолио выглядит дёшево и работает против премиального позиционирования.
Ещё одна частая ошибка - загрузка фото через конструктор, который сам не пережимает изображения и не создаёт версий под разные экраны. Владелец загружает снимки прямо с камеры по 5-10 МБ, и никакие настройки шаблона уже не спасают. В таком случае либо фото готовят вручную перед загрузкой, либо сайт переносят на сборку, где оптимизация встроена.
VII. Итог и примеры
Минимальный набор: WebP, размеры под место на экране, width и height, lazy-load ниже первого экрана, понятные имена и честный alt. Это несколько часов работы на готовом сайте и заметный выигрыш в скорости.
В студии разработка сайтов и SEO изображения готовятся при сборке автоматически: сайт на React от 80 000 ₽ за 1-2 недели от материалов, перенос с конструктора от 80 000 ₽. Статьи с иллюстрациями под запросы - от 500 ₽ за статью, 200 статей в месяц - 100 000 ₽. А если сайт уже быстрый и нужен поток обращений, есть лиды с оплатой за результат.
Наши работы
Сайты, которые студия уже запустила
Четыре проекта N3MIROFF, которые можно открыть прямо сейчас и посмотреть, как они работают.
Агротех с ИИ
SkyFarm ↗
Редизайн сайта систем выращивания: первый экран с контейнерной фермой, схема работы из трёх шагов, карусель продуктов и экран приложения.
Сайт салона
ayvazzovsky.com ↗
Салон сложного окрашивания в Москве: онлайн-запись, видео работ, портфолио и команда. Переехал с Тильды на свой хостинг.
Онлайн-академия
ayvazzovsky.academy ↗
Видеоуроки колористики: каталог, посадочные страницы уроков, личный кабинет и промокоды.
Event-агентство
navsegda-event.ru ↗
НАВСЕГДА: корпоративы и конференции - услуги, кейсы, этапы работы и расчёт мероприятия.
Витрина магазина
Monkey Market ↗
Премиальная витрина магазина кроссовок с заказом в Telegram.
Услуги студии по теме: разработка сайтов под ключ и SEO-продвижение статьями.
Фото красивые, а сайт медленный?
Соберём сайт, где портфолио и видео работают на заявку, а не тормозят первый экран.
Частые вопросы
Какой формат картинок лучше для SEO?
WebP как основной и JPEG как запасной. WebP обычно легче JPEG на 25-50% при том же качестве, AVIF сжимает ещё сильнее.
Сколько должна весить картинка на сайте?
Фото для карточки или статьи обычно укладывается в 100-250 КБ в WebP. Всё первое экранное - ориентир до 200-300 КБ суммарно.
Нужно ли писать ключевые слова в alt?
Только если они естественно описывают изображение. Перечисление запросов через пробел похоже на спам и не помогает.
Можно ли брать фото с других сайтов?
Нет, без разрешения правообладателя это нарушение прав. Используйте свои снимки или стоки с коммерческой лицензией.
Когда картинки начнут приносить трафик из поиска?
Обычно через 2-6 недель после индексации страниц, если фото уникальные и сопровождаются текстом. Объём трафика гарантировать нельзя.
Проверим изображения на вашем сайте
Оставьте адрес - найдём самые тяжёлые файлы и ошибки в alt и скажем, что исправить.
Получить целевые заявки → Telegram