Вы тратите тысячи долларов на дизайн. Пишете гениальные тексты. Покупаете ссылки. А ваш сайт ползет в выдаче, как черепаха по гудрону.
Почему? Откройте инспектор кода. Скорее всего, там лежит ответ весом в 5 мегабайт.
Огромные, неоптимизированные картинки — это «холестерин» вашего сайта. Они забивают каналы, убивают скорость загрузки (Core Web Vitals) и бесят пользователей с мобильным интернетом. Google не прощает медлительности. Если страница грузится дольше 3 секунд, вы теряете 53% аудитории. Они просто закрывают вкладку.
Но скорость — это лишь половина беды. Поисковые роботы слепы. Они не видят, что на фото — котик или синхрофазотрон. Если вы не расскажете им об этом через мета-теги, вы добровольно откажетесь от 20-30% трафика из Google Images и Яндекс.Картинок.
В этой статье мы превратим ваш медиа-контент из балласта в реактивное топливо. Мы научимся сжимать файлы без «мыла» и прописывать теги так, чтобы вас полюбили поисковики.
Никакой воды. Только практика.
- Теги: Alt обязателен для индексации, Title — для пользователей. Никогда не оставляйте Alt пустым (кроме декора).
- Форматы: Забудьте про PNG для фото. Используйте WebP или JPG. Это экономит до 30% веса.
- Сжатие: Не бойтесь Lossy-сжатия (с потерями). Качество 80-85% визуально не отличить от оригинала.
- Техничка: Используйте Lazy Loading (отложенную загрузку) и транслит в именах файлов (red-car.jpg).
- Alt и Title: Битва сущностей
- Форматы: Эволюция веса
- Сжатие без боли: Диета для пикселей
- Имена файлов: Транслит или смерть
- Lazy Loading: Искусство быть ленивым
- Адаптивность: Каждому по потребностям (Srcset)
- Image Sitemap: Карта сокровищ для Google
- Частые ошибки: Где вы сливаете трафик
- Заключение: Картинка стоит тысячи слов
Alt и Title: Битва сущностей
Новички часто копируют один и тот же текст в оба поля. Или, что еще хуже, оставляют их пустыми. Для поисковика такая картинка — черная дыра.
Давайте проведем четкую границу. Это сэкономит вам часы раздумий.
1. Атрибут Alt (Альтернативный текст)
Это паспорт изображения. Роботы Яндекса и Google не обладают глазами (пока что). Они читают код. Текст в атрибуте alt говорит им: «Здесь изображен красный горный велосипед на фоне Альп».
Кроме роботов, этот текст читают скринридеры — программы для слепых людей. Если вы напишете в Alt просто «картинка 1», вы проявите неуважение к людям с ограниченными возможностями. И поисковик понизит вас за низкую доступность (Accessibility).
Как писать идеальный Alt:
1. Описывайте суть. Что реально изображено?
2. Используйте ключи. Но не спамьте.
- Плохо: «купить ноутбук ноутбук цена москва дешево» (Это спам, за это бьют).
- Хорошо: «Раскрытый ноутбук MacBook Pro 16 на деревянном столе».
2. Атрибут Title (Заголовок)
Это бейджик. Этот текст появляется, когда вы наводите курсор мыши на картинку. Он нужен не роботам, а людям. Он дает дополнительный контекст.
Главное правило: Title не влияет на SEO напрямую. Но он влияет на поведенческие факторы. Если картинка — это кнопка или сложная схема, Title объясняет, что произойдет при клике.
- Alt — обязателен. Всегда.
- Title — по желанию.
Форматы: Эволюция веса
Вы все еще сохраняете картинки в PNG? Тогда мы идем к вам. Выбор формата — это стратегическое решение. Неправильный формат может раздуть вес страницы в 10 раз на ровном месте.
JPG (Joint Photographic Experts Group)
Старый добрый стандарт.
- Когда использовать: Для фотографий с множеством цветов и градиентов.
- Минус: Не поддерживает прозрачность. При сильном сжатии появляются «артефакты» (квадратики).
PNG (Portable Network Graphics)
- Когда использовать: Только для графики с четкими границами (логотипы, иконки, чертежи) и прозрачным фоном.
- Опасность: Фотография в PNG будет весить как чугунный мост. Никогда не сохраняйте фото в PNG.
WebP и AVIF (Next-Gen Formats)
Короли современности. WebP, разработанный Google, сжимает картинки на 30% эффективнее, чем JPG, сохраняя то же качество. Поддерживает и прозрачность, и анимацию. Сегодня все современные браузеры «едят» WebP. Если вы хотите попасть в зеленую зону Google PageSpeed Insights — переводите всё в WebP. Без вариантов.
Сжатие без боли: Диета для пикселей
Представьте, что вы летите в отпуск. Вы можете набить чемодан кирпичами, а можете взять только плавки и кредитку. Вес разный, а результат (вы на море) — одинаковый.
С картинками так же. Камера вашего смартфона делает снимки в максимальном качестве. В файле хранится куча мусора: метаданные EXIF (модель камеры, выдержка, GPS-координаты), цветовые профили для печати и превью. Пользователю сайта всё это не нужно. Ему нужно увидеть картинку.
Ваша задача — выкинуть лишнее, не испортив визуальный опыт.
Lossy vs Lossless
Существует два типа сжатия:
1. Lossless (Без потерь): Картинка вообще не меняется визуально, просто удаляются метаданные. Экономия: 5-20%. (Мало).
2. Lossy (С потерями): Мы немного ухудшаем качество, которое глаз почти не замечает, но алгоритмы склеивают похожие пиксели. Экономия: 70-90%. (Много!).
Не бойтесь снижать качество (Quality) до 80-85%. Человеческий глаз не увидит разницы между JPEG 100% и JPEG 80% на экране телефона. А вес файла уменьшится в 5 раз.
Инструменты вебмастера:
- Squoosh.app: Лучший бесплатный инструмент от Google. Показывает результат «До/После» в реальном времени. Умеет конвертировать в WebP.
- TinyPNG / TinyJPG: Классика. Отличный плагин для WordPress, который жмет картинки на лету при загрузке.
Имена файлов: Транслит или смерть
Если вы загружаете на сайт файл с названием DSC_09812.jpg или Скриншот 2024-10-05.png, вы стреляете себе в ногу.
Поисковый робот читает URL картинки. Для него набор букв IMG_2234 — это белый шум. Он не может связать этот файл с темой статьи. А вот имя файла seo-optimizaciya-kartinok.jpg — это четкий сигнал: «Ага, тут про SEO».
Три заповеди нейминга:
1. Только латиница (Транслит). Никакой кириллицы! Русские буквы в URL превращаются в кракозябры вида %D0%BA%D0%B0%D1%80%D1%82.... Это выглядит ужасно, ломается при копировании и плохо индексируется.
- Плохо:
кот.jpg - Хорошо:
cat.jpgилиkot.jpg
2. Дефис вместо пробела. В мире веба пробел — это зло. Вместо него используйте дефис ( - ). Почему не нижнее подчеркивание ( _ )? Потому что Google воспринимает дефис как разделитель слов, а нижнее подчеркивание — как соединитель.
red_car.jpg= Google видит какredcar(непонятное слово).red-car.jpg= Google видит какredиcar(красная машина).
3. Осмысленность. Имя файла должно дублировать суть того, что на нем изображено. Это еще одно место для вашего ключевого слова (LSI).
Lazy Loading: Искусство быть ленивым
Представьте, что вы пришли в ресторан, сели за столик, а официант тут же вывалил на вас всё меню сразу: суп, второе, десерт, кофе и счет. Стол ломится, тарелки падают, вы в шоке. Именно так ведут себя сайты без ленивой загрузки (Lazy Loading).
Когда пользователь открывает страницу, браузер пытается загрузить все картинки разом. И те, что в шапке, и те, что в подвале, до которого пользователь может даже не доскроллить. Результат? Канал забит, сайт висит, процессор телефона греется.
Lazy Loading — это вежливый официант. Он приносит блюда по очереди. Картинки загружаются только тогда, когда они появляются в зоне видимости пользователя (viewport). Если человек не прокрутил страницу вниз — нижние картинки весом 2 Мб даже не начнут скачиваться.
Как это внедрить? Раньше для этого нужны были сложные JS-скрипты. Сейчас это стандарт HTML5.
Вам просто нужно добавить атрибут loading="lazy" к тегу изображения. Большинство современных CMS (WordPress, Bitrix) делают это автоматически в свежих версиях. Проверьте настройки своей темы. Если этого нет — включите плагином. Это ускорит первичную загрузку (FCP) на 30-40%.
Адаптивность: Каждому по потребностям (Srcset)
Еще одна классическая ошибка: отдавать одну и ту же картинку всем устройствам. У вас есть шикарное фото шириной 1920 пикселей для монитора iMac. На сайт заходит человек с iPhone SE (ширина экрана 320 пикселей). Что делает ваш сайт? Он запихивает огромную картинку 1920px в маленький экранчик телефона. Телефон давится, сжимает её на лету, тратит батарею и мобильный трафик.
Решение: Атрибут srcset Это технология, которая позволяет браузеру самому выбрать подходящий размер. Вы говорите браузеру:
- «Смотри, у меня есть три версии фото: маленькая (S), средняя (M) и большая (L)».
- Браузер смотрит на свой экран и говорит: «Я смартфон, мне хватит S». И качает только маленький файл весом 20 Кб вместо 200 Кб.
Если ваша CMS не умеет нарезать миниатюры (thumbnails) и подставлять их автоматически — вы теряете мобильный трафик. А это сейчас 70% всего интернета.
Image Sitemap: Карта сокровищ для Google
Поисковые роботы умные, но иногда они теряются. Особенно если на вашем сайте используются JS-галереи, слайдеры или лайтбоксы (всплывающие окна). Робот может просто не проиндексировать картинки, которые скрыты внутри скриптов.
Чтобы гарантировать попадание в Google Images, создайте отдельную карту сайта для изображений (sitemap-image.xml) или добавьте информацию о картинках в основную карту.
В ней вы прямо указываете роботу:
- Где лежит картинка.
- Какой у нее Title.
- Какой у нее Caption (подпись).
- Какая у нее лицензия.
Это как дать роботу GPS-навигатор вместо бумажной карты. Индексация ускоряется в разы. В WordPress за это отвечает плагин SEO (например, Yoast или RankMath) — просто убедитесь, что галочка «Include images in sitemap» включена.
Частые ошибки: Где вы сливаете трафик
Вы можете идеально сжать картинку и прописать ей паспорт (Alt), но всё равно проиграть конкуренту. Почему? Потому что SEO — это минное поле. Один неверный шаг — и Google выкидывает вас из индекса картинок.
Вот грабли, на которых танцуют 90% вебмастеров.
1. Стоковые фото — это SEO-самоубийство
Вы заходите на фотосток, качаете картинку «Успешные люди жмут руки» и ставите на сайт. Знаете, что видит Google? Он видит дубль. Эту же картинку уже использовали 15 000 других сайтов.
Для поисковика уникальность изображения так же важна, как уникальность текста.
Если у вас нет бюджета на фотографа, уникализируйте сток:
- Отзеркальте изображение.
- Наложите фильтр или градиент.
- Добавьте свой брендинг (логотип, плашку).
- Сделайте коллаж из двух разных фото. Сделайте хоть что-то, чтобы хэш-сумма файла изменилась. Иначе вы просто тратите место на хостинге.
2. Текст, «запеченный» в пиксели
Дизайнеры любят рисовать красивые баннеры, где заголовок акции написан прямо на картинке в Photoshop. Это фатальная ошибка.
Поисковые роботы (несмотря на прогресс OCR) всё еще плохо читают текст внутри картинок. А главное — этот текст нельзя выделить, скопировать и озвучить скринридером.
- Правило: Картинка — для визуалов. Текст — для HTML.
- Исключение: Инфографика. Но даже к ней нужно обязательно делать текстовую расшифровку (transcript) под картинкой.
3. Спам в Alt (Переоптимизация)
Желание впихнуть невпихуемое часто губит. Не пишите в Alt: купить кроссовки красные цена москва скидка. Это выглядит как мусор. Поисковик посчитает это манипуляцией и пессимизирует страницу (фильтр за переспам).
Пишите по-человечески: Красные беговые кроссовки Nike Air на стадионе.
4. Декорации с тегами
У вас есть иконки стрелочек, разделительные линии или фоновые узоры. Если вы пропишете им alt="стрелка вправо", вы создадите шум.
Скринридер будет читать слепому пользователю:
- «Стрелка вправо, стрелка вправо, декоративная линия». Это ад.
Для декоративных элементов атрибут Alt должен быть пустым: alt="".
Это сигнал роботу:
- «Проходи мимо, тут нет смысла».
Заключение: Картинка стоит тысячи слов
Оптимизация изображений — это не разовая акция. Это гигиена. Вы же моете руки перед едой? Приучите себя «мыть» картинки перед загрузкой на сайт.
Сначала это кажется рутиной: переименовать файл, сжать, прописать Alt. Но эта рутина имеет накопительный эффект. Каждая оптимизированная картинка — это маленький кирпичик в фундамент доверия поисковиков.
- Сайт грузится быстрее -> Пользователи счастливы -> Google поднимает вас в топе.
- Роботы понимают контент -> Картинки попадают в Google Images -> Вы получаете бесплатный трафик.
Не пытайтесь переделать весь архив сайта за одну ночь. Начните с новых статей. Затем пройдитесь по топ-20 самых популярных страниц. Шаг за шагом вы превратите свой медиа-контент из «тяжелого якоря» в парус, который несет ваш бизнес вперед.
И помните: Самая лучшая картинка — та, которая передает смысл, мгновенно грузится и имеет правильный бейджик.
red-car.jpg лучше, чем IMG_123.jpg или красная машина.jpg.
💬 Проверьте свои картинки!
Прямо сейчас зайдите на свой сайт через инструмент PageSpeed Insights. Сколько баллов вы теряете из-за тяжелых изображений?
Напишите в комментариях, какой формат вы используете чаще всего: старый JPG или модный WebP?