Низкая скорость загрузки сайта влияет на ранжирование, ухудшает юзабилити и снижает конверсию — обычно пользователи не хотят ждать и уходят к конкурентам. Одна из распространенных причин такой проблемы — изображения с большим весом и слишком высоким разрешением. Рассказываем, для чего еще нужна оптимизация картинок и как их правильно сжимать, чтобы не потерять качество.
Зачем нужна оптимизация изображений
Главная цель оптимизации изображений — улучшение скорости работы сайта,без потери качества изображений. Рассказываем подробнее о задачах.
Влияние оптимизации изображений на скорость загрузки сайта
Большой размер картинок увеличивает общий вес страницы — из-за этого скорость загрузки снижается, особенно это заметно на слабых устройствах и при медленном мобильном интернете. В первую очередь это актуально для тех страниц, где много графического контента и помимо изображений есть анимация, видео, всплывающие баннеры — например, как в случае с визитками или одностраничниками. Также большой вес сильно снижает скорость сайтов с автоматической подгрузкой списков — это часто используется в интернет-магазинах и каталогах.
Влияние оптимизированных изображений на SEO
Низкая скорость загрузки плохо влияет на ранжирование. Google оценивает юзабилити по принципу “mobile first”, то есть в первую очередь анализирует, удобен ли сайт для пользователей мобильных устройств. Большой вес чаще всего замедляет загрузку именно на телефонах — алгоритм определяет сайт как некачественный и не пропускает в ТОП выдачи.
Кроме этого, если страницы загружаются медленно, контент просто не успевает индексироваться и становится незаметным для поисковика. Изображения не попадают в раздел “Картинки”, из-за чего сайт лишается дополнительного органического трафика.
Улучшение пользовательского опыта с помощью оптимизации изображений
Сайты с медленной загрузкой неудобны — если страница при переходе из поисковой выдачи открывается дольше 5-7 секунд, подавляющее большинство пользователей отказывается ждать и закрывает ее, переходя к конкурентам. Если такая ситуация встречается при переходе между разделами внутри ресурса, посетители могут быть более терпеливы, но у них будет складываться отрицательное отношение и накапливаться раздражение ко всей компании, из-за чего вероятность совершения целевого действия снижается, конверсия падает.
Как выбрать правильный формат изображения
Разные форматы изображений имеют разное качество скорость загрузки — рассказываем, в каких случаях использовать каждый из них.
Особенности форматов: JPEG, PNG, GIF, WEBP
На сайтах обычно используются следующие форматы изображений.
- JPEG/JPG. Самый распространенный формат растровых картинок, который поддерживает более 16 миллионов цветов. Поддерживается всеми устройствами, легко сжимается для уменьшения веса, при этом внешне не теряет качество.
- PNG. Также отображает большое количество цветов и легко сжимается, но, в отличие от JPEG, поддерживает прозрачность. При этом вес изображения будет больше, поэтому их лучше использовать тогда, когда нужна картинка без фона.
- GIF. Имеет ограниченный диапазон цветов и поддерживает прозрачность, обычно используется только для вставки анимированных изображений. Качество картинки при этом будет ниже.
- WEBP. Этот формат разработан специально для размещения в интернете — он позволяет создавать изображения с прозрачностью и небольшим весом, которые поддерживают миллионы цветов. Главный недостаток — до сих пор WEBP открывают не все браузеры, также они некорректно скачиваются на компьютер и не открываются без конвертации.
Когда использовать каждый формат для оптимальных результатов
При оптимизации нужно проследить, чтобы каждое изображение имело нужный формат:
- JPEG — когда нужна статичная картинка;
- SVG — для иконок и изображений с прозрачностью без фона, лучше использовать как альтернативу PNG;
- GIF — для анимации.
WEBP позволяет размещать картинки высокого качества с небольшим весом. Он не универсален, поэтому используется реже и требует настройки. Для этого нужно указать, чтобы WEBP-формат отображался там, где это возможно, а браузеры, не поддерживающие его, получали JPG-вариант.
Использование форматов изображений для ретины
Retina — это дисплеи от Apple, которые отличаются высокой плотностью пикселей, из-за чего картинка на них выглядит более яркой и насыщенной, чем на обычных экранах. Другие бренды также внедряют в свои устройства дисплеи подобного типа, на них переходит все больше производителей.
Но из-за высокой плотности пикселей некоторые изображения выглядят на них размыто. Один из методов оптимизации — использование векторного формата SVG. Также можно прописать в коде сайта команды-подсказки, которые помогут браузеру понять, какую версию изображений отображать в зависимости от типа дисплея.
Устройства с Retina дорогие, их доля на рынке небольшая, поэтому оптимизировать каждый сайт под них не нужно. Обычно этим занимаются бренды премиум-сегмента и ресурсы, где основная ЦА — дизайнеры, которые чаще всего используют такие дисплеи.
Сжатие изображений
Основной способ оптимизации изображений — это сжатие: таким образом уменьшается разрешение и вес. Главная задача в этом случае — сохранить качество картинки и не ухудшить ее визуальное восприятие.
Использование онлайн инструментов для сжатия
При сжатии в первую очередь нужно понять, до каких параметров уменьшать изображение. Пиксельные картинки на сайте оттолкнут пользователей так же, как и медленная загрузка, особенно в тех случаях, когда они являются важной частью контента — например, в карточках интернет-магазина или в портфолио с примерами работ. Обычно иллюстрации, размещенные в тексте, сжимают до 600-1000 пикселей по меньшей стороне — такой размер позволяет значительно снизить вес, но не нарушить качество визуально.
Если картинок на сайте немного, их можно сжать вручную и поштучно. Также такой способ работает тогда, когда страница только наполняется контентом — изображение сначала оптимизируют, а потом уже размещают. Можно воспользоваться редакторами Paint или Photoshop, а также онлайн-инструментами, например:
- TinyJPG;
- CompressJPG;
- Iloveimg;
- ShrInc Media;
- Aiseesoft.
Если при сжатии картинки качество теряется, можно воспользоваться функцией улучшения фото через нейросети — они помогают повысить четкость без увеличения веса. Этот способ самый долгий, его используют тогда, когда не сохранился исходник или “облегчить” изображение и сохранить визуал по-другому не получается.
Локальные методы сжатия и оптимизации
Для массового сжатия картинок можно воспользоваться внутренними инструментами, например, для WordPress — плагины TinyPNG, ShortPixel, Optimus или для Joomla — расширения Prizm Image, Imgen, Image Recycle. Также существуют программы для автоматической оптимизации, которые можно подключать к сайтам, которые созданы вручную, а не на конструкторе.
Еще один метод оптимизации — посмотреть, нужны ли вообще такое количество картинок и релевантны ли они тексту. Большое количество стоковых фото и иллюстраций, которые не добавляют контенту пользы и ценности, лучше не сжимать и не преобразовывать, а просто удалить. Вместо них можно добавить несколько полезных изображений — например, инфографик, скриншотов или авторских фото, все зависит от типа страницы. Кроме этого, излишнее количество картинок мешает читаемости.
Оптимизация атрибутов изображений
У изображения есть атрибуты <alt> и <title> — они также учитываются поисковиками и влияют на ранжирование, поэтому подлежат оптимизации.
Оптимизация alt-текста для улучшения SEO
Alt — это альтернативный текст, который описывает происходящее на картинке: благодаря нему алгоритм поисковика “видит” изображение и индексирует его. Также описание может появляться и у пользователя — например, при медленном интернете, когда графический контент долго не прогружается.
Alt должен соответствовать следующим требованиям:
- не более 250 символов с пробелами, оптимально — 3-5 слов;
- достоверно описывать происходящее на изображении;
- включать ключевые слова с популярным запросом.
Хороший alt-текст помогает вывести изображение на первые страницы сервиса “Картинки” в поисковиках, поэтому желательно конкретизировать и вписывать такой текст, который могут искать пользователи: например, не “стол в углу комнаты”, а “стол письменный с навесной полкой”, не “девушка с красивым букетом цветов”, а “букет из красных роз и гортензий”.
Правильное использование title и других атрибутов
Title — текст, который появляется при наведении курсора на картинку. Он может быть более развернутым, чем alt, и в первую очередь должен быть полезным для пользователя, который его прочитает. Требования следующие:
- не более 250 символов с пробелами, оптимально — 3-8 слов;
- содержательный и полезный текст, дополняющий смысл картинки;
- не дублирует alt;
- содержит ключевой запрос в естественном вхождении; например, не “шарф мохер ручная работа”, а “мохеровый шарф ручной работы”.
Примеры title — “Письменный стол с навесной полкой подходит для рабочего места школьника”, “Букет из роз и гортензий — универсальный подарок по любому поводу”.
Заключение
Подведем итоги:
- неоптимизированные картинки увеличивают скорость загрузки сайта, это снижает его позицию в поисковой выдаче и ухудшает пользовательский опыт: если страница открывается больше 3-5 секунд, ее с большой вероятностью закроют;
- важно правильно использовать форматы — JPG для статичных фото, GIF для анимаций, PNG для картинок без фона, WEBP поддерживается не всеми браузерами и применяется реже;
- для сжатия картинок можно использовать онлайн-инструменты, плагины или расширения в конструкторах или сторонние программы, главное, чтобы при уменьшении размера не портилось качество;
- при оптимизации важно обратить внимание на то, уместны ли картинки — они должны дополнять текст и иметь смысловую нагрузку, если изображения не несут пользы их лучше удалить;
- важно правильно заполнить атрибуты alt и title, а также подпись — они должны достоверно описывать происходящее на фото и содержать ключевые запросы, так можно попасть в ТОП-выдачи Google или Яндекс Картинок.