Оптимизация и продвижение изображений - полный гайд 2021

Почему важно оптимизировать изображения

Если сайт продвигается в поиске, то стоит обратить внимание на особый и эффективный канал получения посетителей - поиск по картинкам.

Почему картинки? Современный темп жизни оказывает влияние. Известно, что человек легче воспринимает информацию через визуальные образы. Сегодня пользователи делают выбор в пользу картинок - это быстрее, чем читать длинные полотна текста.

Что дают картинки? Статистика поиска по картинкам

Google Image - это поиск по изображениям в Google, который пользуется все большей популярностью.

Плюсы от трафика из поиска по изображениям:

• вы разнообразите каналы привлечения посетителей;
• увеличится посещаемость сайта;
• при правильном подходе - улучшение поведенческих показателей за счет увеличения времени пребывания на сайте;
• картинки - это эффективный канал для сферы продажи товаров (реже - услуг); Пользователи часто ищут товары по изображениям;
• самый главный и эффективный канал для продвижения сайтов-стоков изображений.

Чтобы проверить, получает ли сайт трафик с поиска по картинкам, следует зайти в панель Search Console в раздел “Эффективность” и выбрать тип поиска - “Изображение”:

Поиск по картинкам: как работает, виды поиска

Существует обычный поиск (Google Поиск) и поиск по картинкам (Google Картинки).

Результаты обычного Гугл поиска включают в себя разные форматы: тексты, изображения, видео, карты и т.д.

Очень часто блок с картинками присутствует в результатах поиска по множеству ниш.

Например, мы ввели слово “Киев” в обычном поиске и внизу на первой странице получили результат:

А вот так выглядят результаты поиска по запросу “газон”:

Google сам определяет где и какой тип форматов выводить в результатах поиска. Это зависит от множества факторов - ниша, конкуренция, тип запроса (коммерческий или информационный) и т.д.

Как работает поиск “Google Картинки”

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

Вводится запрос поиска - например, “газон”. При этом, пользователь может выбрать также: тип файла, размер, цвет, лицензию и другие параметры:

Поисковик отбирает и сортирует изображения по параметрам файла изображения и указанным в нем данным. Наиболее ключевыми данными - являются тег ALT и тег TITLE изображения, а также название и URL изображения и другие свойства.

Давайте рассмотрим подробнее технические характеристики изображений на этапе их создания.

Оптимизация изображений на этапе создания

На этапе создания можно оптимизировать такие свойства картинок:

• формат картинок,
• размер и качество изображений,
• названия файлов и метаданные,
• релевантность.

Требования к форматам картинок

Google берёт в индекс картинки в форматах BMP, GIF, JPEG, PNG и WebP, SVG, ICO, RAW.

Среди существующих форматов изображений, наиболее оптимальным для WEB (Интернет) - является JPG (JPEG).

Этот формат используется для фото, иллюстрации без прозрачности, где важны цвета, переходы, оттенки. В таком случае JPG выигрывает у других форматов в плане соотношения качество/цветность/размер.

Плюсы JPG (JPEG):

• во-первых, в этом формате картинка имеет меньший вес, по сравнению с другими форматами, при относительно хорошем качестве;
• во-вторых, большинство изображений в Интернет (более 90%) именно в формате JPG,
• в-третьих, бОльшая часть ТОПа по картинкам - это JPG, что добавляет уверенности к его выводу в ТОП.

Другие форматы

• PNG. Ряд объектов, которые требуют детализации (иконки, схемы, медицинские изображения, графики, картинки с большим количеством текста) и изображения с прозрачностью оптимальнее сохранять в PNG.
• GIF - подходящий формат для анимации.
• WebP - хороший аналог JPG, но его минус - использование не во всех браузерах, (например, кроме Safari).

Размер, вес и качество изображений

Сколько должна весить картинка?

Все зависит от количества изображений и общего веса страницы, на которой она будет размещена. Если на странице будут десятки/сотни изображений товаров, то вес картинки должен быть минимальным - до 50-70 кБ.

Если же это статья в блоге, в которой 3-4 картинки - то их вес может быть до 200-300 кБ.

В любом случае - стоит избегать веса изображения более 1 Мб. Чем меньше весит картинка без ощутимой потери качества - тем лучше!

Размер и качество изображений

В графическом редакторе (например, в Фотошоп) рекомендуется воспользоваться функцией “Сохранить для Web”. При этом, можно откорректировать параметры сжатия:

• снизить качество до 60-80% (смотрим, чтобы изображение хорошо воспринималось); Использовать качество более 85% не рекомендуется, так как при таком параметре изменения качества незначительны, а вес файла значительно возрастает.
• не рекомендуется выставлять разрешение > 72 dpi;
• уменьшить размер до истинного размера на сайте. Например, если первоначально размер изображения был 2000 на 3000 px , а на сайте будет отображаться в размере 200 на 300, то указать именно этот размер;
• сохранить в формате JPEG (JPG), если позволяет специфика изображения.

Названия файлов и метаданные

Название файла следует выбирать исходя из сути изображения, используя латиницу. Избегайте переспама, название должно быть понятным для людей.

Правила составления названия файла картинки:

• Язык названия - зависит от региона продвижения. Если аудитория англоязычная - используйте английский язык в названии, если русскоязычная - используйте транслит.

Например, для русского языка, название будет: “zelenyj-gazon.jpg”, для английского: “green-lawn.jpg”.

Используйте сервисы для перевода русских символов в транслит, например, translit.net.

• Спецсимволы. Избегайте любых спецсимволов в названии файла. Допускается использование букв (латиница), цифр, а также “дефиса” в качестве пробела между словами.

Важно знать! Google воспринимает “дефис” как пробел, а если использовать нижнее подчеркивание - название будет восприниматься слитно, как одно слово.

• Длина названия. Оптимально - до 3-4 слов, не более. Название должно быть коротким.

Пример названия картинки

Если на картинке изображен коттедж из двух этажей, то:

• Лучшие варианты названия: “dvuhjetazhnyj-kottedzh.jpg”, “dvuhjetazhnyj-dom.jpg”.
• Приемлемый вариант: “kottedzh.jpg”, “dom.jpg”.
• Плохие варианты: “DSC12456.jpg” , “kupit-dom-nedorogo.jpg” , “купить-дом.jpg”.

Метаданные изображения (EXIF data)

Метаданные (EXIF-данные) - это информация о фото или файле изображения, которая описывает условия и способы его получения, авторство и т. п. Данные добавляются устройством или ПО, с помощью которого создан файл.

Например, при съемке, фотокамера добавляет данные о марке и модели камеры, времени съемки, ориентации изображения, месте съемки и т.п.

Рекомендуется грамотно заполнять (или не удалять) EXIF-данные.

Добавьте актуальные данные EXIF перед загрузкой файла на сервер:

• проверьте, чтобы в данных не содержалась конфиденциальная информация;
• если это возможно - оптимизируйте данные под поисковые запросы.

Релевантность изображения

1. Соответствие окружающему тексту. Суть изображения должна максимально соответствовать смыслу окружающего её текста. Например, если это товар с названием “Коричневый компьютерный стол”, то на картинке должен быть изображен коричневый стол, а не белый. Рекомендуется также добавить продвигаемые запросы соотносящиеся с картинкой перед тегом <img>.
2. Соответствие поисковым запросам. Нужно прогнозировать по каким запросам будут искать картинку. Например, если пользователь ищет “удобный компьютерный стол”, то он ожидает увидеть фото стола в интерьере, а не графику или эскиз.
3. Соответствие метаданным. Повторимся, что изображение медиафайла должно соответствовать его названию, описанию и характеристикам (метаданным).

Подготовка изображений к размещению на сервере

После создания файла изображения необходимо подготовить его к загрузке и хранению на сервере. Рекомендуется использовать тот-же сервер на котором размещен сайт.

Сжатие картинок: инструменты и методы

• Убедитесь, что сервер использует функцию GZIP-сжатие, если нет - включите ее.
• Перед загрузкой изображения не лишним будет воспользоваться онлайн-сервисами сжатия. Например, популярные - TinyPNG, Compressor.io.
• Если на сайт регулярно загружается большое количество изображений, то целесообразно настроить сжатие изображений на сервере с помощью библиотек. Например - jpegoptim, OptiPNG и gifsicle.

Хранение изображений

Для хранения изображений используйте/создайте папку img (images).

Если изображений много, создайте иерархию хранения картинок, ориентируясь на структуру сайта. Например, для фото в блог, создайте отдульную папку img/blog , а для фото товаров - img/products и так далее. Таким образом:

• вы структурируете информацию и упростите её поиск;
• покажете актуальный путь хранения файлов для поисковика. Например, если вы продвигаете картинку товара, то наличие папки “products” или “goods” или названия категории в пути файла может быть дополнительным фактором ранжирования (вхождение запроса в URL).

Размещение и оптимизация изображений на сайте

После предварительной подготовки и загрузки на сервер файла изображения, следует оптимизировать его на сайте.

Для размещения картинки используйте тег <img>. Прописывайте атрибуты width и height с указанием размеров изображения. Повторимся, желательно, чтобы размеры совпадали с реальными (предварительно, обрезать изображение до нужного размера).

Релевантность картинки в тексте

Изображение должно быть быть грамотно вписано в текст, чтобы соответствовать смыслу контента. Текст около картинки желательно дополнить ключевыми словами, по которым будет продвигаться картинка, лучше всего - использовать ключи перед тегом <img>.

Теги Alt и Title картинок

Важнейшими свойствами изображения при его продвижении являются теги Alt и Title.

Правильно используя эти атрибуты вы обеспечите более 80% успеха продвижения.

Тег Alt изображения

Атрибут Alt - это альтернативный текст, описывающий изображение. Используется поисковиками при индексации, чтобы получить информацию о картинке. Кроме того, Alt отображается на сайте, когда изображение не загрузилось (например, при низкой скорости) и помогает пользователю понять, что на этом месте должна быть картинка.

Правила заполнения тега Alt:

• Написать максимально подходящее изображению описание. Например, “деревянный компьютерный стол” или “белая ваза на столе”.
• Не использовать коммерческие запросы “купить, цена и т.д”. Не перечислять запросы через запятую.
• Максимум 2-5 слов в описании.

Тег Title изображения

Атрибут Title - даёт дополнительное описание картинки и отображается при наведении на неё мышью.

Правила заполнения Title картинки аналогичен с правилами для тега Alt - лаконичное и релевантное описание изображения для пользователя, без спама.

Желательно, чтобы теги Alt и Title отличались, но если они будут совпадать, это лучше, чем не использовать их вовсе.

Sitemap изображений

Добавьте отдельный Sitemap.xml для изображений. Это облегчит индексирование картинок и как следствие - может улучшить их ранжирование.

Микроразметка

Использование микроразметки заключается в том, чтобы специальным образом “маркировать” изображения в коде сайта.

Основная задача микроразметки: помочь поисковым роботам в индексации изображений, чтобы они точнее определяли содержимое.

Основное преимущество - микроразметка очень помогает улучшить позиции в поиске.

Для внедрения микроразметки используйте Schema.org - раздел https://schema.org/ImageObject . При правильном внедрении, вы сможете показать поисковым роботам, например, такие свойства картинки:

• contentUrl (ссылка на изображение);
• contentLocation (место)
• name (название изображения)
• datePublished (дата публикации)
• description (описание);
• exifData (метаданные);

Адаптивность изображений

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

Соответственно, адаптировать картинки - необходимо! Размер изображений должен корректно отображаться на любых экранах - на десктопе, планшете и смартфоне.

Популярное решение - использование атрибута srcset. Нужно предварительно загрузить на сервер несколько вариантов изображений (например, для десктопа и мобильного). Затем прописать в srcset для каждого экрана - своё изображение.

Протестируйте на разных экранах и в разных браузерах.

Экспериментируйте!

Уникальность изображений

Уникальность изображения обязательна, если вы хотите эффективно продвигаться по картинкам. Это свойство, как и релевантность, - одно из важнейших в ранжировании.

Как сделать картинку уникальной:

• Вариант 1. Создать изображение “с нуля”: сделать фото или нарисовать картинку. Этот вариант всегда предпочтительней.
• Вариант 2. Отредактировать существующее фото, применив эффект “зеркальное отображение”. Судя по экспериментам, никакие другие эффекты не сделают картинку уникальной - смена цвета, размера, добавление других элементов - малоэффективны.

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

Как проверить уникальность картинки

Проверить уникальность изображения можно с помощью онлайн-сервиса TinEye.

Однако, более эффективным способом является проверка изображения через поиск по картинкам Google. Для этого необходимо зайти в сервис поиска и выбрать иконку “фотокамера”

Затем вы можете указать ссылку изображения или загрузить его:

Нажав кнопку “Поиск по картинке” вы увидите результаты: количество похожих картинок и ключевое слово, с которым может быть связана картинка. Либо число “0” найденных результатов, если картинка полностью уникальная.

Где брать изображения?

Если вы планируете всё-же искать готовую картинку, то есть 2 варианта - поиск в Google и поиск в фотостоках.

Поиск картинки в Google

В таком случае, при поиске обратите внимание на параметр поиска “Лицензия”, чтобы не нарушить авторские права. Выбирайте лицензию “Creative Commons”, она позволяет использовать изображения, при условии признания авторства. Однако, существует 6 видов данных лицензий. Лучше выбрать ту, которая позволяет использование картинки в коммерческих целях.

Чтобы понять, какие условия у каждой конкретной лицензии, при клике по изображению перейдите по ссылке “Сведения о лицензии”, тогда у вас не останется вопросов о возможностях использования картинки.

Популярные фотостоки

Существует множество платных и бесплатных фотостоков. Из бесплатных наиболее популярные:

• Unsplash
• Pixabay
• Pexels
• Foter
• Perfectstock
• Stocksnap
• Isorepublic

Внешнее продвижение картинок

1. Размещение внешних ссылок на картинку

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

Например, ссылка с другого сайта на вашу картинку с изображением товара (стола):

<a href =”site.com/img/stol.jpg”>компьютерный стол - фото</a>.

Как и в классическом ссылочном продвижении, для картинок используйте в качестве анкоров поисковые запросы, слова “изображение”, “картинка”, “тут”, “здесь” или адрес сайта.

Не переусердствуйте с коммерческими анкорами, действуйте аккуратно - ссылка должна быть релевантной содержимому страницы (как со стороны ссылающегося сайта, так и со стороны получателя ссылки).

2. Размещение изображения на авторитетных сайтах

Разместите вашу картинку на авторитетном ресурсе, но так, чтобы физически она оставалась на вашем сервере (URL оставался вашим). У картинки должны быть прописаны Alt и Title.

Ускорение загрузки как фактор продвижения картинок

Скорость загрузки картинки и страницы сайта - это важнейший показатель ранжирования.

Проверяйте скорость загрузки сайта с помощью инструмента Google PageSpeed Insights и работайте с проблемными изображениями.

• Основные рекомендации для улучшения загрузки страниц и изображений - это работать с правильными форматами картинок и предварительно оптимизировать медиафайл (как описано выше). Если все выполнено правильно - проблем быть не должно.
• Кроме того, всегда старайтесь загружать изображение в том размере, в котором оно будет отображаться на сайте.
• Дополнительно, для ускорения загрузки страниц, при наличии большого количества изображений, настройте Lazy loading (ленивая загрузка).

Авторское право

Авторские знаки (ватермарки, водяные знаки)

Google признаёт, что это сложная тема. Есть плюсы и минусы использования водяных знаков.

Плюсы водяных знаков:

• С точки зрения владельца, сохраняется авторство изображения; Создатели могут претендовать на признание.
• Ватермарки - сдерживающий фактор от внешнего использования изображений в своих целях.

Минусы ватермарков:

• С точки зрения пользователей - лучше более высококачественные изображения. Если водяной знак очень искажает фото - это не нравится пользователям, и они его не выберут, что снизит посещаемость сайта с поиска по картинкам.
• Google утверждает .что наличие водяного знака самого по себе не влияет на ранжирование. Однако, стоит понимать, что он учитывает поведение пользователей. Если пользователь будет реже выбирать такие фото, могут снизится и показы в поиске.

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

Внесение данных в метаданные

Оптимальной защитой изображений является внесение авторства в метаданные изображения. Для этого заполните поля:

• IPTC creator (создатель),
• credit line (строка с информацией о разрешении на использование)
• copyright notice (уведомление об авторских правах).

При заполнении полей руководствуйтесь стандартами IPTC.

Выводы

Как видим, тема продвижения изображений очень многогранная.

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

Успехов вам в продвижении!