Оптимизация изображений — важный элемент SEO, который помогает повысить видимость сайта в поисковых системах, ускоряет загрузку страниц и улучшает пользовательский опыт. Ниже — пошаговое руководство, охватывающее все ключевые аспекты.
1. Выбирайте правильный формат изображения
- JPEG — хорош для фотографий: небольшие размеры при приемлемом качестве.
- PNG — используется для изображений с прозрачным фоном и графики с четкими линиями.
- WebP — современный формат с лучшим сжатием без потери качества.
- SVG — идеален для логотипов и иконок: масштабируется без потери качества.
2. Сжимайте изображения без потери качества
Слишком "тяжелые" изображения замедляют сайт. Используйте инструменты:
Цель — добиться компромисса между качеством и скоростью загрузки.
3. Используйте дескриптивные имена файлов
Избегайте названий вроде IMG_1234.jpg. Вместо этого:
- Правильно: optimizaciya-izobrazheniy-dlya-seo.jpg
- Неверно: foto1.png
Имена файлов помогают поисковым системам лучше понимать содержание изображения.
4. Прописывайте ALT-тексты
Атрибут alt:
- Помогает поисковикам индексировать изображения.
- Обеспечивает доступность для пользователей с ограничениями зрения.
- Показывается при ошибке загрузки картинки.
Пример:
<img src="seo-infografika.jpg" alt="Инфографика с советами по SEO для изображений">
5. Добавляйте подписи и текст рядом с изображениями
Подписи и текст вокруг изображения дают поисковым алгоритмам контекст. Даже пара слов под фото может повысить его релевантность.
6. Используйте структурированные данные (schema.org)
Если вы размещаете:
- товары,
- рецепты,
- события и т. д., структурированные данные помогут отображать изображения в расширенных результатах (rich snippets).
Пример (JSON-LD):
{ "@context": "https://schema.org", "@type": "Product", "name": "Футболка с логотипом", "image": "https://example.com/futbolka.jpg", "description": "Черная футболка с логотипом компании", "brand": "ExampleBrand" }
7. Загружайте изображения через CDN
Content Delivery Network сокращает время загрузки, особенно для пользователей из других регионов. Примеры:
- Cloudflare
- Amazon CloudFront
- BunnyCDN
8. Настройте lazy loading
Позволяет загружать изображения только тогда, когда пользователь прокручивает к ним страницу.
Пример:
<img src="foto.jpg" loading="lazy" alt="Описание изображения">
9. Убедитесь, что изображения адаптивные
Используйте srcset и sizes, чтобы показывать изображения подходящего размера на разных устройствах:
<img
src="image-640.jpg"
srcset="image-1280.jpg 2x, image-640.jpg 1x"
sizes="(max-width: 600px) 480px, 800px"
alt="Мобильная версия сайта">
10. Создайте карту изображений (Image Sitemap)
Если изображения важны (например, вы владелец фотобанка или интернет-магазина), создайте image-sitemap.xml и укажите его в robots.txt или в Google Search Console.
Вывод
Оптимизация изображений — это не только про скорость загрузки, но и про SEO-видимость. Каждая мелочь — от названия файла до структуры данных — влияет на то, попадет ли картинка в поиск Google Images, загрузится ли быстро и будет ли доступна для всех пользователей.
Полезные ссылки
Канал в телеграмм — https://t.me/+-BsUnghNcJ81OGYy
Наш канал на Youtube — https://youtube.com/@traff058
Telegram Паблик — https://t.me/+R2NG4GVGqS4yOTky
Паблик в VK — https://vk.com/traff_agency
Инстаграм TRAFF — https://www.instagram.com/traff_agency
Блог на vc.ru — https://vc.ru/u/2452449-studiya-razrabotki-saitov-traff
Сервисы, которыми пользуемся мы: хостинг Beget — https://beget.com/p1898855
