Заказать SEO-услуги
Согласен с правилами обработки персональных данных
Скорость ответа - до 30 минут!

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

like 57
27
8
22

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

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

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

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

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

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

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

Подписаться на рассылку

Еще по теме:


Никита П.

SEO-аналитик

Оцените мою статью: 

1 Star2 Stars3 Stars4 Stars5 Stars (21 оценок, среднее: 4,81 из 5)

Есть вопросы?

Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.

Siteclinic logo
Наверх

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

  1. Инфографику и одноцветные картинки : элементы стилей, иконки — можно и даже считаю нужно представлять в svg, что уже превращается в тенденцию. И размер малый, а масштабируемость хорошая.

  2. На ваш взгляд, не будет ли считаться спамным, если:
    1. На странице 15 — 20 изображений
    2. Каждое изображение называется: krossovki-nike-[Модель].jpg
    3. Каждое изображение имеет alt: Кроссовки Nike [Модель] — фото с site.ru
    4. Каждое изображение имеет title: Кроссовки Nike [Модель]

    Итого получаем большое число вхождений «Кроссовки Nike» на странице.
    ————-
    Живой пример — 30 товаров чешского бисера, который отличается только цветом и артикулом.

    1. Тут вполне нормально, так как у вас в каждом отдельном случае своя уникальная модель.
      В принципе, если ваш сайт продает только кроссовки, то можно опустить в описании alt и title слово «кроссовки». В случае с бисером нужно указывать цвет и артикул. Но чтобы я мог ответить точнее, можете привести пример заполнения с бисером?

  3. Пробел пропустили между тегом и его атрибутом. Кавычки эти не используются в коде. И вместо атрибутов сейчас рекомендуется использовать стили. То есть, лучше писать то же самое так:

    За ссылки на онлайн редакторы спасибо. Не всегда Ps под рукой есть.

    Почему title размещать важно? Не всем нравятся всплывающие элементы. Разве для оптимизации alt не достаточно?

    1. Спасибо! Title важно писать для улучшения ранжирования изображения. Конечно то что может быть полезно для оптимизации не всегда полезно для пользователя. В данном случае лучше руководствоваться целями котоыре дял вас важнее и приоритетнее. Если вы знаете что Title в вашей ситуации будет мешать, отвлекать пользователя или вводить в заблуждение, то лучше не прописывать, так как вам не нужно ухудшения поведенческих факторов. Но если вам важно именно ранжирование, то тогда стоит обязательно прописать! То есть определите какие цели для вас важны и от этого можете уже выбрать прописывать или нет!

  4. Здравствуйте. Создаю сайт http://www.nik-m.com на движке Webasyst .При загрузке фото, видео на страницу сайта, на мобильном приложении оно отображается частично, хотя в теме дизайна говорится, что Темы дизайна семейства Default оптимизированы для всех современных браузеров, планшетных компьютеров и мобильных устройств на основе iOS и Android. Как исправить ошибку?

Добавить комментарий для Анастасия Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Мы продвигаем: