Полный гайд по оптимизации картинок на сайте

В целом основные требования к созданию изображений сводятся к таким параметрам: формат, качество и размер картинок.

Google может индексировать типы изображений в форматах BMP, GIF, JPEG, PNG и WebP, а также SVG.

JPEG — используйте этот формат для фото;
PNG — для графики, проще говоря, для всего, что нарисовал дизайнер;
SVG — для векторных изображений.

Появились и новые форматы, такие, как WebP и JPEG-XR. Их преимущество в том, что они действительно меньше весят, но, к сожалению, пока не все браузеры поддерживают эти форматы. Например, JPEG-XR поддерживает только IE, а WebP — Chrome, Opera, Android. В связи с этим я не рассматриваю их. Но выбор за вами :)

Для индексирования картинок в Яндексе стоит выбрать такие форматы: JPEG, GIF и PNG. Кроме правильного выбора формата, стоит учесть, что изображения, которые загружаются на странице при помощи скрипта, Яндексом не индексируются.

Это изображение попало в результаты поиска по запросу «белые собаки», что не соответствует реальному содержимому из-за неправильного описания и содержания текста статьи. Более подробно о том, как правильно писать описание к изображению будет описано дальше в этой статье.

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

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

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

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

Для быстрого анализа изображений на одной странице можно воспользоваться расширением Serpstat Website SEO Checker.

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

Чтобы найти неполадки со скоростью загрузки и оптимизацией изображений для мобильных, используйте модуль «Аудит сайта» Serpstat. Помимо самих проблем вы найдете подсказки для их исправления.

Делайте интернет быстрее, и гугл вам скажет «Спасибо!» Ловите несколько облачных сервисов для сжатия картинок.

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

Существуют аналоги для Windows: FileOptimizer, Online interface, pngquant.

Gzip: Настройте веб-сервер для сжатия JPEG-файлов в формат Gzip.

PageSpeed: Для Nginx и Apache доступен модуль PageSpeed для сжатия данных на уровне сервера. Рекомендации по установке здесь.

Для отслеживания и анализа размера изображений рекомендую использовать онлайн-инструменты Pingdom и PageSpeed Insights. Имеет смысл использовать оба варианта, но если вам нужно сосредоточиться на одном, все же лучше полагаться на Google Pagespeed Insights.

Поскольку Google — это тот, кто сканирует контент и оценивает рейтинг вашего сайта. Рассмотрим пример использования PageSpeed Insights. Анализируя страницу, инструмент дает перечень рекомендаций о ресурсах, которые стоит уменьшить и насколько.

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

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

Например, example.com/images/clothes/blue-jeans.jpg.

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

Также не размещайте важную информацию на изображении, поскольку браузер не сканирует текст на картинках, и таким образом не поймет ее суть.

Тег Alt (альтернативный текст) используется для описания того, что находится на изображении. Он играет важную роль в SEO-оптимизации изображения и вот почему:

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

Рекомендую использовать ключевые запросы в описании и не забывайте об информативности. Дайте емкое и хорошо описывающее изображение картинку (обычно alt состоит из 125 символов).

Подготовим пример alt для этой картинки с тортом (надеюсь, вы не очень голодны) ↓

Не забывайте также, переспам ключевыми словами — плохо для оптимизации, в частности и для alt картинок. То есть этот текст будет неправильным: «шоколадный торт шоколадный десерт сливки украшение рецепта».

В дополнение к основной карте сайта добавьте карту изображений sitemap-image.xml

Создание карты сайта для изображений подходит только для Google, поэтому если вы планируете продвижение и в Яндексе, в sitemap.xml создайте два файла с картой изображений сайта и стандартную карту со списком страниц с названием, к примеру, sitemap-pages.xml.

При этом пропишите соответствующую строку в файл robots.txt для бота Яндекса, карту только со страницами сайта. А для Googlebot — файл sitemap.xml, в котором содержатся ссылки на обе карты страниц и изображений.

Пример:
User-agent: Googlebot
Sitemap: https://example.com/sitemap.xml
User-agent: Yandex
Sitemap: https://example.com/sitemap-pages.xml

Добавьте микроданные ImageObject. Добавляя специальные теги к изображениям, вы помогаете поисковым системам различать контент и отображать его подходящим и полезным образом.

Пример внедрения микроразметки http://schema.org/ImageObject

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

Яндекс, например, способен увидеть, откуда была украдена картинка, какие копии были созданы, где именно они были размещены и мн.др. Подробнее смотрите в видео от Яндекса. Если вы неуверены в уникальности контента на вашем сайте, это легко проверить c помощью сервиса Tineye.

Или можно посмотреть была ли такая картинка ранее проиндексирована в поисковых системах. Например:

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

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

Самый простой способ — использовать поиск Google по изображениям. Обратите внимание, что Google показывает изображения с разрешением и без разрешения на использование.
Фильтруем так:

Еще один способ создать уникальную картинку — найти изображение в любом фотобанке (например, Unsplash) и немного изменить в любом фоторедакторе (например, Canva). Canva содержит множество макетов и элементов, некоторые из них бесплатны. Просто комбинируйте несколько изображений с этими элементами.

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

• Установите Reddit Enhancement Suite для браузера.
• Открыть страницу и выберите необходимый раздел.

Например, если нужна картинка с тортом, открываем раздел DessertPorn.

• Выберите картинку.

Если вы установили Reddit Enhancement Suite, то легко сможете просматривать изображения в полном размере, не открывая его в новой вкладке. Вот как это работает:

Для эффективной оптимизации изображений следует применять все вышеописанные методы в комплексе:

При создании и оптимизации картинок руководствуйтесь главным принципом: качество и ценность контента — вот что важно для поисковым систем. Успехов в оптимизации!