Как оптимизировать изображения

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

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

1. Зачем оптимизировать изображения

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

Оптимизация изображений даст такие преимущества:

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

Правильно оптимизированные изображения на сайте принесут пользу как со стороны восприятия поисковыми системами, так и со стороны пользователей.

2. Техническая оптимизация изображений

2.1. Форматы

Существует три наиболее распространённых типа файлов для публикации изображений в сети: JPEG, GIF и PNG.

Google рекомендует использовать такие форматы для конкретных случаев:

• Для фото используйте формат JPG.
• Для создания векторной графики и сплошной заливки подходит формат SVG. Если векторные изображения недоступны, попробуйте WebP или PNG.
• Чтобы отобразить больше цветов и добиться лучшего коэффициента сжатия, выбирайте PNG вместо GIF.
• Для видеороликов используйте тег <video>.

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

2.2. Атрибут alt

Alt — атрибут тега <img>, который помогает поисковикам корректно определять, что именно изображено на картинке. Если изображение не может загрузиться на сайте, то вместо него пользователю отобразится содержимое атрибута alt.

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

Для оптимизации атрибутов alt воспользуйтесь следующими рекомендациями:

• Дайте изображениям максимально лаконичное и точное описание.
• Если вы продаёте товары с номерами моделей или серийными номерами, используйте их в атрибутах alt.
• Не заполняйте атрибуты alt большим количеством коммерческих ключевых слов.

2.2.1. Как проверить наличие атрибута alt у изображений с помощью Netpeak Spider

С помощью краулера Netpeak Spider вы можете найти все изображения без атрибута alt на своём сайте. Для этого:

• Откройте Netpeak Spider, на вкладке «Параметры» в разделе «Контент» отметьте параметр «Изображения». Запустите сканирование сайта.

• Дождитесь окончания сканирования. В случае обнаружения ошибки «Изображения без атрибута alt» кликните по её названию на боковой панели, чтобы ознакомиться с перечнем URL, на которых она присутствует.

• В отчёте «Изображения» будут собраны все URL страниц, на изображениях которых отсутствует атрибут alt.

  

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

Оптимизация размера изображений — это обработка файлов, позволяющая уменьшить размер изображений, сохранив их качество.

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

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

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

2.3.1. Сервисы для оптимизации изображений

Существует множество онлайн и офлайн-сервисов для оптимизации размера изображений. Ниже я покажу три сервиса, которые регулярно использую, и как сжать картинку :)

COMPRESSOR.io

Онлайн-инструмент, с помощью которого вы легко сможете уменьшить вес изображения без потери качества. Поддерживает четыре формата: JPEG, PNG, GIF, SVG. После обработки изображения вы сможете сохранить файл на свой компьютер, в Dropbox или на Google Диск.

Compresser JPEG

Бесплатный сервис, который поддерживает JPEG, PDF и PNG-форматы и позволяет за раз оптимизировать до 20 изображений.

Tiny PNG

С помощью этого сервиса вы можете сжать разом до 20 изображений, вес каждого из которых не должен превышать 5 MB. Tiny PNG может уменьшить вес вашего изображения до -90%.

2.4. Title изображения

Атрибут title — текст этого атрибута появляется при наведении мыши на изображение и не влияет на ранжирование. Главное предназначение атрибута — дать подсказку читателям о содержимом просматриваемого изображения.

Рекомендации по составлению title изображения:

• Title файла не должен быть спамным или содержать малопонятные символы.
• Атрибут title должен полностью отражать содержимое изображения.
• Не стоит прописывать слишком длинное описание изображения — постарайтесь сделать атрибут title лаконичным и понятным для пользователей.

2.5. Адрес изображения

• Название файла с изображением должно соответствовать содержимому картинки.
• Необходимо использовать ЧПУ (человекопонятные) URL, потому что текст из него может учитываться в ранжировании.
• Понятные адреса позитивно влияют на SEO-оптимизацию изображений.

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

Иногда размеченные изображения могут попадать в выдачу.

Кроме того, в поисковую выдачу также попадают изображения товаров интернет-магазинов и картинки-заставки видео.

2.7. Уникальность и авторские права

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

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

При поиске иллюстраций в «Google Картинки» в настройках выберите раздел «С лицензией на использование и изменение», чтобы случайно не воспользоваться чужим изображением.

Существуют также фотобанки, в которых собраны свободные для использования изображения. О них расскажу в последнем разделе поста ;)

2.8. sitemap-image.xml

Вы можете предоставить Google дополнительную информацию об изображениях на страницах вашего сайта. Для этого стоит воспользоваться функциями файла Sitemap — таким образом поисковому роботу Google будет легче найти изображения, которые иначе не получилось бы обнаружить (к примеру, если сайт загружается с помощью JavaScript). Кроме того, этот файл позволит вам указать те иллюстрации, которые обязательно нужно сканировать и индексировать.

Для картинок вы можете создать новый файл Sitemap или обновить уже существующий на вашем сайте. С помощью встроенного инструмент генератор Sitemap в Netpeak Spider можно в несколько кликов генерировать файлы Sitemap на основе рекомендаций Google и Яндекса.

3. Оптимизация картинок для юзабилити

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

Общие рекомендации для удобства восприятия изображений пользователями:

• Не размещайте важный текст на самих изображениях — лучше воспользуйтесь подписями к картинкам.
• Размещайте иллюстрации возле текста, который их описывает, или добавьте под каждым изображением описание (помимо alt). Не стоит размещать изображения скопом в конце страницы.
• Если вы продвигаете сайт, который непосредственно связан с изображениями, вам необходимо максимально позаботиться о том, чтобы у пользователя не возникло никаких проблем с загрузкой ваших картинок.

3.1. Связь с окружающим контентом

Изображения на вашем сайте и остальной визуальный контент должны быть связаны с темой всей страницы. Увидев, что изображения не соответствуют прочитанному тексту, пользователь посчитает ваш сайт некачественным и, скорее всего, уже никогда на него не вернётся. К тому же, Google учитывает качество информации на странице при ранжировании изображений.

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

3.2. Lazy loading

Lazy loading (ленивая загрузка) — это метод, который откладывает загрузку контента во время прогрузки страницы. Таким образом загружаются лишь файлы, которые видно на экране страницы, а все остальные файлы остаются «за кадром», пока пользователь не доскроллит страницу до них.

Метод ленивой загрузки позволяет ускорить загрузку страницы. Кроме того, она полезна для страниц, где много изображений загружаются вне первого экрана (посты на блоге, портфолио).

Рекомендации Google по реализации lazy loading

Изображения, используемые в элементах <img>, чаще остальных нуждаются в ленивой загрузке. При ленивой загрузке таких изображений используется JavaScript для проверки того, находятся ли они в области просмотра. Вам необходимо убедиться, что поисковые роботы будут видеть эти изображения.

3.3. Изображения на адаптивных сайтах

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

Адаптивными страницами обычно удобнее пользоваться, так как их можно просматривать на различных устройствах. Более подробные рекомендации о работе с изображениями на адаптивном сайте читайте в рамках курса «Основы веб-дизайна».

Изображения размещаются на адаптивной странице с помощью тегов <img srcset> или <picture>. Стоит помнить, что не все браузеры и поисковые роботы распознают эти теги, поэтому советую указывать резервный URL в качестве значения атрибута в <img src>.

4. Бесплатные фотостоки

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

KABOOMPICS

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

Особенность фотостока: вы можете искать фото в соответствии с нужной цветовой гаммой.

Gratisography

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

Особенность фотостока: есть поиск по категориям.

Подводим итоги

Оптимизация изображений — важный процесс, напрямую влияющий на восприятие сайта поисковыми роботами и пользователями.

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

• JPEG, GIF и PNG — основные форматы изображений, воспринимаемые поисковиками.
• Атрибуты img alt и title для картинок обязательны к заполнению. Сделайте их максимально лаконичными и точно описывающими ваше изображение.
• У вас должно быть разрешение на использование уникальных изображений.
• Воспользуйтесь специальными сервисами для сжатия размера картинок без потери качества. Это оптимизирует скорость загрузки вашего сайта.
• Позаботьтесь о связи изображений с окружающим текстовым контентом.

Расскажите в комментариях, как вы оптимизировали изображения для проектов, которые непосредственно связаны с большим количеством изображений? :)