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

НАВИГАЦИЯ

  1. Зачем оптимизировать изображения для сайта
  2. Вес иллюстраций
  3. Уникальность
  4. Как уникализировать изображение
  5. Размеры изображений
  6. Оптимизация иллюстраций для поисковой системы

Зачем оптимизировать изображения для сайта

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

 

  • Не умею пользоваться графическими программами PhotoShop, CorelDraw и т.д.;
  • Ничего не смыслю в размерах, разрешении, уникальности и других параметрах, присущих иллюстрациям;
  • Не понимаю зачем всем этим заниматься, если можно взять любую понравившуюся картинку в интернете и вставить ее в страницу своего сайта;
  • Зачем тратить время и силы на картинки, когда главное — это текст. Ведь именно он приносит львиную долю трафика на интернет ресурс, а картинки это дело второстепенное. Да и заменить их можно в любое время…

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

Вес иллюстраций

Первое на что обратите внимание — это вес изображения. Большие картинки грузятся грузятся долго, что существенно замедляет скорость загрузки страниц. Из-за этого большинство пользователей покидают страницу сайта в первые 5-15 секунд. Таким образом растет показатель отказов, а это прямой путь к ухудшению ранжирования и потери позиций в поисковой выдаче. 

Когда посетитель заходит на сайт, то львиную долю трафика занимают именно графические рисунки. Текст — это ничтожно малая часть веса. Он исчисляется десятками килобайт [в лучшем случае]. В то время, как одна оптимизированная под web картинка весит минимум 100 кб. Конечно, есть и другие файлы, которые могут замедлять загрузку. Например, неиспользуемый CSS код, JavaScript или внешние файлы. Но об этих понятиях мы поговорим в будущих статьях.

Я предлагаю вам простой в реализации способ оптимизации иллюстраций:

  • Уменьшение размеров фотографий с помощью Adobe PhotoShop [Файл — Экспортировать — Сохранить для web];

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

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

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

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

Количество результатов, необходимое для 99% уникальности — от 1 до 20. При превышении этого показателя хотя бы на несколько пунктов, рисунок считается не уникальным.

Как уникализировать изображение

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

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

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

Размеры изображений

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

  • Создаете пустую страницу с текстом на вашем сайте;
  • Делаете скриншот той области, в которой размещен текст вашей статьи;
  • Нажимаете правой мышкой на скриншот;
  • Далее [Свойства — Подробно — Разрешение];
  • В пункте с разрешением находите ширину скриншота.

Его приблизительное значение может варьироваться от 600 до 800 пикселей (бывают шаблоны с большим размером ширины). Высота определяется вами самостоятельно. Кстати, существуют различные плагины для WordPress (если вы работаете на нем), которые позволяют изменить размер иллюстраций, сделать их кликабельными и с увеличением.

Оптимизация иллюстраций для поисковой системы

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

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

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

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