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

Полная оптимизация изображений для сайта. Оптимизация изображения сайта


Оптимизация изображений для сайта - советы от Яндекс

Приветствую все читателей блога scriptcoding.ru. Сегодня мы затронем такую болезненную для многих вебмастеров тему как SEO оптимизация изображений для сайта и получения по ним трафика…

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

Оптимизация изображений – советы от Яндекса

Что бы картинка на странице была проиндексирована, сама страница тоже должна быть проиндексирована роботом Яндекса. Описание изображения, которое содержится в атрибутах ALT и TITLE позволяет роботу определить, что именно изображено на графическом шедевре, и на основании этого, позволяет ему участвовать в поисковой выдаче. Согласно позиции ПС Yandex: "Изображение, у которого отсутствует описательное содержимое не попадает в поиск, так как его нельзя найти по той или иной ключевой фразе". Индексируются форматы JPEG, GIF и PNG, фоновые изображения и изображения, которые показываются с помощью скриптов, не индексируются.

При индексации графики ПС учитывает три основные факторы:

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

Помимо картинок, которые могут попадать в выдачу справа, иногда бывает так, что рисунки присутствуют непосредственно в самом списке найденных интернет ресурсов, и довольно часто на первом месте. Яша предъявляет ряд требования к таким шедеврам графического искусства:

Хорошо, с тем, какие условия выдвигаются при индексации, а в нашем случае - оптимизация изображений для сайта, мы выяснили, теперь поговорим от подводных камнях…Смотрите, если проанализировать все сказанное выше, то человек наивный сразу пойдет рисовать уникальные шедевры живописи (можно использовать онлайн сервис для рисования, а также для сжатия) и давать им описания, а вот у того, кто любит потормошить собственный мозг может возникнуть путаница: почему в одних случаях нам показывается лента из нескольких картинок, а в других она отсутствует? Действительно, например, по запросу "файловая система Windows" в результатах отсутствует лента картинок, хотя под данную фразу есть много оптимизированных статей, да и оптимизированных изображений не меньше. А дело вот в чем… У Яши есть так называемые "Колдунщики", которые перед формированием результатов обращаются к другим сервисам (видео, карты, музыка и так далее), и уже оттуда будут дополнительную информацию, которую добавляют к найденным интернет ресурсам. Согласно справке по Yandex ситуация выглядит следующим образом: определяется вес запроса в том или ином сервисе, например вес фразы [бритни спирс] в музыке составляет 0,6, в графике 0,3, а в видео 0,1. И, уже исходя из данных результатов, определяется - что добавлять в выдачу, а что нет.

К сожалению, Яндекс не раскрывает своих алгоритмов, и нам остается только предположить, как он учитывает вес ключевика в том или ином сервисы. Лично мое мнение такое: скорее всего, ведется статистика поиска и по другим сервисам, и логично предположить, что если человек часто ищет заданную фразу в рисунках, то стоит добавить в общую выдачу и их, а если что-то мы ищем на картах, то надо добавлять результат оттуда.

Ладно, теперь давайте перейдем к практической стороне вопроса…

Оптимизация изображений для сайта – практическая сторона

Если вы новичок, то у вас возникнет вопрос, что такое ALT и TITLE? Атрибут ALT служит для описания оптимизируемого изображения. Если у человека в браузере отключен показ графики, то на месте изображения будет информация, прописанная в ALT. Например:

<img border="0" alt="[альтернативный_текст]" src="risunok2.jpg">

В данном случае, мы готовим, что хотим показать графический шедевр под именем risunok2.jpg, который лежит в корневой папке интернет ресурса, width и height задают его ширину и высоту.

Атрибут TITLE содержит дополнительную информацию о графическом шедевре, текст, прописанный в TITLE, отображается при наведении на него мышки. Например:

<img border="0" alt="[альтернативный_текст]" title="[подсказка]" src="risunok1.jpg">

В большинстве CMS системах (системы по управлению блогом) данные атрибуты прописываются сразу при загрузке, и seo оптимизация изображений для сайта не составляет труда, вручную это может занять время. По сути, на этом можно было бы поставить точку, но…

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

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

scriptcoding.ru

Оптимизация изображений для сайта. Самый подробный гайд.

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

Так же правильно оптимизированные картинки повысят релевантность вашей страницы по ключу, которому она продвигается. И принесет дополнительный трафик с сервиса «Картинки» поисковой системы.

Поэтому оптимизация изображений — это очень важный момент для оптимизации сайта.

Оптимизация изображений — основные рекомендации

В этой главе я расскажу основные рекомендации по оптимизации картинок для сайта.

Формат изображений

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

Вывод: Нужно прозрачность фона – PNG, если нет, то JPEG.

Размер изображения в разном формате.

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

У многих веб мастеров я замечаю аналогичную ошибку по оптимизации изображения. Они загружают на сайт картинки в исходном размере. Например, картинка отображается на сайте в размере 540 px на 540 px, а загружена картинка в размере в два раза больше 1080 px на 1080 px и уменьшена за счёт свойств CSS. Это очень плохая практика, так как время на загрузку такого изображения уходит в два раза больше, а результат в итоге тот же.

Вес изображения

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

Первый способ: Уменьшить вес изображения с помощью Photoshop. В фотошопе есть способ сохранения файла специально для web. Вызывается он сочетанием клавиш: SHIFT + CTRL + ALT. Оптимальные настройки, которыми я пользуюсь отображены на скриншоте.

Оптимальные настройки оптимизации изображения с помощью Photoshop

Второй способ: Так же можно использовать отличный сервис TinyPNG. Просто загружаете в этот сервис нужное изображение и скачиваете уже оптимизированное. Так же он покажет вам на сколько изменился вес файла. Показано на скриншоте.

Оптимизация изображения с помощью TinyPNG

Имя файла изображения

Имя файла должно состоять из слов, лучше всего использовать ключевые слова, по которым вы продвигаете страницу, так же имя файла должно соответствовать изображению. Для отделения слов используйте символ “-“. Например: plastikovie-okna.jpg .

Тег ALT и TITLE

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

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

Тег ALT

Альт должен состоять максимум из 10 слов и содержать ключевое слово. Но так же он должен соответствовать изображению.

Тег TITLE – это текст, который показывается рядом с курсором мыши, при наведении на изображение. Пример показан на скриншоте.

Тег Title

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

Уникальность

Желательно использовать уникальные изображения, так как все поисковые системы поощряют уникальный контент. Если такой возможности нету, то сделайте изображение из интернета уникальным с помощью фотошопа. Как это сделать я расскажу в следующих статьях.

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

Так же рекомендую прочитать мои статьи по заполнению других мета-тегов: 

Как заполнять Title

Как заполнять description

web-secret.ru

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

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

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

Чтобы написать оптимизированную статью, которая выйдет в ТОП и будет приводить посетителей на ваш сайт, нужно проделать не мало работы – это и подбор ключевых слов, и грамотное написание текста, расположение ключевиков по тексту, правильное заполнение Title, Description и Keywords, грамотное заполнении тегов <h2> — <h6>, правильная оптимизация изображений для статьи и так далее. Рекомендую прочитать статью «Как правильно написать качественную SEO статью».

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

Из этой статьи вы узнаете

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

Но, обращаю ваше внимание на то, что поисковые системы отдают предпочтение статьям, в которых размещены именно оптимизированные картинки.

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

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

Изображение должно быть уникальным

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

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

Если вы в этот текст вставите не уникальные картинки, то процент уникальности статьи в целом значительно снизится. А Вам это надо? Конечно же нет? Мы же с вами хотим написать классную, уникальную статью, которая вылетит в ТОП и будет приводить к нам на сайт посетителей.

Вот чтобы это сделать, нужны уникальные изображения. Наверно большинство из вас сейчас подумали себе: «Ну это все понятно, только где их брать? Где брать эти 100% уникальные картинки?»

Ответ довольно прост. На том же Яндексе или Google. Абсолютно любую картинку можно сделать уникальной. Как? Сейчас отвечу на этот вопрос.

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

Все просто. Поисковые системы не видят же, что там нарисовано на картинке, до такого еще алгоритмы поисковиков не дошли.

Делаем скриншот

Каждое изображение имеет свой цифровой код, по которому поисковые системы и определяют их. Теперь представьте, что роботы поисковиков видят один и тот же цифровой код на нескольких сайтах. Что это значит? Правильно, что одно и то же изображение стоит на нескольких сайтах, а значит оно не уникально.

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

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

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

Поворачиваем горизонтально

Как сделать картинку уникальной? В любом редакторе изображений можно повернуть картинку по горизонтали. Сделать это можно в Photoshop. Для этого выбираем «Файл» → «Изображение» → «Отразить холст по горизонтали»

Повернуть картинку можно в программе Paint. Открываем картинку нажимаем «Изображение» → «Перевернуть горизонтально».

Сделать светлее или темнее

Можно сделать картинку светлее или темнее. Но этот способ подходит далеко не для всех изображений, нужно прибегнуть к кардинальной смене цвета. Открываем файл в нашем любимом Photoshop выбираем «Изображение» → «Коррекция» → «Уровни» и играем с ползунками на уровнях коррекции.

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

Чтобы прямо вообще супер было, пропишите для картинки мета тэги. Для этого нажмите на картинке правой кнопкой мыши и выберите свойства. В открывшемся окне выберите «Подробно». После этого щелкаете мышкой на поле автор, авторские права, дата съемки и так далее. Заполняете своими данными и нажимаете «OK». Так ваше фото, при сео-оптимизации еще и в топ вылезет.

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

Размер изображения не должен быть большим

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

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

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

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

Поэтому, перед вставкой любого изображения в статью, будь то фото или скриншот, его нужно сжать в размерах и подогнать до 50 – 80 кб.

Это можно сделать практически без потери в качестве. Обязательно прочтите статью, в которой я подробно объяснил, как нужно сжимать вес картинок: Как сжать картинку без потери качества

Готово. Идем дальше и разберем следующее

Картинка должна отражать суть

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

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

Я иногда использую изображения такого формата:

Такие изображения конечно платные и я плачу художнику не копейки, но я думаю можно найти на подобие таких и бесплатно.

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

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

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

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

Именно этой фразой я назову одну из картинок, которые вставляю в статью. Обратите внимание на то, что название картинки нужно прописывать на латинице. Если у вас не получается самому переименовывать на латиницу, то совету воспользоваться бесплатным переводчиком: vse-zadarma

Итак, картинку я переименовал. Теперь загружаю её с компьютера на сайт и вставляю в статью

Обратите внимание, что «Заголовок» (он же Title) прописался автоматически, а вот «Атрибут Alt» нужно прописать дополнительно.

Что вообще нужно там писать? Нужно тремя словами описать, что изображено на картинке.

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

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

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

  1. Уникальное изображение
  2. Сжать до размера в 50-80 кб
  3. Название переименовать на латинице
  4. Загрузить на сайт и прописать Title и Alt

Вот и все! Делайте все эти шаги обязательно! Не относитесь к этому легкомысленно, так как это очень важно. Наверно читая эту статью Вам показалось что это все так долго. На самом деле нет. На оптимизацию одного изображения у меня уходит секунд 30-40, не больше. Так что приловчитесь и будете оптимизировать изображения – как семечки щелкать.

На этом я буду статью заканчивать, ведите свои сайты правильно, оптимизируйте и все будет у вас хорошо!

Смотрите также:

7sof.ru

Prostoy-Site | Все права защищены © 2018 | Карта сайта