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

Хочу заметить, что роботы поисковых систем обращают своё внимание намного чаще на те страницы блога, где по мимо одного текста, ещё расположены оптимизированные изображения.

Такие страницы как правило стоят в поисковой выдачи намного выше своих конкурентов, да и дополнительный трафик со страниц Яндекс и Google картинки ещё никто не отменял, но довольно слов, вперёд за работу.

Размер изображения для сайта

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

Но это не значит, что теперь надо заменять все маленькие картинки в статье блога на большие и уменьшать их благодаря CSS стилям, вы наоборот этими действиями навредите своему блогу ещё сильнее.

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

Стоит помнить о мобильных пользователях, у которых может быть не безлимитный интернет!

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

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

Многие блоггеры утверждают, что миниатюра не должна быть меньше 150x150 пикселей, так как поисковики принимают такие картинки за элемент дизайна блога, но я хочу сказать, что создавая различные сайты и блоги, я всегда видел как к примеру в Google, попадали абсолютно все картинки, а вот с Яндексом все намного сложнее, он может пол года не индексировать изображения на блоге из-за различных ограничений и фильтров.

Атрибут alt для картинок

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

Во-вторых, если картинка не загрузилась, то браузер отобразит только текст написанный в данном атрибуте, а пользователь как вы понимаете увидит этот текст:

Описание картинки в атрибуте alt должно быть простым, понятным и не очень длинным, как правило туда вписывается ключевое слово, но это не значит, что через запятую следует перечислять все ключевые слова подходящие данному изображению.

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

Атрибут title для картинок

На сегодняшний день нельзя сказать на 100% без каких либо экспериментов, необходим ли данный атрибут для картинок или нет.

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

Но если даже некоторые поисковые системы прекратили обращать внимание на текст в атрибуте title, его по прежнему могут увидеть посетители вашего блога, наведя на картинку стрелкой мыши:

Человеко понятный урл

Как правило название картинки должно иметь человеко понятный урл или коротко ЧПУ, отражая суть содержимое картинки.

К примеру, если на картинки изображен котик обормотик, то и название должно быть kotik-obormotik.jpg

Такое имя картинки сразу понятно поисковым системам, пользователям блога и администратору блога, чем картинка с названием pick_578.jpg

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

Расположение картинки в тексте

Поисковые системы уже давно научились анализировать текст находящийся вокруг картинки, будь он сверху помещён в заголовок, сбоку или под картинкой, не важно.

Важно то, что в этом тексте должны быть написаны ключевые слова передающие смысл расположенного рядом изображения, так как если поисковик не определит, что изображено на картинки, то он будет собирать дополнительную информацию в тексте, а также заглянет в атрибут alt и возможно в title, о которых я писал выше:

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

Текст под картинкой

Одним из важных моментов в продвижении картинок в поисковых системах является расположенный под ними текст, данное решение следует использовать в том случае, когда на страницы написано мало текста, а изображений слишком много и поисковым системам неоткуда брать дополнительную информацию, тем более данное решение можно стилизовать под фотокарточки Polaroid:

Вес картинки

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

Ведь не все пользователи готовы тратить своё драгоценное время и тем более трафик интернета (если речь идёт о мобильных пользователях), когда на просторе интернета существуют различные альтернативные ответы, которые помогут пользователю решить свои проблемы.

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

Поэтому чтобы уменьшить вес картинки, необходимо:

1. Выбрать подходящий формат jpg, png или gif, и сравнить между ними вес картинки.

2. Сжать картинку в Фотошопе или различными онлайн сервисами, к примеру TinyPNG.

Указать размеры картинок

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

И такой информацией являются атрибуты в HTML коде, отвечающие за оригинальную ширину и высоту картинки:

height - высота картинки
width - ширина картинки

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

Уникальная картинка

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

Так как если картинка или её отдельные элементы были взяты с простора интернета и поисковики видят в них не оригинал, а 685-тую копию, то шансы на то, что такая картинка попадёт на страницы Яндекс или Google картинки в первые ряды поисковых запросов, к сожалению сводится на нет.

И согласитесь с тем, что лучше уделить этому вопросу лишнее время, чтобы в будущем картинка принесла блогу большую или малую пользу, чем тратить время впустую и видеть, что результатов нет.

Закрепляем материал

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

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