Как оптимизировать изображения на сайте: практические рекомендации от названия до микроразметки

12.10.2021

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

Содержание:

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

2. Требования к изображениям на сайте:

• Формат
• Качество
• Размер и вес
• Хранение

3. Как сжать изображение без потери качества?

• Десктопные программы
• Мобильные приложения
• Онлайн-сервисы

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

• Название
• Хранение на хостинге
• Расположение в тексте
• Бэклинки
• Метатеги для изображений
• Карта изображений на сайте
• Микроразметка
• Уникальность изображений

5. Где взять уникальные изображения для сайта?

6. Выводы

Зачем оптимизировать изображения на сайте?

Оптимизация картинок на веб-ресурсе упрощает считывание с него информации поисковыми алгоритмами и повышает комфорт пользователей. В контексте изображений SEO-работы решают такие задачи:

• Ускорение загрузки;
• Индексация картинок поисковыми системами;
• Повышение юзабилити.

В прошлом году Google внедрил обновление Core Web Vitals. Теперь скорость загрузки страницы — один из важнейших факторов ранжирования. Выражается он метрикой LCP (Largest Contentful Paint) — время прорисовки самой большой картинки на экране. 

Узнать скорость загрузки страниц и проанализировать факторы, которые на это влияют, можно в сервисе Google Pagespeed Insights. Введите в поле необходимый URL, и система не только предоставит отчет, но и даст рекомендации по увеличению скорости загрузки страницы.

Второй показатель Core Web Vitals, который влияет на место в поисковой выдаче, называется CLS (Cumulative Layout Shift). Он учитывает смещения объектов на странице во время ее загрузки. Чтобы его минимизировать, прописывайте размеры изображения в CMS.

Требования к изображениям на сайте

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

Формат

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

• JPEG, JPG. Joint Photographic Experts Group — формат подходит для фотографий с широким цветовым спектром. При сжатии картинки теряется качество: мелкие детали пропадают, становятся размытыми. На изображениях с большим количеством объектов при сжатии на 25-30% разница практически незаметна.
• PNG. Portable Network Graphic — хороший формат для логотипов, значков и маленьких изображений. Поддерживает прозрачность. PNG-файлы сжимаются без потери качества. Это значит, что цифровые фото в этом формате будут дольше загружаться на странице, чем минималистичная графика. 
• GIF. Graphic Interchange Format — формат, похожий на PNG, но с возможностью анимировать изображение. Обладает относительной прозрачностью — вы можете сделать прозрачным любой цвет, но по всей картинке, а не на отдельном участке. Подойдет для значков, иконок, логотипов. 
• SVG. Scalable Vector Graphics — формат для изображений векторной графики. Технология позволяет масштабировать картинки без потери качества. Формат хорош для диаграмм, логотипов и значков. 
• WEBP. Это формат разработанный в Google специально для ускоренной загрузки изображений на веб-ресурсе. Он сжимает картинки на 25-30% без видимой разницы. Сжатие работает лучше, чем в JPG за счет использования более новой технологии. Недостаток формата в поддержке: с WebP не работает WordPress, браузер Internet Explorer, большинство ресурсов не распознают его при попытке загрузки изображения через пользовательский интерфейс.

Константин Борисенко, Project-менеджер в Webpromo

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

В версии WordPress 5.8 уже встроена поддержка WebP, что упрощает работу и не требует установки специального модуля для конвертирования изображений”

Качество

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

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

Размер и вес

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

Важно! Изображения будут загружаться быстрее, если прописать для них размер в CMS.

Хранение

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

Для экономии места на домене при использовании большого количества изображений воспользуйтесь сервером CDN — Content Delivery Networks, сеть доставки контента. Это ускорит загрузку картинок путем их кэширования — при открытии страницы на сервере CDN создается копия изображения, адаптированная под экран пользователя. В дальнейшем при каждом последующем посещении страницы на экране отразится именно CDN-копия.

Как сжать изображение без потери качества?

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

Десктопные программы

Рассмотрим подробнее программное обеспечение для сжатия графики без потери качества:

Caesium

Утилита работает с форматами картинок JPG, PNG (24-битный формат) и BMP. Загрузите файл, укажите папку для сохранения результата и выберите приоритет качества. Чем он меньше, тем сильнее будет сжатие. Но можно оставить и 100%. Мы тестировали JPG, и без потерь уменьшили вес изображения на 78% и таким образом оптимизировали картинку.

Light Image Resizer

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

В настройках есть вкладка, посвященная оптимизации картинки. Максимальный эффект от сжатия можно получить, включив на этой вкладке опцию “Оптимизация сжатия JPEG” или “Оптимизация файлов PNG с помощью OptiPNG” в зависимости от формата изображения.

Нам удалось сжать картинку без видимой разницы на 65.5%:

Adobe Photoshop

Многие маркетологи, работающие с контентом, уже используют эту программу. Помимо широкого спектра возможностей в графической обработке утилита имеет интерфейс “Save for WEB”, предназначенный для оптимизации картинок перед размещением их на веб-ресурсе.

Photoshop в процессе сжатия и оптимизации картинок жертвует их качеством, но при правильной настройке потери минимальны и невооруженным взглядом их трудно заметить. Нам удалось оптимизировать изображение и сжать на 42%, без видимой разницы.

Мобильные приложения

Мобильные приложения на Android и Apple будут полезны тем, кому удобнее работать с гаджетами:

Image Compressor

Приложение предельно простое в использовании: достаточно только выбрать изображение, и оно моментально будет сжато и сохранено в галерее. В настройках присутствует только 1 опция — уровень качества. По умолчанию ползунок стоит на 80%, и сдвинуть его можно только в платной версии. Однако, потеря вида в 20% на итоговых картинках не столь заметна. В ходе теста файл был сжат на 75.2%.

PicTools

Простое и функциональное приложение. Позволяет сжимать, обрезать, вращать, конвертировать и оптимизировать картинки. Перед сжатием нужно выбрать уровень качества: при 60% визуально разница едва заметна, а вес уменьшился на 83.7%.

Photo Compress 2.0

Кроме стандартного набора функций — сжатие, обрезка и изменение размера картинок, программа обладает встроенным инструментом для обработки фото. При уровне качества 80% удалось сжать файл на 73.6% без видимых последствий для оптимизированного изображения.

Онлайн-сервисы

Если нет желания и времени устанавливать софт на ПК или гаджет, воспользуйтесь готовыми инструментами онлайн:

Iloveimg

Работа с сервисом не предусматривает вообще никаких настроек. Вы просто загружаете изображение, нажимаете кнопку “Сжать”, и ожидаете, когда результат сохранится в накопителе. Можно работать сразу с несколькими файлами.

Compressor

Бесплатная версия сервиса работает с изображениями весом до 10 мб. Обладает красивым интерфейсом сравнения исходной картинки и финальной версии. Менять размер файла без потери качества можно только с форматами JPG и PNG.

Resize Pixel

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

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

Для того, чтобы оптимизировать картинки на веб-ресурсе, недостаточно сделать их легкими. Страница загрузится быстрее, но это не единственный аргумент для SEO. Хотите вывести сайт в ТОП — обрабатывайте изображения комплексно.

Название

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

• Используйте латиницу. Многие CMS некорректно работают с кириллицей, поэтому в URL вместо “чайник.jpg” отобразится кодировка “%D1%87%D0%B0%D0%B9%D0%BD%D0%B8%D0%BA”. Назовите картинку “chajnik.jpg”, и проблем с отображением в адресной строке не возникнет.
• Дефис вместо пробелов. Пробел в строке URL будет закодирован, и пользователи увидят на месте разрывов непонятное им обозначение “%20%”. Вместо “metallicheskij chajnik.jpg” назовите картинку “metallicheskij-chajnik.jpg”. Поисковые системы считывают дефис как пробел.
• Избегайте спецсимволов: %, , #, {, }, ^, |, — согласно меморандуму  RFC 2396 они считаются “опасными” (поскольку их используют в технических целях, например, как разделители в URL). Такие символы будут закодированы.
• Дайте изображению в виде названия релевантное картинке ключевое слово. Тогда поисковые системы будут индексировать его, что благотворно скажется на ранжировании. 

• Добавляйте конкретику. Размещая на ресурсе интернет-магазина музыкальных инструментов фото гитар, прописывайте в названиях картинок модели полностью:

Онлайн-сервис Транслит генератор URL-адресов облегчит написание имени при оптимизации изображений. Он заменяет символы кириллицы на латиницу в соответствие с правилами веб-разработки — убирает “опасные” знаки и вставляет вместо пробелов дефис.

Хранение на хостинге

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

Расположение в тексте

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

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

Важно! Текст на оптимизированной картинке не имеет непосредственного влияния на SEO, так как алгоритмы поисковых систем его не индексируют.

Бэклинки

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

Например, бэклинк на картинку “grafik-prodazh-2020.jpg” должен выглядеть примерно так: “Обратите внимание на график продаж в 2020-м году нашего филиала…”.

Метатеги для изображений

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

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

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

Для оптимизации картинок на странице полезно заполнить метатег title. Он отвечает за текст, который пользователь увидит, наведя курсор на изображение. Прописанный title повышает юзабилити веб-ресурса. Оба метатега выглядят вот так:

Подробнее о том, как прописывать теги:

Карта изображений на сайте

Некоторые картинки загружаются на веб-ресурс через Javascript. Поисковые системы не находят такие файлы самостоятельно. Для того, чтобы они могли быть проиндексированы, веб-мастера вставляют в HTML-код сайта карту изображений. Подробнее о ее составлении можно почитать в поддержке Google.

Создать sitemap для изображений можно вручную (прописав соответствующий HTML-код), или с помощью сервиса Free image sitemap generator.

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

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

Для микроразметки оптимизации картинок используют словарь shema.org, который позволяет внести в код дополнительные данные о содержимом изображения: категория, цена и наличие. Проверить правильность итогового HTML-кода можно в валидаторе разметки shema.org.

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

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

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

Где взять уникальные изображения для сайта?

Наполнить веб-ресурс уникальными качественными изображениями можно своими силами, или за деньги. Платные источники:

• Фотостоки: shutterstok, depositphotos, Adobe Stock. Предоставляют контент за подписку. Пользователь платит фиксированную сумму в месяц, и ему предоставляется ограниченное количество изображений в зависимости от тарифа. Минимальный пакет — 10 файлов.

• Заказать у дизайнера на бирже фриланса. Ищите исполнителей на freelancehunt. Подойдет для графической прорисовки, рендеров, 3d-визуализации.
• Нанять фотографа. Отличный вариант для интернет-магазинов — делать фото товаров.

Бесплатные источники:

• Фотостоки: PEXELS, PIXABAY, UNSPLASH.

• Поиск по картинкам в Google. В настройках выберите лицензию Creative Commons — авторы позволяют использование картинок со ссылкой на источник.

• Старинные гравюры и исторические фотографии. Картинки, которым больше 70 лет, не являются объектом авторского права.

Выводы

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

1. Сжимайте изображения, чтобы увеличить скорость загрузки страниц.
2. Используйте уникальные картинки и оптимизируйте их для повышения в ранжировании.
3. Заполняйте мета-теги ключевыми фразами для привлечения дополнительного трафика через поиск картинок.
4. Сделайте изображения адаптивными для корректного отображения на мобильных устройствах.
5. Регулярно проверяйте страницу в Google Pagespeed Insights для своевременного обнаружения проблем со скоростью и быстрого их решения.

Также читайте другие материалы в блоге Webpromo:

• Почему бренды выбирают мобильную рекламу Facebook для продвижения во время пандемии?;
• Чек-лист E-A-T факторов для сайта медицинских услуг;
• Лидогенерация: 3 способа эффективного продвижения лендинга;

И подписывайтесь на наш Telegram-канал про маркетинг.