Краткий вывод
Что важно понять до чтения деталей
- Фотография должна раскрывать тему, а не заполнять место.
- Alt описывает конкретный кадр естественным языком.
- Размеры изображения задают заранее.
- Первый кадр и изображения ниже загружают по-разному.
01
Изображение должно отвечать на вопрос читателя
В статье полезны не случайные офисные кадры, а изображения, которые показывают объект, этап работы, интерфейс, специалиста или ситуацию выбора. На коммерческой странице фотография может подтверждать продукт, команду, процесс или результат. Визуал должен продолжать соседний текст, а не просто заполнять пустое место.
Обычно материалу достаточно сильной обложки и нескольких изображений в ключевых местах. Количество зависит от длины и темы: инструкция может требовать больше шагов, аналитическая статья - меньше, но точнее. Повтор одного и того же кадра в разных разделах снижает доверие и не помогает пониманию.
02
Как писать alt
Alt описывает смысл изображения для человека, который его не видит, и помогает поисковику понять предмет кадра. Пишите коротко и конкретно: кто или что изображено и зачем это важно в контексте раздела. Не начинайте каждый alt словами «картинка» и не перечисляйте ключи в разных формах.
Для чисто декоративного изображения допустим пустой alt. Для фотографии процесса опишите сам процесс, для товара - отличимый объект, для схемы - главный вывод. Google рекомендует полезный контекстный alt и предупреждает о keyword stuffing.
03
Форматы, размеры и responsive images
Используйте подходящий формат: JPEG или WebP/AVIF для фотографий, PNG для случаев, где нужна прозрачность или без потерь, SVG для простых векторных объектов. Исходник не должен быть значительно больше фактического отображения на странице. Сжимайте файл с контролем качества, а не до заметных артефактов.
Для разных экранов применяйте srcset и sizes или picture, сохраняя обычный src как запасной вариант. Обязательно задавайте width и height либо aspect-ratio, чтобы браузер заранее резервировал место и не сдвигал текст при загрузке.
04
Загрузка без ущерба для первого экрана
Главное изображение первого экрана обычно загружают приоритетно, а фотографии ниже - лениво. Не ставьте lazy loading на ключевой LCP-элемент, если это задерживает его появление. Одновременно не следует загружать все изображения страницы сразу: это расходует сеть и мешает важному контенту.
Проверяйте страницу на реальном мобильном соединении. Вес одного файла ничего не говорит без общего контекста: важны число запросов, размеры вариантов, кеширование, CDN и момент загрузки. PageSpeed Insights помогает увидеть проблемные изображения, но решение должно сохранять визуальное качество.
05
Как помочь поисковику найти изображения
Google рекомендует обычные HTML-элементы img и отмечает, что фоновые CSS-изображения не индексируются как контентные. Используйте понятные имена файлов, размещайте фото рядом с релевантным текстом и указывайте изображение статьи в разметке Article и og:image.
Для крупных медиакаталогов может пригодиться image sitemap. Но сначала приведите в порядок сами страницы: качественный кадр на слабом или дублирующемся URL не получит устойчивой видимости. Контекст страницы и доступность изображения работают вместе.
Практика
Что проверить на своем сайте
- Удалите нерелевантные и повторяющиеся изображения.
- Проверьте alt у содержательных кадров.
- Сожмите фотографии без заметной потери качества.
- Добавьте width и height.
- Настройте responsive варианты.
- Проверьте LCP и загрузку на мобильном интернете.
Применить к проекту
Что можно сделать после статьи
Если тема похожа на вашу ситуацию, следующий шаг простой: проверить сайт на спрос, структуру, технические ограничения и точки, где пользователь не доходит до заявки.
Источники
Какие источники использовали
Обнаружение изображений, alt, форматы, скорость и контекст страницы.
Google Search Central: Core Web VitalsСвязь пользовательского опыта со стабильностью и скоростью страницы.
Google Search Central: полезный контентРекомендации по содержанию, которое создается для людей и дает самостоятельную пользу.
Яндекс Вебмастер: как работает поискОфициальное описание обхода, индексирования и участия страниц в поиске Яндекса.
