Оптимизация изображений

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

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

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

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

— уникальность

— быстрая загрузка

— релевантность

 

Начнем по очереди, и первым свойством у нас идет УНИКАЛЬНОСТЬ.

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

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

Загружать картинки  путем ссылки на сторонние ресурсы не рекомендую, так как вы рискуете остаться с «пустым местом», если этот сторонний ресурс накроется медным тазом.

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

Да, кстати, именно так и будут искать наши картинки в будущем уже наши пользователи.

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

Также кто не знает, напомню: искать изображение  в поисковых системах можно не только по ключевым словам, но и по самим картинкам.

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

poisk_kartinky

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

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

Кроме того, название изображений должны ОБЯЗАТЕЛЬНО отражать его смысл, просто отлично, если в качестве названия будет использоваться ключевое слово. Будет неправильным назвать изображение 123.jpg или ddd.png.

Поисковым системам будет абсолютно не понятно, что на этом изображении, и к какому ключевому слову его отнести. Например, если вы размещаете свое фото, то назовите его vyacheslav_danilov.jpg или уж, в крайнем случае — moefoto.jpg, но ни в коем случае не обезличивайте его.

Пример использования ключевого слова в названии: optimizatciia-izobrazhenii.jpg. Причем, чем уникальнее будет его название, тем лучше.

Далее нам необходимо сделать уникальным само изображение. Это легко делается поворотом его на 15 градусов в любой плоскости с помощью редактора и обрезанием.

Редакторов много, в том числе и онлайн, но я использую Adobe Photoshop. Менее 15 градусов будет  не эффективно.

povorot_kartinki

Помещение поверх картинки какой-то надписи или другого изображения НЕ ДЕЛАЕТ его уникальным, так как поисковые системы давно научились это распознавать.

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

После «уникализации» необходимо проверить ваше творение в сервисе: tineye.com

Большую роль играет и размер или вес картинки. Так как ее БЫСТРАЯ ЗАГРУЗКА будет намного приятней пользователю, она занимает меньше места на сервере. Скорость загрузки документа с изображением также сказывается на его ранжировании поисковыми системами, а значит и всего вашего ресурса.

Оптимизированное изображение может уменьшиться в размерах с 5мб до менее 20кб  практически БЕЗ потери его качества. Делается это также с помощью редакторов.

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

Ни к чему загружать на сервер картинку с огромным размером, а потом делать из нее посредством WordPress маленькую размером 150px/150px.

В среднем ширина страницы блогов составляет 600px. Если загрузить  картинку с пропорциями  800px/500px, то такое изображение, конечно, не поместится на страницу, и чтобы вставить его, придется менять размер непосредственно в редакторе WordPress,  а это нам совсем не нужно.

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

Для тех, кто не использует средний размер изображений можно отключить их сохранение и это уменьшит  количество дубликатов и нагрузку на блог. Заходим в Админ-панель -> Параметры -> Медиафайлы и рядом со строчкой — «Средний размер» ставим 0.

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

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

За исключением случаев, когда вам нужно прозрачность фона, лучше использовать jpg формат, но нужно смотреть, искать баланс.

sgatieОбязательно нужно использовать инструмент редактора по уменьшению качества изображения (для gif количество цветов).

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

Есть несколько сервисов, показывающих уровень   оптимизации изображений, например, вот несколько: gtmetrix.com, developers.google.com  Они показывают, насколько еще можно оптимизировать ваш сайт, в том числе изображения.

Все, наше изображение готово к загрузке на сервер. В случае, если вы загружаете на сайт НЕ на платформе WordPress, где все это делается в автоматическом режиме, то ОБЯЗАТЕЛЬНО пропишите размеры в теги <height>  и <width>.

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

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

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

teg_titleНо это еще не все. Теперь необходимо сделать две вещи ОЧЕНЬ важные для   оптимизации. Это заполнить атрибут ALT и заголовок (title) для изображения.

Как вы уже знаете, тег alt, это текст (альтернативный) отображаемый, если пользователь отключает на странице изображения. Заголовок (title) это текст, показываемый пользователю при наведении мышкой на изображение.

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

Эти теги должны быть РЕЛЕВАНТНЫ тексту вокруг них и в идеале содержать все те же ключевые слова.

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

Поэтому в качестве заголовка (title) я советую использовать короткую фразу из близлежащего текста, отражающую смысл изображения, но не более 7-8 слов.

Но как бы вы не оптимизировали, делайте это удобным именно ДЛЯ посетителя, так как поведенческие факторы посетителя также играют огромное значение для поисковых систем. Если посетитель заходит на сайт, где написано одно, нарисовано другое, а в тегах третье, то исход будет очевиден…

Не советую для   оптимизации изображений использовать какие-либо плагины, так как работы и так немного, а кроме вас лучше не сделает никто. КАЖДАЯ манипуляция с оптимизацией изображений добавит вам трафика! Не ленитесь это делать. Потраченные на это 2 минуты, поверьте, стоят того…

Да, и напоследок, не забудьте проверить не запрещено ли у вас индексирование изображений в файле robot.txt ))))

Удачи вам! До скорых встреч на страницах блога VyacheslavDanilov.ru


Вам также понравится...

Смотри и удивляйся:
Десерт

*посмотреть еще ролик можно обновив страницу в браузере

4 комментария

  1. Здравствуйте, Вячеслав! Спасибо за очень полезную информацию по оптимизации изображений на блоге. я раньше не уделяла этому внимания, т.е единственное, что я делала — это искала подходящую картинку для статьи, на этом вся оптимизация изображения была закончена. Скажите, пожалуйста, можно-ли в старых статьях оптимизировать уже имеющиеся изображения по Вашим рекомендациям, или нужно поменять изображения на новые? Спасибо!

    • Вячеслав Данилов:

      Здравствуйте Ирина, мне сложно сказать о возможности оптимизировать изображения, которые у Вас уже есть на сайте, но только из-за того, как давно вы ведете блог. Если этих фотографий не больше 100, то это нужно сделать в обязательном порядке. Вы сразу ощутите, как увеличится скорость загрузки страниц и со временем увеличится трафик, так Ваш рейтинг в поисковых системах повысится. И теперь старайтесь при каждой загрузке изображения его оптимизировать, тем более, что это минутное дело. Сделайте себе привычку, которая будет приносить Вам дополнительный доход. Удачи!

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

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

Добавить комментарий

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