Как оптимизировать изображения на сайте

Как правильно оптимизировать изображения на сайте, чтобы они соответствовали требованиям поисковых систем и могли приносить дополнительный трафик на сайт? Об этом кратко рассказал Никита Простяков в новой статье.

На необходимость оптимизации изображений указывают все поисковые системы. Почему это важно? 

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

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

Полные рекомендации для поисковых систем можно получить тут:

Рекомендации Google 

Рекомендации Яндекса

А мы сейчас укажем основные моменты, на которые стоить обратить внимание.

1) Индексация

1) Страницы, на которых находятся изображения, не должны быть закрыты в robots.txt.

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

3) Сами изображения не должны быть закрыты от индексации в robots.txt или любыми другими способами.

2) Формат изображения

1) Поисковые системы рекомендуют выбирать следующие форматы: GIF, PNG или JPEG.

2) Если изображение имеет небольшой размер или является анимированным, то рекомендуем выбирать формат GIF.

3) Если для вас крайне важно передать изображения без сжатия или высокого качества, необходимо выбрать PNG. Но выбирая этот формат, вы должны понимать, что могут возникнуть проблемы с корректной и быстрой загрузкой контента. Обязательно стоит проверить, верно ли будут отображаться у вас такие изображения.

4) В остальных случаях можно использовать формат JPG.

5) Поисковые системы также не рекомендуют использовать форматы BMP и TIFF. 

3) Размеры изображения

Размеры изображения прописываются 2 способами:

1) Через CMS

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

2) Через атрибуты

Если по каким-то причинам вы не можете указать размеры изображения через CMS, есть возможность прописать их с помощью атрибутов width (ширина) и height (высота).

Пример: 

<imgsrc=”photo1.jpg” width=”800” height=”600”>

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

Вы можете проверить, есть ли у вас проблемы с отображением изображений, через специальный сервис Google тут.

Там же вы сможете обнаружить проблемы с оптимизацией изображений, и, как правило, они касаются сжатий.

Google рекомендует воспользоваться следующими сервисами:

https://www.lcdf.org/gifsicle/ – создает и оптимизирует GIF-изображения;
https://jpegclub.org/jpegtran/ – оптимизирует JPEG-изображения;
https://optipng.sourceforge.net – сжимает PNG без потерь;
https://pngquant.org  – сжимает PNG с потерями.

Также есть и другие сервисы, позволяющие оптимизировать изображение:

https://www.punypng.com – позволяет сжать до 10 изображений за раз;
https://tinypng.com – работает только с форматом PNG;
https://www.jpegmini.com – уменьшает размер изображения до 5 раз.

4) Алфавит в названии

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

2) Если изначально название файла было на кириллице (русский, украинский, белорусский и т.д.), оно должно быть транслитерировано согласно правилам. Для этого можно воспользоваться сервисом https://translit.net.

5) Название файла

Название файла изображения не должно содержать спама или малопонятных нечитаемых символов.

— Для коммерческих сайтов

Пример неправильных вариантов названия:

kupit-obuv-nedorogo-converse.jpg – спамный вариант;
obuv4317892.png – малоинформативный вариант;
IMG436432.jpg – неинформативный вариант.

Пример правильных вариантов названия:

kedi-convers-krasnie-80.jpg;
kedi-convers-krasnie-front.jpg.

— Для информационных сайтов

Пример неправильных вариантов названия:

Louvre-Museum-photo-smotret.jpg – спамный вариант;
Paris4317892.png – малоинформативный вариант;
IMG436432.jpg – неинформативный вариант.

Пример правильных вариантов названия:

Louvre-Museum-At-Night.jpg;
Louvre-Museum-Winter.jpg;
Louvre-Museum-01.jpg;
Louvre-Museum-02.jpg.

6) Title

Важный атрибут при оптимизации. В Title размещается текст, который будет отображаться при наведении курсора на изображение.

— Для коммерческих сайтов

Правильный вариант может выглядеть так:

title="кеды converse красные"
title="кеды converse All-Starкрасные модель 80"
title =”кеды converse красные вид сверху”

Неправильный вариант:

 — Спам:

title=" кеды converse красные купить недорого"
title=" кеды converse красные, синие, желтые, зеленые , фото, цены, отзыв"

— Малоинформативный или шаблонный:

title="кеды"
title=" обувь"
title="фото  обуви"

— Неинформативный:

title="4312125"
title=" купить"

— Для информационных сайтов

Правильный вариант может выглядеть так:

title="Музей Лувр ночью"
title="Музей Лувр ночью изнутри"
title=" Музей Лувр зимой"
title=" Музей Лувр зимой 12.12.2008"

Неправильный вариант:

 — Спам:

title=" Музей Лувр смотреть фото"

— Малоинформативный или шаблонный:

title=" Франция"
title="музей"

— Неинформативный:

title="4312125"
title="туристический гид"

7) Alt

Alt – это альтернативное описание вашего файла. Когда по каким-то причинам изображение не показываетсяна сайте, то пользователь видит текст, размешенный в теге Alt. Если текста нет, и тег отсутствует, человек, скорее всего, ничего не увидит. Иногда это может быть причиной различных проблем: поисковые роботы проиндексируют пустую страницу, пользователи увидят не тот контент и многое другое. Таким образом, это может негативным образом повлиять на ранжирование сайта в поисковых системах. 

Важный вопрос в использовании alt и title – можно ли делать их одинаковыми? Да, можно, особенно если у вас много однотипных изображений. Такое дублирование в любом случае будет выглядеть лучше, чем полное отсутствие какого-либо из тегов.

Если вы решили не дублировать, то вы можете заполнить alt следующим образом:

alt= ”кеды converse красные рис. 1”
alt= ”кеды converse красные рис. 2”
alt="Музей Лувр ночью рис. 1"
alt="Музей Лувр ночью рис. 2"

или так:

alt= ”кеды converse красные вид сверху”
alt= ”кеды converse красные вид сбоку”
alt="Музей Лувр ночью панорама"
alt="Музей Лувр ночью изнутри"

Самый лучший вариант – сделать подробное описание:

alt=” Популярные модель кедов converse all star красного цвета — вид сверху ”
alt=” Популярные модель кедов converse all star красного цвета — вид сбоку ”
alt="Изображение Музея Лувр в Париже ночью с освещением"
alt="Фотография Музея Лувр, сделанная зимой в декабре 2008 года"

Важно! Текст в alt может и даже должен содержать ключевые слова, но главное, чтобы это не выглядело как спам.

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

Еще по теме:

• Как правильно использовать название категории в заголовках товаров и можно ли получить пессимизацию листинга при этом?
Расскажите про вхождение названия категории в заголовок товара. Правильно его указывать или нет? Учитывает ли поисковая система его как остальной текстовый контент на странице? Можно...
• Чек-лист по внутренней оптимизации сайта: 18 контрольных пунктов, обязательных к выполнению
Чтобы провести самостоятельный аудит сайта, следуйте перечисленным ниже пунктам. В статье мы описали основные моменты, которые должны быть проверены на сайте перед продвижением или запуском....
• Правильно ли делать глубокую вложенность страницы и как она сказывается на краулинговом бюджете?
Правильно ли будет делать глубокую вложенность: https://www.site.сom/tool/avtomobilnyy-instrument/domkraty/reechnye/ Хлебные крошки тут такие: Главная / Каталог товаров / Инструмент / Автомобильный инструмент / ДОМКРАТЫ / РЕЕЧНЫЕ Как...
• Ответы на часто задаваемые вопросы по семантическому ядру сайта
Разберем, как определить поисковый запрос чужого сайта, сколько ключей можно продвигать на одной странице, как выяснить конкурентность запроса и многое другое. Читатели нашего блога часто...
• Какие обязательные элементы должны быть на странице «Корзина»?
Вопрос по странице "Корзина": нужны ли на таких страницах дополнительные элементы, такие как "Похожие товары" или они будут только отвлекать пользователя от закрытия сделки? Какие...