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

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

Что входит в понятие оптимизации картинок для сайта?

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

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

Правильно выбранный формат в процессе оптимизации картинок — половина успеха. Форматов существует огромное количество, но в повседневной жизни чаще всего используются 4 из них: jpg, gif, png и psd. Давайте посмотрим, в каких ситуациях пригодится каждый из них.

  • jpg (jpeg) — самый популярный формат, позволяющий сжимать изображения, сохраняя при этом плавные переходы цветов. В большинстве случаев (кроме анимации и элементов с прозрачным фоном) для web-страниц следует использовать именно его.
  • gif — широко известный формат для анимированных картинок. Способен без ущерба качеству сжимать изображения до 256 цветов, причем один из цветов можно задать прозрачным.
  • png — сохраняет прозрачный фон, без потерь сжимает файлы, но изображения весят больше, чем в случае использования jpg. Обычно используется именно для элементов с прозрачными деталями.
  • psd — признанный «тяжеловес» среди своих собратьев. Сохраняет слои, использовавшиеся при создании изображения в Фотошопе, поэтому такой исходник очень легко впоследствии редактировать. Данный формат использует специальное сжатие без потери качества, однако он все равно остается самым тяжелым из перечисленных, так что загружать картинки с расширением psd на сайт крайне не рекомендуется.

Качество картинок

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

Отличный ннструмент, например, предлагает Фотошоп. В нем еще при выборе формата можно указать качество, но если требуется самый мощный результат, рекомендую выбрать в меню «Сохранить для Web». Качество картинки, конечно, ухудшится, зато мало какие программы предложат конечный вес меньше полученного здесь.

С другой стороны, Фотошоп не всегда под рукой, да и сжатие без потери качества бывает более приемлемым результатом. На этот случай к вашим услугам множество онлайн-сервисов, простых и быстрых в использовании. Я, например, часто пользуюсь optimizilla.com.

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

Лучше не использовать отдельное указание ширины и высоты (height и width): чем больше строчек кода, тем больше времени уходит на их обработку. По возможности сразу загружайте на сайт готовое изображение, предварительно отредактированное.

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

Название файла

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

«Имена файлов картинок желательно делать осмысленными (т.е. не img_123456.jpg, а ktulhu.jpg) и соответствующими содержанию картинки.»

Кроме того, название файла попадает в url-адрес страницы с изображением. А использование осмысленных url’ов, содержащих ключевые слова — обязательный этап внутренней оптимизации сайта.

Атрибуты title и alt

Грамотно указанные атрибуты alt и title для каждого изображения — еще один шаг к оптимизации. а еще — дополнительный приток трафика из поиска по картинкам.

Alt — это текст, который показывается пользователю, когда по какой-либо причине само изображение недоступно. Однако в первую очередь alt — помощник для поискового робота, который еще не научился воспринимать визуальную информацию и ориентируется на данный кусочек текста.

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

Подпись и расположение

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

Спрайты

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

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

Порядок действий прост:

  1. Создается коллаж из картинок со страницы;
  2. Коллаж подготавливается и сжимается всеми перечисленными выше способами, а затем загружается на сайт;
  3. Каждый раз, когда надо обратиться к изображению, используется свойство background-position, которое покажет не всю картинку, а только ее кусочек, определенный заданными координатами.

Заключение

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

Оставить комментарий

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