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

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

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

Есть две главные причины, по которым необходимо уделить внимание оптимизации картинок:

  1. Сокращение веса web-страницы и, как следствие, увеличение скорости ее загрузки;
  2. Дополнительная информация для поисковых систем о релевантности данной страницы определенной группе запросов.

Сжатие изображений без потери качества

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

Вы можете задать вопрос о целесообразности этого дела, но за нас ответит поисковая система Google. Давайте посмотрим на результаты анализа страницы при помощи инструмента Google PageSpeed Insights. Проводить демонстрацию я буду на примере сайта одного из наших клиентов. Страница, изображения на которой мы будем оптимизировать, является страницей каталога и содержит 20 карточек товаров и, соответственно, 20 превью изображений. Ниже представлен результат до проверки.

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

Результат для мобильных устройств:

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

Результат для компьютеров:

результаты неоптимизированных изображений для компьютеров

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

Теперь необходимо оптимизировать изображения, чтобы минимизировать их влияние на скорость загрузки страницы. Для начала сожмем изображения, чтобы их размеры соответствовали высоте блока. В большинстве популярных CMS для этих целей есть стандартный функционал, который при загрузке изображения позволяет создавать уменьшенную копию для анонса. Далее нам необходимо сжать изображение с минимальными потерями качества. Можно, конечно, сжимать вручную при помощи того же Photoshop, но когда вопрос стоит о тысячах картинок, то нужен соответствующий инструмент. По этому вопросу на Habr’е есть замечательный обзор программ для сжатия изображений. При помощи этой публикации и опытным путем была выявлена наиболее удобная и эффективная программа - FileOptimizer.

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

Сжатие изображений фото

Согласитесь, впечатляющий результат. А если учесть, что изначально средний вес картинки на этой странице составлял 75 Кбайт, то мы уменьшили его в 10 раз. Теперь загрузим эти изображения обратно на сайт и посмотрим на результат анализа страницы при помощи Google PageSpeed Insights.

Для мобильных устройств:

Оптимизированные изображения для мобильных устройств фото

Для компьютеров:

Оптимизированные изображения для компьютеров фото

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

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

Второй аспект касается того, чтобы наши изображения соответствовали конкретной группе запросов в глазах поисковых систем. Для этого используется атрибут тега < img> alt=”значение”. Для большинства случаев достаточно прописывать главный ключевой запрос страницы + слово “фото / картинка”. Если, допустим, наша страница должна соответствовать группе запросов “семена земляники”, то alt для картинки будет выглядеть так: alt=”семена земляники фото”.

Для чего это нужно? Это позволит ранжироваться в поисковой выдаче изображений и получать оттуда немного трафика, что будет совсем не лишним. Ну и главная задача alt’а - намекнуть поисковой системе о релевантности страницы той или иной группе запросов. Также рекомендуем заполнять атрибут title=”значение” для всплывающей подсказки при наведении на изображение.