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

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

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

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

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

Рекомендации 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 может и даже должен содержать ключевые слова, но главное, чтобы это не выглядело как спам.

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

Еще по теме:

• Основные причины, по которым продвижение сайтов терпит фиаско
• Нужен ли сайту безопасный протокол? «За» и «Против» переезда на https
• Мобильная скорость загрузки страницы важна, но пока что не для SEO