Изображения - очень важный элемент любого сайта. Порой на странице присутствует несколько десятков изображений (например, в каталоге товаров) и даже для современного скоростного интернета это может создать некоторые трудности.
Зачем оптимизировать изображения на сайте?
Есть две главные причины, по которым необходимо уделить внимание оптимизации картинок:
- Сокращение веса web-страницы и, как следствие, увеличение скорости ее загрузки;
- Дополнительная информация для поисковых систем о релевантности данной страницы определенной группе запросов.
Сжатие изображений без потери качества
Первое, на что нужно обратить внимание - это соответствие блока верстки и размера изображения в нем. Если короче, то картинка должна быть такого же размера, что и блок, в который она помещена. Второе - это сжатие изображения без потери или с минимальными потерями качества.
Вы можете задать вопрос о целесообразности этого дела, но за нас ответит поисковая система Google. Давайте посмотрим на результаты анализа страницы при помощи инструмента Google PageSpeed Insights. Проводить демонстрацию я буду на примере сайта одного из наших клиентов. Страница, изображения на которой мы будем оптимизировать, является страницей каталога и содержит 20 карточек товаров и, соответственно, 20 превью изображений. Ниже представлен результат до проверки.
Результат для мобильных устройств:
Результат для компьютеров:
Обратите внимание на выделенные пункты. Основная проблема со скоростью загрузки из-за изображений. Размеры картинок не соответствуют размерам блоков и весят намного больше, чем это необходимо.
Теперь необходимо оптимизировать изображения, чтобы минимизировать их влияние на скорость загрузки страницы. Для начала сожмем изображения, чтобы их размеры соответствовали высоте блока. В большинстве популярных CMS для этих целей есть стандартный функционал, который при загрузке изображения позволяет создавать уменьшенную копию для анонса. Далее нам необходимо сжать изображение с минимальными потерями качества. Можно, конечно, сжимать вручную при помощи того же Photoshop, но когда вопрос стоит о тысячах картинок, то нужен соответствующий инструмент. По этому вопросу на Habr’е есть замечательный обзор программ для сжатия изображений. При помощи этой публикации и опытным путем была выявлена наиболее удобная и эффективная программа - FileOptimizer.
Вернемся к нашей подопытной web-странице и посмотрим на результаты сжатия уменьшенных копий для анонса товарных карточек.
Согласитесь, впечатляющий результат. А если учесть, что изначально средний вес картинки на этой странице составлял 75 Кбайт, то мы уменьшили его в 10 раз. Теперь загрузим эти изображения обратно на сайт и посмотрим на результат анализа страницы при помощи Google PageSpeed Insights.
Для мобильных устройств:
Для компьютеров:
Как видите, теперь наши изображения полностью соответствуют рекомендациям Google. Скорость загрузки страницы значительно увеличилась и пользователей с медленным соединением больше не будет беспокоить долгое ожидание, а значит количество отказов сократится.
Оптимизация изображений под поисковые запросы
Второй аспект касается того, чтобы наши изображения соответствовали конкретной группе запросов в глазах поисковых систем. Для этого используется атрибут тега < img> alt=”значение”. Для большинства случаев достаточно прописывать главный ключевой запрос страницы + слово “фото / картинка”. Если, допустим, наша страница должна соответствовать группе запросов “семена земляники”, то alt для картинки будет выглядеть так: alt=”семена земляники фото”.
Для чего это нужно? Это позволит ранжироваться в поисковой выдаче изображений и получать оттуда немного трафика, что будет совсем не лишним. Ну и главная задача alt’а - намекнуть поисковой системе о релевантности страницы той или иной группе запросов. Также рекомендуем заполнять атрибут title=”значение” для всплывающей подсказки при наведении на изображение.