SEO-оптимизация изображений: форматы, размеры и атрибуты Alt

Изображения — это один из самых распространенных и в то же время самых игнорируемых элементов SEO-оптимизации. Правильно оптимизированная графика не только улучшает ранжирование в Google Images и Яндексе, но и критически важна для скорости загрузки сайта, что напрямую влияет на поведенческие факторы и конверсию.

1. Выбор правильного формата для изображений (JPEG vs PNG vs WebP)

Выбор формата напрямую влияет на качество и размер файла. Неправильный выбор может увеличить время загрузки на несколько секунд. Подходящие форматы для иллюстраций: JPEG/JPG, PNG, SVG, WebP.

Формат	Для чего использовать?	Особенности
WebP	Универсальный стандарт (Google любит его)	Весит на 30% меньше аналогов без потери качества. Поддерживается всеми браузерами.
JPEG / JPG	Фотографии, сложные градиенты	Хорошо сжимает фото, но не поддерживает прозрачность.
PNG	Изображения с прозрачным фоном, скриншоты	Высокое качество, но большой вес файла. Не используйте для обычных фото!
SVG	Иконки, логотипы, векторная графика	Бесконечно масштабируется без пикселей. Идеально для Retina-экранов.

2. Размеры и Сжатие (Технический SEO)

Самая частая ошибка — загрузка 5-мегабайтной фотографии, сделанной на профессиональную камеру, прямо на сайт. Это убивает скорость.

Сжатие:

Используйте онлайн-сервисы (например, TinyPNG, Compressor.io) или плагины для CMS (например, Imagify, Smush) для оптимизации размера файла без видимой потери качества.

Размеры (Dimension)

Используйте изображения нужного размера. Если на сайте картинка отображается в виде превью 300x300 пикселей, нет смысла загружать файл 3000x3000.
Обязательно указывайте размеры в коде. Добавление атрибутов width и height в тег <img> помогает браузеру быстрее скомпоновать страницу и избежать ошибок сдвига макета (CLS — Core Web Vitals). Пример кода HTML:
‍<img src="photo.webp" alt="Описание фото" width="800" height="600">

3. Атрибут Alt (Альтернативный текст)

Атрибут alt (альтернативный текст) — это описание содержимого изображения. Он выполняет три ключевые функции:

Помощь поисковым системам: Робот не видит изображение, он читает alt. Это помогает ему понять, о чем картинка, и проиндексировать ее в поиске по картинкам.
Доступность (Accessibility): Текст читается программами для слепых и слабовидящих пользователей.
Замена при ошибке: Если изображение не загрузилось, пользователь увидит текст alt вместо пустого места.

Правила составления Alt-текста:

Будьте описательными: Текст должен точно описывать, что изображено.
Используйте ключевое слово: Если это логично, включите основное ключевое слово страницы.
Не спамьте: Избегайте перечисления ключевых слов через запятую. Текст должен читаться как осмысленное предложение.

Примеры:

Что на картинке	❌ Плохой Alt	✅ Хороший SEO Alt
Фото ноутбука с кодом	`IMG_2026.jpg` или пустой	Разработка сайта на Webflow с чистым кодом
Красные кроссовки Nike	обувь, кроссовки, купить	Красные беговые кроссовки Nike Air Max для марафона
График роста продаж	график 1	График роста ROI маркетинга после настройки сквозной аналитики

Вывод: Оптимизация изображений — это один из самых простых способов улучшить технический SEO и пользовательский опыт. Сосредоточьтесь на внедрении формата WebP для растровых изображений и SVG для векторной графики, используйте сжатие для уменьшения размера файлов и всегда прописывайте описательный и релевантный Alt-текст.

‍