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

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

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

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

Правильно выбранный формат в процессе оптимизации картинок — половина успеха. Форматов существует огромное количество, но в повседневной жизни чаще всего используются 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, которое покажет не всю картинку, а только ее кусочек, определенный заданными координатами.

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

Заключение

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

© 2016, blogstu.ru. Все права защищены. Копирование материалов сайта запрещено.

Поделиться:
Сохранить:

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

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

пять × 4 =