Большинство SEO-специалистов и веб-мастеров при оптимизации сайта не обращают особого внимания на оптимизацию изображений. Такая стратегия имеет право на жизнь, но мы рекомендуем уделять внимание изображениям на первых этапах работы с сайтом, потому как они играют большую роль как для поисковой системы, так и для пользователя. Уникальные и качественные изображения могут помочь занять более высокие места в поисковой выдаче по сравнению с конкурентами, если те используют одинаковые и не уникальные изображения, найденные в интернете.

Давайте подробнее разберемся со способами оптимизации изображений на Вашем сайте.

Уникальность изображений

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

Помимо положительного пользовательского опыта, уникальные изображения спасут вас от проблем с авторскими правами. Поисковая система Google весьма строго относится к таким вещам. Если на ваш сайт будет отправлена жалоба, с указанием на неправомерное использование изображения, то такую страницу с большой долей вероятности удалят из индекса и восстановить ее будет очень сложно. Механизм удаления контента из выдачи построен на DMCA (Digital Millenium Copyright Act) - законе об авторском праве в цифровую эпоху. Чтобы узнать, были ли жалобы на ваш сайт необходимо вбить его в поисковой строке в сервисе https://www.lumendatabase.org/

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

На волне того, что поисковая система Google стала обращать больше внимания на скорость загрузки сайта, как никогда актуален вопрос размеров изображений. Также одной из важных причин по которым размер изображений должен быть как можно меньше является то, что большая часть сеансов производится со смартфонов, скорость интернета на которых не всегда достигает больших значений.

В интернете существует огромное количество сервисов, которые помогут вам со сжатием изображений.

Предлагаем рассмотреть пример сжатия изображений различными сервисами:

Первый сервис - https://www.iloveimg.com/

С помощью него удалось уменьшить вес двух изображений на 56%, с 716 Кб до 321 Кб.

Второй сервис - https://tinypng.com/

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

Такие манипуляции можно проводить несколько раз подряд, но рекомендуем делать это аккуратно, так как можно значительно ухудшить качество изображения.

Еще одним неплохим вариантом сжатия изображений могут стать плагины, которые устанавливаются в вашу CMS. Такие плагины сжимают изображения в момент загрузки на сервер и вам не нужно тратить время и усилия на работу со сторонними сервисами. Также некоторые из них предоставляют возможность оптимизировать изображения, которые уже были загружены на сервер ранее.

Примеры таких плагинов на WordPress:


Оценить эффективность каждого из способов сжатия изображений вы можете самостоятельно и подобрать для себя оптимальный.

Формат изображений

Раньше рекомендовалось загружать изображения в форматах PNG, JPEG. Но технологии не стоят на месте и постоянно появляются новые форматы, которые позволяют минимизировать размер изображения с максимальным сохранением качества. На данный момент наиболее актуальными являются AVIF, JPEG 2000, JPEG XR и WebP. Эти форматы лучше других справляются со сжатием изображений, соответственно, изображение весит меньше, страница загружается быстрее - пользователь счастлив. А счастливый пользователь на вашем сайте - это залог высоких позиций.

Самым оптимальным среди перечисленных выше является формат WebP. Единственной проблемой с этим форматом является, что не все браузеры его поддерживают. Так до недавнего времени браузер Safari не поддерживал формат WebP. Но с выходом его 14 версии эта проблема была исправлена. На данный момент все обновленные и самые распространенные браузеры поддерживают WebP, так что стоит в первую очередь обратить внимание именно на него.

Что касается способов перевода всех изображений в этот формат, то есть также несколько вариантов.

Наиболее простым является установка плагина для вашей CMS, который в автоматическом режиме переведет все изображения в формат WebP.

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

Указание размеров изображений

Еще один весьма важный момент для определения пользовательского опыта при работе с вашим сайтом. В 2020 году поисковая система анонсировала запуск Core Web Vitals. Это показатели отображают качество взаимодействия пользователя с вашим сайтом. Одним из этих показателей является CLS - время до полной стабильности страницы. То есть если при загрузке страницы происходят сдвиги каких-то элементов, то это ухудшает пользовательский опыт. Одним из способов избежать крупных сдвигов макета является явно задать размеры изображений с помощью width и height. Подробнее про CLS вы можете почитать в нашей статье по Core Web Vitals.

Если задать размеры изображений явно, то браузеру не придется тратить время на правильное определение их размеров. Он сразу зарезервирует место на странице для картинок и вам удастся избежать крупных сдвигов макета.

Lazy Load

Lazy Load или ленивая загрузка - еще один способ ускорить загрузку видимой части страницы для пользователя. С помощью этой технологии изображения, которые находятся вне видимой части страницы, не загружаются пока это не потребуется. Например, изображения загрузятся при скроллинге страницы. Это дает больше ресурсов для видимой части страницы, что позволяет ей быстрее загрузиться, а чем быстрее загрузится страница, тем больше Google будет доволен вашим сайтом. По ссылке https://web.dev/lazy-loading-images/ можно получить больше информации об этой технологии.

Заполненные Alt

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

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

Также заполненный alt позволяет изображениям вашего сайта выше ранжироваться в поиске по картинками. В определенных нишах, в совокупности с уникализацией изображений это может дать хороший эффект в виде дополнительного трафика на ваш сайт.

Микроразметка

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

Хорошим вариантом разметки изображений является разметка изображения товара. Так, если пользователь будет искать какой-то конкретный товар, зная его название, он увидит ваш сниппет с красивым и уникальным изображением и с большей долей вероятности перейдет на ваш сайт.

Выводы:

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

Комментарии

Комментарии