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

• 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, мы уменьшаем их размер и очищаем от скрытых элементов.

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

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

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

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

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

3. 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>

ВЫВОДЫ 

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

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

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