Полный гайд по оптимизации картинок на сайте



Качественные, подходящие по смыслу изображения всегда удачно иллюстрируют текст. Но кроме работы «на читателя», они также выполняют и другую функцию – улучшают рейтинг сайта в поисковой выдаче, если этому не мешают плохое качество или медленная загрузка. Для этого картинки надо оптимизировать.

И пусть 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 по лицензиям

Оптимизация картинок, поиск фото в Google Картинки

Рис. 6 – Поиск растения афеландра по изображениям

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

Рис. 7 – Изображения пользователей на сайте Rеddit

  • скачав исходный шаблон картинки в бесплатном фотобанке или фотостоке. Среди наиболее популярных стоков для фотографий лидируют Free images, Freepik, Pixabay
Поиск картинок в фотостоке Freepik

Рис. 8 – Интуитивно понятный интерфейс Freepik

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

Редактирование фотографий в Canva

Рис. 9 – Работа с изображением в программе Canva

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

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

Что следует помнить об оптимизации картинок, чтобы их заметили поисковые системы? Разумеется, изображения должны размещаться в тексте, который соответствует запросу. Связанность по смыслу – очевидный критерий хорошо подобранной картинки.

Оптимизация картинок, фото отвечает смыслу текста

Рис. 10 – Фотография группы на официальном сайте

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

Оптимизация картинок, фото названо по номеру

Рис. 11 – Пример статьи с картинками без названий

Можно называть файл на родном языке – тогда при заливке на сайт название автоматически транслитерируется. Можно выполнить транслитерацию онлайн (например, в сервисе translit-online). А можно писать название сразу на английском. Выбирайте удобный вам вариант.

Чтобы оптимизировать растровые изображения, которые состоят из пикселей, мы максимально сохраним их качество. Для этого придется: 

  • либо масштабировать изображение, отсекая его лишние пиксели;
  • либо снизить глубину цвета до палитры в 256 цветов, что снижает тяжесть вдвое. 

Определить вес файла поможет универсальная формула: Длина х Ширина х 4 байта (вес каждого пикселя).

Если нужно оптимизировать векторные изображения, которые обычно сохранены в формате SVG, мы уменьшаем их размер и очищаем от скрытых элементов.

Уменьшить вес без потери качества можно с помощью программ:

  1. Compressor – уменьшает вес изображений на 90%. Имеет три степени сжатия: с потерей качества, без потери качества и ручные настройки. Есть платная и бесплатная версии. Можно выгружать изображения пакетом как на диск компьютера, так и в облачное хранилище.
Снижение веса картинки при помощи Compressor

Рис. 12 – Программа Compressor

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

Рис. 13 – Программа Kraken

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

 Рис. 14 – Программа Imagify

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

Сжатие размера картинки при помощи Pagespeed

Рис. 15 – Программа Google Pagespeed Insights

Следующий этап – прописывание метаданных к изображениям.

Для оптимизации понадобится метатег Alt (альтернативный текст). Он не только объясняет пользователям, что отражено на картинке, если изображение не загрузилось, но и помогает поисковикам правильно индексировать изображение. Это наименование того, что изображено на фотографии или рисунке, с описанием в 3-4 слова. 

Допустимый размер альта – 125 символов, поэтому он должен быть одновременно информативным и емким, содержать уместное количество ключевых слов. Например, для картинки ниже логичнее был бы alt=»две овчарки бегут с палкой», чем указанный, продублировавший название статьи “Поводки, намордники и штрафы: почему наступят новые времена”.

Тег alt не отвечает содержимому картинки

Рис. 16 – Пример неудачного метатега Alt в статье

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

Оптимизация картинок, метатег товара на сайте

Рис. 17 – Пример метатега для товара мотомагазина

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

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

Рис. 18 – Пример Title для изображения в блоге салона антикварной мебели

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

Существует разметка OpenGraph, которая помогает продвигать материалы при помощи социальных сетей. Она повысит кликабельность ссылок на сайт. 

Оптимизация картинок, предпросмотр в соцсети

Рис.19 – Пример изображения поста с микроразметкой

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

Если строите внешние анкорные ссылки на них, то текст должен совпадать с содержимым изображения:

<a href=»https://example.com/ interior/home-design.jpg»> Фото дизайна интерьера дома</a>

ВЫВОДЫ 

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

  1. При поиске и обработке картинок помним, что контент создается для пользователя, но должен соответствовать требованиям поисковых систем, иначе ваши картинки никто не найдет.
  2. Хорошее качество, быстрая загрузка, визуальная привлекательность и передача смысла – вот те столпы, на которых держится иллюстративность контента.
  3. При необходимости – редактируем (уменьшаем вес, придаем уникальность, сохраняем правильный формат картинок для сайта). Для продвижения контента через соцсети устанавливаем на сайт OpenGraph.
  4. Оптимизируем изображения, заполнив метатеги Title и Alt для каждого из них. В поле Title укажем название рисунка или фотографии, в поле Alt, соответственно, краткое описание.

Если вы выполните эти рекомендации, то изображения на вашем сайте не только предложат пользователям разнообразный контент, но и однозначно повлияют на трафик положительно.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться:

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: