- 1. Основные требования к изображениям
- 2. Ищем и редактируем картинки
- 3. Оптимизация изображений для сайта
Качественные, подходящие по смыслу изображения всегда удачно иллюстрируют текст. Но кроме работы «на читателя», они также выполняют и другую функцию – улучшают рейтинг сайта в поисковой выдаче, если этому не мешают плохое качество или медленная загрузка. Для этого картинки надо оптимизировать.
И пусть Google научился распознавать изображения, оптимизация остается актуальной для всех ваших фотографий и скриншотов на страницах сайта. Поговорим о том, что такое оптимизация фото, как помочь поисковикам правильно идентифицировать содержимое изображений на вашем веб-ресурсе.
1. Основные требования к изображениям
Поисковые системы анализируют контент по нескольким критериям, которые помогают добиться релевантности запросов:
- высокое качество;
- быстрая загрузка;
- информативность.
Высокое качество изображений предназначено для комфорта пользователя. Хорошо, когда рисунки крупные и четкие, если речь о фотографиях – то с высоким разрешением. Тем не менее, они не должны быть «тяжелыми», поскольку будут плохо грузиться, и со страницы захочется уйти – это уже повлияет на ранжирование. Стоит воспользоваться специальными инструментами, которые позволяют сжимать картинки без потери качества и создавать подходящий размер изображений. О них речь пойдет в разделе о редактировании.
Для оптимизации как мобильной, так и десктопной версии сайта очень важна и быстрая загрузка картинок. Размеры файлов разных форматов сильно отличаются. Google индексирует изображения типов JPEG, PNG, BMP, GIF, WebP и SVG.
Они применяются в зависимости от того, чем вы иллюстрируете контент:
- для фотографий оптимальный выбор – JPEG;
- для картинок или скриншотов – PNG (графических изображений, картинок с текстом) или SVG (векторных рисунков);
- GIF подойдет для движущихся изображений;
- WebP мало весит, но его поддерживают еще не все браузеры.
В любом случае, все эти форматы можно конвертировать из одного в другой.
Если изменить размер изображений согласно масштабам страницы, загрузив его в максимальном разрешении, то вашему браузеру не придется подгонять его под размер гаджета и замедлять работу.
Понадобится и оптимизация загрузки картинок на сайте. Сперва проверьте место хранения. Для того чтобы изображения корректно отображались на вашем ресурсе, их лучше хранить на своем домене или поддомене.

Рис. 1 – Библиотека файлов в админке сайта PPCSEO
Иначе, используя поиск по изображениям, пользователи могут переходить по адресу ресурса, где размещена картинка, а не контент. Это поможет проверить поиск в Гугл через изображения или сервис Tineye.

Рис. 2 – Проверка превью к статье Инсталендинг: стильно о вашем бренде
Контент должен быть не только качественным, но и уникальным. Это правило относится, в том числе, к изображениям. Поисковые системы ищут разнообразный материал в выдаче, поэтому не поленитесь изменить что-то в картинке: фон, количество изображенных персонажей.
Последним пунктом можно назвать информативность изображения. Важно соответствие картинки описанию – оно должно нести практический смысл и подтверждать наглядность того, что описано в контенте.

Рис. 3 – Пример слайдера с розами блога о декоративных растениях Florium
Если текст содержит абстрактную или неточную информацию, то в этом рисунке или фото нет смысла.
А вот на поведенческие факторы сайта влияет и привлекательность картинок. Это означает, что изображение приятно рассматривать, кадр хорошо скомпонован, цветовая гамма ненавязчива. Пользователи будут чаще заходить на страницы с такими изображениями. Если речь идет о товаре, то он изображен на нейтральном фоне крупным планом, видны его отличия от других позиций.

Рис. 4 – Пример хорошего изображения товара в магазине Koni.ua
2. Ищем и редактируем картинки
Поиск хороших фотографий и рисунков несложен. Вы можете выполнить его:
- через поиск Google по изображениям (зайдите в «Права на использование», по умолчанию галочка стоит на “Все”, выставьте фильтр «Лицензии Creative Commons»);

Рис. 5 – Фильтры изображений Google по лицензиям

Рис. 6 – Поиск растения афеландра по изображениям
- зайдя на Rеddit, поскольку его пользователи заранее дают согласие на использование опубликованных ими материалов. Понадобится лишь отсортировать подборку по разделу и дате, категории находятся справа;

Рис. 7 – Изображения пользователей на сайте Rеddit
- скачав исходный шаблон картинки в бесплатном фотобанке или фотостоке. Среди наиболее популярных стоков для фотографий лидируют Free images, Freepik, Pixabay.

Рис. 8 – Интуитивно понятный интерфейс Freepik
Приступаем к редактированию. Добавить визуальную привлекательность, кадрировать и улучшить изображение другими способами легко в графических редакторах. Кроме всем известного фотошопа, популярным инструментом стала Canva. Множество ее элементов и макетов бесплатны.

Рис. 9 – Работа с изображением в программе Canva
В этом графическом дизайнере, как и в других программах, можно накладывать эффекты, использовать текстовую анимацию, обрезать и кадрировать фотографии.
3. Оптимизация изображений для сайта
Что следует помнить об оптимизации картинок, чтобы их заметили поисковые системы? Разумеется, изображения должны размещаться в тексте, который соответствует запросу. Связанность по смыслу – очевидный критерий хорошо подобранной картинки.

Рис. 10 – Фотография группы на официальном сайте
Прописывайте латинскими буквами краткое соответствующее описание в названии файла с изображением. В него важно вставлять релевантные ключевые слова. Но при этом они должны быть максимально просты. Название изображения помогает передать содержание картинки пользователям сайта. Например, devushka_hippi_v_shliape.jpg., а не 052.jpg:

Рис. 11 – Пример статьи с картинками без названий
Можно называть файл на родном языке – тогда при заливке на сайт название автоматически транслитерируется. Можно выполнить транслитерацию онлайн (например, в сервисе translit-online). А можно писать название сразу на английском. Выбирайте удобный вам вариант.
Чтобы оптимизировать растровые изображения, которые состоят из пикселей, мы максимально сохраним их качество. Для этого придется:
- либо масштабировать изображение, отсекая его лишние пиксели;
- либо снизить глубину цвета до палитры в 256 цветов, что снижает тяжесть вдвое.
Определить вес файла поможет универсальная формула: Длина х Ширина х 4 байта (вес каждого пикселя).
Если нужно оптимизировать векторные изображения, которые обычно сохранены в формате SVG, мы уменьшаем их размер и очищаем от скрытых элементов.
Уменьшить вес без потери качества можно с помощью программ:
- Compressor – уменьшает вес изображений на 90%. Имеет три степени сжатия: с потерей качества, без потери качества и ручные настройки. Есть платная и бесплатная версии. Можно выгружать изображения пакетом как на диск компьютера, так и в облачное хранилище.

Рис. 12 – Программа Compressor
- Kraken – можно менять размер рисунков и фото, пользоваться пакетным преобразованием файлов. Есть функция оптимизации картинок, архив со сжатыми рисунками легко получить, введя url сайта и немного подождав.

Рис. 13 – Программа Kraken
- Imagify – уникален тем, что с его помощью можно оптимизировать все картинки на веб-ресурсе сразу. Очень быстрый, поддерживает форматы JPG, PNG, PDF и GIF. Может переводить файлы в формате WebP в другие.

Рис. 14 – Программа Imagify
Сжать картинки на сервере поможет Google Pagespeed Insights. Это инструмент измеряет производительность веб-ресурса и может давать советы по ее улучшению.

Рис. 15 – Программа Google Pagespeed Insights
Следующий этап – прописывание метаданных к изображениям.
Для оптимизации понадобится метатег Alt (альтернативный текст). Он не только объясняет пользователям, что отражено на картинке, если изображение не загрузилось, но и помогает поисковикам правильно индексировать изображение. Это наименование того, что изображено на фотографии или рисунке, с описанием в 3-4 слова.
Допустимый размер альта – 125 символов, поэтому он должен быть одновременно информативным и емким, содержать уместное количество ключевых слов. Например, для картинки ниже логичнее был бы alt=»две овчарки бегут с палкой», чем указанный, продублировавший название статьи “Поводки, намордники и штрафы: почему наступят новые времена”.

Рис. 16 – Пример неудачного метатега Alt в статье
Если речь идет об интернет-магазине, где заполняются карточки товаров/услуг, тогда целесообразно указать название и опознавательный признак (наименование, бренд, цвет или размер). Это поможет поисковым системам идентифицировать изображение продукта. Ниже пусть и не самый удачный (надпись «фото 1 Мотокуртки» там явно лишняя), но пример альта для картинки товара.

Рис. 17 – Пример метатега для товара мотомагазина
В поле Title прописываем название фотографии или рисунка. Именно оно высветится пользователю, который наведет курсором на картинку.

Рис. 18 – Пример Title для изображения в блоге салона антикварной мебели
В идеале поля Title и Alt стоит прописывать разными, но лучше заполнить их одинаково, чем оставить пустыми. Ключевые слова, которые могут заметить поисковые роботы, желательно оставить и в подписях к картинкам.
Существует разметка OpenGraph, которая помогает продвигать материалы при помощи социальных сетей. Она повысит кликабельность ссылок на сайт.

Рис.19 – Пример изображения поста с микроразметкой
Так, при наличии этой разметки пост автоматически выглядит более аккуратным – изображение заливается в нужном размере, дополненное ссылкой и заголовком. Привлекательные превью будут нести трафик из соцсетей. Проще всего использовать плагины для CMS вашего сайта.
Если строите внешние анкорные ссылки на них, то текст должен совпадать с содержимым изображения:
<a href=»https://example.com/ interior/home-design.jpg»> Фото дизайна интерьера дома</a>
ВЫВОДЫ
Таким образом, как выглядит чек-лист оптимизации изображений на сайте:
- При поиске и обработке картинок помним, что контент создается для пользователя, но должен соответствовать требованиям поисковых систем, иначе ваши картинки никто не найдет.
- Хорошее качество, быстрая загрузка, визуальная привлекательность и передача смысла – вот те столпы, на которых держится иллюстративность контента.
- При необходимости – редактируем (уменьшаем вес, придаем уникальность, сохраняем правильный формат картинок для сайта). Для продвижения контента через соцсети устанавливаем на сайт OpenGraph.
- Оптимизируем изображения, заполнив метатеги Title и Alt для каждого из них. В поле Title укажем название рисунка или фотографии, в поле Alt, соответственно, краткое описание.
Если вы выполните эти рекомендации, то изображения на вашем сайте не только предложат пользователям разнообразный контент, но и однозначно повлияют на трафик положительно.