SEO для изображений: Полное руководство для лучших позиций [2026]

Почему SEO изображений важно

Изображения часто составляют более 50% объёма данных сайта — и при этом остаются одним из самых недооценённых факторов SEO. Между тем, оптимизированные изображения могут обеспечить видимость вашего сайта в Google Картинках, кардинально улучшить скорость загрузки и положительно повлиять на показатели Core Web Vitals.

Согласно исследованиям, поиск по картинкам Google генерирует до 22% всего органического трафика. Если ваши изображения не появляются там, вы теряете почти четверть потенциального трафика. В то же время неоптимизированные изображения — самая распространённая причина медленных сайтов, а скорость загрузки с 2021 года является официальным фактором ранжирования Google.

В GoldenWing мы оптимизируем каждое изображение как часть нашего процесса веб-дизайна. В этом руководстве мы покажем, как сделать то же самое для вашего сайта.

Alt-текст: ключевой элемент SEO изображений

Alt-текст (альтернативный текст) — это центральный элемент SEO изображений. Он описывает содержимое изображения для поисковых систем и программ чтения с экрана. Хотя Google всё лучше «видит» изображения, он по-прежнему во многом опирается на alt-текст для понимания контекста картинки.

Как писать хорошие alt-тексты

• Описывайте то, что видно на изображении: «Команда веб-дизайнеров обсуждает концепцию у доски» вместо «Картинка 1» или «DSC_0042.jpg».
• Естественно интегрируйте ключевые слова: Если изображение соответствует вашей теме, используйте фокусное ключевое слово. Но не форсируйте — «веб-дизайн Вена агентство веб-дизайна Вена дёшево» — это переспам ключевыми словами, который навредит вашему ранжированию.
• Не превышайте 125 символов: Программы чтения с экрана обрезают более длинные тексты. Краткость лучше многословности.
• Избегайте «изображение» или «фото»: Google и скринридеры уже знают, что это картинка. Начинайте сразу с описания.
• Каждое изображение требует уникального alt-текста: Никогда не копируйте один и тот же alt-текст для разных изображений.

Примеры alt-текстов

• Плохо: «картинка» / «фото» / «IMG_2847.jpg» / пусто
• Средне: «Проект веб-дизайна»
• Хорошо: «Адаптивный дизайн сайта для венской юридической фирмы на десктопе и смартфоне»
• Слишком длинно: «Профессиональный адаптивный проект веб-дизайна который мы создали для известной венской юридической фирмы в 1-м районе показывающий десктопную и мобильную версию главной страницы»

Форматы изображений: WebP, AVIF, JPEG или PNG?

Выбор правильного формата изображения оказывает огромное влияние на скорость загрузки вашего сайта. Вот сравнение:

WebP — актуальный стандарт

WebP обеспечивает на 25-35% меньший размер файлов, чем JPEG при сопоставимом качестве. Поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge) и поддерживает как сжатие с потерями, так и без потерь, а также прозрачность. Для большинства сайтов WebP — оптимальный формат.

AVIF — будущее

AVIF сжимает ещё лучше, чем WebP — до 50% меньше, чем JPEG. Поддержка браузерами постоянно растёт, но пока не является универсальной. Мы рекомендуем AVIF как основной формат с WebP в качестве запасного варианта.

JPEG — классика

JPEG по-прежнему подходит для фотографий, когда WebP или AVIF не являются вариантом. Уровень качества должен составлять 75-85% — ниже становятся видны артефакты, выше файл становится неоправданно большим.

PNG — только для прозрачности и графики

Файлы PNG значительно больше, чем WebP/JPEG, и должны использоваться только для логотипов, иконок и графики с прозрачностью. Для фотографий PNG никогда не является правильным выбором.

SVG — для векторной графики

SVG идеально подходит для логотипов, иконок и простых иллюстраций. Файлы SVG чрезвычайно малы, масштабируются без потерь до любого размера и даже могут быть анимированы.

Сжатие изображений: правильный баланс

Слишком большие изображения — самая частая причина медленных сайтов. Вот основные правила:

• Максимальный размер файла: Ни один файл изображения на вашем сайте не должен превышать 200 КБ. Hero-изображения могут быть до 300 КБ, но не больше.
• Подгоняйте разрешение под размер отображения: Изображение, отображаемое шириной 800px на сайте, не нужно сохранять в 4000px. Сохраняйте изображения в размере, в котором они фактически отображаются (плюс 2x для Retina-дисплеев).
• Инструменты сжатия: Squoosh (бесплатный, от Google), TinyPNG, ShortPixel или ImageOptim (Mac). В GoldenWing мы используем автоматизированные пайплайны сборки, которые сжимают каждое изображение при деплое.

Адаптивные изображения с srcset

Современные сайты отдают разные размеры изображений в зависимости от устройства. HTML-атрибут srcset позволяет браузеру загружать оптимальный размер:

• Мобильные: ширина 400px
• Планшеты: ширина 800px
• Десктоп: ширина 1200px
• Retina: двойное разрешение

Next.js (фреймворк, который мы используем в GoldenWing) автоматически генерирует эти варианты через компонент next/image.

Имена файлов: недооценённый SEO-фактор

Имя файла — первое, что Google узнаёт об изображении. Оно должно быть описательным и релевантным по ключевым словам:

• Плохо: IMG_2847.jpg, image1.png, screenshot-2026-04-08.webp
• Хорошо: web-design-vienna-responsive-layout.webp, seo-audit-results-dashboard.webp

Правила именования файлов

1. Дефисы вместо подчёркиваний: Google воспринимает дефисы как разделители слов, а подчёркивания — нет. web-design-vienna.webp лучше, чем web_design_vienna.webp.
2. Только строчные буквы: Избегайте заглавных букв и специальных символов.
3. Без спецсимволов: Используйте только стандартные ASCII-символы.
4. Включайте ключевые слова: Если изображение показывает проект веб-дизайна, «web-design» должен присутствовать в имени файла.

Lazy Loading: загружайте изображения только при необходимости

Lazy loading — это техника, при которой изображения загружаются только когда пользователь прокручивает страницу до них. Это значительно улучшает начальное время загрузки, потому что изображения «ниже сгиба» не нужно загружать сразу.

• Нативный Lazy Loading: HTML-атрибут loading="lazy" поддерживается всеми современными браузерами. Просто добавьте его к тегу <img> — готово.
• Не применяйте lazy loading к hero-изображениям: Главное изображение выше сгиба должно загружаться немедленно. Используйте loading="eager" или не указывайте атрибут loading для первого видимого изображения.
• Используйте плейсхолдеры: Показывайте размытый плейсхолдер (blur-up) или цветной фон, пока изображение загружается. Это предотвращает сдвиги макета (CLS).

Карты сайта для изображений и структурированные данные

Карта сайта для изображений

Карта сайта для изображений явно сообщает Google, какие изображения существуют на вашем сайте. Это особенно важно, когда изображения встроены через JavaScript или lazy loading, и Google может не найти их при обычном краулинге.

Вы можете интегрировать изображения в существующую XML-карту сайта или создать отдельную. Google рекомендует интеграцию в основную карту сайта.

Структурированные данные для изображений

С помощью схемы ImageObject вы можете предоставить Google дополнительную информацию об изображениях — автора, лицензию и описание. Это особенно актуально для рецептов, товаров и новостных статей, где изображения отображаются на видном месте в результатах поиска.

Core Web Vitals и изображения

Изображения напрямую влияют на три важнейшие метрики производительности:

LCP (Largest Contentful Paint)

Самый большой видимый элемент страницы часто является изображением. Если оно слишком велико или загружается слишком долго, ваш показатель LCP ухудшается. Решение: предзагружайте hero-изображения с помощью <link rel="preload">, используйте правильный формат (WebP/AVIF) и держите размер файла ниже 200 КБ.

CLS (Cumulative Layout Shift)

Когда у изображений нет определённых атрибутов ширины и высоты, макет «прыгает» при загрузке. Это приводит к плохому показателю CLS. Решение: указывайте каждому тегу <img> явные атрибуты width и height или используйте CSS aspect-ratio.

INP (Interaction to Next Paint)

Слишком большое количество или размер изображений может блокировать основной поток и ухудшать интерактивность. Lazy loading и эффективное сжатие помогают здесь.

Чек-лист SEO изображений

Вот основные пункты в кратком изложении:

1. Alt-текст: Каждое изображение имеет описательный, уникальный alt-текст с естественной интеграцией ключевых слов
2. Формат: WebP как стандарт, AVIF где возможно, PNG только для прозрачности
3. Сжатие: Ни один файл не больше 200 КБ, качество 75-85%
4. Имя файла: Описательное, с дефисами, строчными буквами, без спецсимволов
5. Адаптивность: srcset для разных размеров экрана
6. Lazy loading: Все изображения кроме hero загружать лениво
7. Размеры: Всегда указывать ширину и высоту (предотвращает CLS)
8. Предзагрузка: Hero-изображение предзагружать через rel="preload"
9. Карта сайта: Включить изображения в XML-карту сайта
10. CDN: Раздавать изображения через сеть доставки контента

Заключение: SEO изображений — не роскошь, а необходимость

Оптимизированные изображения делают ваш сайт быстрее, улучшают пользовательский опыт и приносят дополнительный трафик через Google Картинки. Хорошая новость: большинство оптимизаций нужно настроить лишь один раз, после чего они работают автоматически.

В GoldenWing SEO изображений — неотъемлемая часть каждого проекта по созданию сайта. Мы используем автоматическую конвертацию в WebP, интеллектуальный lazy loading и оптимизированные пайплайны обработки изображений, чтобы ваш сайт идеально работал с первого дня.

Хотите проверить свой существующий сайт на предмет SEO изображений? Свяжитесь с нами для бесплатного первичного анализа.