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

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

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

Сначала выделим форматы изображений, которые допустимы для публикации на сайтах: JPEG, PNG, GIF, SVG. Важно выбирать правильный формат в соответствии с назначением изображения, чтобы не создавать «тяжелых» картинок там, где это не нужно.

SVG формат подходит для логотипов, графиков, значков — там, где есть линии и геометрические фигуры. Векторная картинка одинаково четко смотрится и на экране смартфона, и на баннере 3х6.
Формат GIF хорош для иконок, одно- и двухцветных картинок, клипарта, анимированных изображений.
PNG применяется для иллюстраций, в которых важно четко прорисовать мелкие детали, а также для изображений с прозрачностью.
JPEG применяется для все других изображений, фотографий и картинок с текстом.

JPG, PNG, GIF — это растровые форматы, SVG — векторный. Растровые изображения состоят из пикселей, а векторные из точек. Оптимизация векторных и растровых изображений отличается.

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

Векторные изображения делаются на основе XML разметки. То есть они не рисуются в графическом редакторе, а пишутся с помощью кода и представляют собой документ. Чтобы уменьшить размер такого документа, из него нужно удалить ненужные данные: комментарии и скрытые элементы. Делается это в программах SVGo, SVG Cleaner и других.Дополнительно можно уменьшить размер SVG файла с помощью GZIP сжатия.

Разработка SEO-сайтов с пожизненной гарантиейСоздаем невероятные SEO-сайты, оптимизированные по 69 параметрам уже на этапе разработки

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

Самое главное, что нужно сделать со всеми изображениями на сайте — это привести их реальный размер на сервере и отображаемый на сайте к одному значению. Например, в папке /images лежит изображение размеров 1200х1200, а на странице отображается картинка 600х600 — такие параметры задал в CSS стиле разработчик. Получается, браузер зря загружает лишние данные. Поэтому перед тем, как загружать изображение на сервер, нужно заранее сделать его в нужном размере.

Есть несколько способов уменьшить размер растрового изображения.

1 способ: сжать картинку.
Если у изображения немного снизить качество, на 20-30%, то никто этого не заметит, а вот вес картинки значительно уменьшится. Человеческий глаз не способен увидеть разницу между обычным и сжатым изображением. Визуально они выглядят одинаково хорошо. Поэтому нет смысла публиковать на сайте картинки в 100% качестве, вполне достаточно 70-75%.

Сжать изображение можно в любом графическом редакторе. Например, в Photoshop сжатие проводится с помощью функции "Сохранить для Веб" ("Safe for Web"). В диалоговом окне нужно выставить качество не 100%, а поменьше. Для интернета достаточно качества 70-75%.

Есть специальные сервисы оптимизации изображений для сайта, которые могут сжать картинку онлайн. Например, Squoosh от Google, Compressor.io, JPEGmini.

Если нужно оптимизировать сразу много картинок, то нужно использовать программы и сервисы для пакетной оптимизации изображений для сайта, например CompressJpeg (можно загрузить до 20 фотографий), Compressnow, TinyJPG, TinyPNG, OptiPNG. PunyPNG.

2 способ: изменить глубину цвета.
Для отображения некоторых картинок в интернете не нужна полная палитра, бывает достаточно 256 цветов. И благодаря снижению глубины цвета можно уменьшить вес картинки в 2 раза. При этом визуально разница не будет заметна.

3 способ: дельта-кодирование.
Можно применить для картинок, где много областей с похожими цветами. Человеческий глаз не различает мелких различий в оттенках, поэтому если установить в компрессоре разницу между пикселями, то в этих блоках схожих цветов она будет нулевая, и пиксель будет весить всего 1 бит.

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

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

Название изображения должно быть осмысленным и на латинице. Например, не IMG_197.jpeg, а stul_ofisnyi.jpeg.
Метатег title должен быть заполнен на русском и описывать то, что изображено на картинке. Этот текст появится при наведении курсора.
Атрибут alt тоже нужно обязательно прописать. Если изображение по какой-то причине не отобразится на сайте, то пользователи увидят вместо него текст из alt. Включите в него ключевые слова — это поможет поисковикам понять, что изображено на картинке и оценить релевантность контента.

Проверить, оптимизированы изображения на сайте, можно с помощью сервиса Google PageSpeed Insights. По URLсайта он выдаст отчет о скорости загрузки элементов, в том числе и выдаст предупреждения, если изображения не оптимизированы должным образом.