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

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

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

Именно поэтому данную статью я хочу посветить вопросу оптимизации изображений.

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

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

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

• оптимизированные изображения позволяют ускорить загрузку сайта;
• наличие правильно оптимизированных изображений положительно сказывается на поисковой оптимизации всей статьи в целом;
• оптимизированные изображения могут привлекать дополнительных посетителей из поисковых систем (поиск по картинкам).

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

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

Первый вопрос обычно звучит следующим образом: «А откуда вообще брать изображения для своего интернет-ресурса?».

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

• использование фотографий, сделанных собственноручно.
• скриншоты экрана монитора с последующим добавлением вспомогательных элементов и поясняющего текста:
  
• создание уникальных изображений в графическом редакторе (я использую Photoshop):
  
• редактирование (изменение либо добавление определенных деталей) с помощью графического редактора (опять же Photoshop) скаченных из интернета картинок:
  

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

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

Созданное изображение должно представлять из себя компромисс между качеством и размером (объемом занимаемой памяти).

Наиболее востребованными форматами изображений, используемых в WEB, являются следующие:

• JPG — целесообразно применять для фотографий и картинок с плавными переходами яркости и цвета. Сжатие изображения осуществляется с потерей качества;
• GIF — часто применяется для анимированных изображений, но может использоваться и для статичных. Поддерживает прозрачность. В формате не более 256 цветов сжатие осуществляется без потери качества;
• PNG — более совершенный формат, чем GIF, но без поддержки анимации. Также поддерживает прозрачность. Используется для изображений без оттенков и тонов. Сжатие осуществляется без потери качества.

Какой формат в каком случае использовать решать вам. Главное чтобы изображение получилось четким и занимало максимально малый объем памяти.

Для уменьшения размера файла изображения я использую графический редактор Photoshop, с помощью которого открываю созданное одним из перечисленных выше методов изображение, иду в меню Файл → Сохранить для Web:

И в появившемся окне определяю нужные параметры (можно изменить формат, качество, размер изображения):

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

Также одним из способов уменьшения размера файла изображения является использование online сервиса под названием PunyPNG:

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

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

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

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

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

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

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

В случае использования WordPress в качестве системы управления контентом для вашего интернет-ресурса, для прописывания мета-тегов изображения необходимо воспользоваться возможностями плагина All In One Seo Pack, обзор функционала которого производился в этой статье.

Прописываем информацию следующим образом:

Готово! После этого можно вставлять полученное оптимизированное изображение в статью вашего сайта.

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

Удачи вам и до встречи!