Изображения на сайте не просто иллюстрируют текст, но и влияют на трафик. Если картинки долго загружаются или залиты в плохом качестве, это негативно скажется на поведении пользователей. Правильная оптимизация поможет этого избежать — пользователь часто не вчитывается в текст, а скроллит страницу, и качественная иллюстрация привлекает его внимание.
Оптимизировать изображения нужно, чтобы они меньше весили и быстрее загружались.
Как оптимизировать изображения
Чтобы изображение оптимизировалось, нужно правильно задать формат, качество, размер, атрибуты alt и title, а также подписать картинки, разместить их в sitemap-файл и установить на сайт OpenGraph.
Формат
Google индексирует картинки в форматах JPEG, PNG, GIF, BMP, SVG и WebP. Яндекс — JPEG, PNG и GIF. Подробнее о том, как Яндекс индексирует изображения, можно узнать в справке.
JPEG — подходит для портретных и пейзажных фотографий, где важна цветопередача. Есть также JPEG 2000 и JPEG XR. Они сжимают изображения ещё сильнее, чем обычный JPEG, но пока эти форматы поддерживаются не всеми браузерами;
PNG — для сложных графических элементов, в которых нужно сохранить прозрачность и тени;
GIF — для анимации и мелких элементов: иконок, кнопок и так далее;
BMP — для растровых изображений;
SVG — для векторной графики в логотипах и значках;
WebP — сохраняет высокое качество изображений небольшого размера.
Качество
Чем качественнее будет картинка, тем больше пользователей обратит на неё внимание и тем лучше она проиндексируется.
Следите, чтобы при сжатии графика не испортилась и изображение было привлекательным и чётким.
Размер
От того, какого размера иллюстрация и сколько она весит, зависит скорость загрузки и индексация страницы.
Укажите ширину и высоту изображения в CSS, чтобы поисковик быстрее проиндексировал страницу. Оптимальный размер внутри страницы — в районе 300 px. Если изображение нужно растянуть на всю ширину экрана — 1920 px.
Приемлемый вес картинки — от 200 КБ до 1 Мб. Вес меньше 200 КБ сделает картинку некачественной, а изображение больше 1 Мб уже будет медленно загружаться.
Узнать размер и вес иллюстраций можно благодаря аудиту сайта от Serpstat:
Атрибуты alt и title
Название атрибута alt — сокращение от alternative. Это название изображения, которое покажется на месте картинки, если она не прогрузится. То есть это альтернативная, исходя из названия, информация, которую пользователь узнает об изображении.
Именно благодаря alt картинки попадают в выдачу поисковиков. Название должно содержать в себе три-четыре слова и соответствовать тому, что изображено. Желательно, чтобы в него входили ключевые слова.
Alt — это не то же самое, что название файла. Атрибут прописывается уже в коде, а название — перед загрузкой на сайт. Но назвать изображение тоже нужно правильно. Например, если на иллюстрации — аэропорт Шереметьево, назовите файл SVO-airport.jpg, а не именем, которое присвоила система.
Так alt выглядит в коде изображения
Второй атрибут — title — показывается, если просто навести курсор на изображение, даже если оно прогрузилось. Эта настройка не так обязательна, как alt, но всё же с её помощью картинка может косвенно продвигаться — на изображении с текстом пользователи останавливают внимание чуть дольше.
Так title выглядит на сайте
Подписи
Если alt и title — подписи, которые появляются при каком-то действии, то обычная подпись сопровождает изображение всегда.
Изображение с подписью. Кстати, текст, который вы сейчас читаете — тоже пример подписи
Подписи помогают оптимизировать картинку по двум причинам:
- даже если пользователю лень читать полный текст, при скролле страницы он задержит взгляд на подписях;
- в подпись можно добавить ключевые слова, которые заметит поисковик.
Чтобы подпись помогла не только оптимизации, но и читателю, напишите в ней что-нибудь полезное и не противоречащее иллюстрации.
Sitemap-файл
Sitemap — это карта сайта в виде кода, по которому можно читать, где находятся те или иные объекты. Чтобы поисковики проиндексировали труднодоступные изображения (например, загруженные с помощью JavaScript), их нужно прописать в sitemap-файле в формате XML.
В коде это выглядит так:
Подробнее о том, как настроить sitemap-файл, можно узнать в справках Яндекса и Google.
Разметка OpenGraph
Материалы, опубликованные на сайте, можно продвигать также с помощью соцсетей. Чтобы на него обратили внимание в новостной ленте, пост со статьёй нужно красиво оформить. В этом помогает разметка OpenGraph.
Если OpenGraph есть на сайте, то при публикации в соцсетях автоматически заливается изображение нужного размера, а также правильные заголовок и ссылка. Это повышает привлекательность поста.
Пост со статьёй на OpenGraph
Материал не на OpenGraph опубликуется в соцсети в сжатом виде — если нажать на изображение, оно будет вести на сайт, и картинку не получится посмотреть полностью, не перейдя по ссылке.
Подробная инструкция, как настроить OpenGraph, есть у Яндекс.Помощи.
CDN
Если страница медленно загружается, это может привести к потере аудитории и, как следствие — убыткам. Кроме веса контента, на скорость загрузки влияет географическая удалённость сервера. Чтобы сайт открывался одинаково быстро в любой точке мира, можно использовать сети доставки контента (Content Delivery Networks), которые распределяют нагрузку на один сервер.
Кроме того, CDN улучшает вертикальные поиски — к ним относится поиск по картинкам и видео. Однако поисковик может индексировать страницу с изображением не на вашем сайте, а на том сервере, который закэшировал картинку. Это означает, что фактически изображение расположено не у вас и из-за этого вы теряете трафик.
Чтобы этого не произошло, стоит создать поддомен для CDN и размещать изображения на нём.
Где сжать изображение и не потерять качество
Есть много онлайн-сервисов, которые качественно оптимизируют изображения. Расскажем о нескольких из них.
I love image
Сжимает картинки форматов JPG, PNG и GIF.
Image Compressor
Сжимает одновременно до 20 изображений форматов JPEG и PNG.
EzGIF
Как понятно из названия, этот сервис оптимизирует гифки.
Imagifiy
Позволяет оптимизировать все картинки на сайте сразу.
Compressor
Сервис, в котором можно выбрать — нужно ли искажать качество изображения или нет. Сжимает картинки на 90%.
Вывод
Изображения не просто делают контент разнообразнее, но и помогают сайту ранжироваться. Для этого нужны качественные, нетяжёлые по весу и небольшие по размеру картинки.
Оптимизируя изображения, не забудьте настроить формат, качество, размер, атрибуты alt и title, а также подписать картинки, разместить их в sitemap-файл и установить на сайт OpenGraph.
Сжать иллюстрации можно с помощью сервисов, которые специализируются на разных форматах или расположениях изображений.