Как оптимизировать изображения на сайте. Самое главное

Из надежного источника

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

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

Зачем оптимизировать картинки

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

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

Изображения какого формата использовать

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

JPG/JPEG — лучшее разрешение для детализированных фото, скриншотов, иллюстраций с градиентами и тенями;

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

GIF — формат логотипов, анимированных картинок и динамичных рекламных баннеров. Добавляет изображениям динамики в ущерб качеству;

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

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

Чтобы уменьшить размер графического файла можно воспользоваться специальными компрессорами: Tiny PNG, imagecompressor, Iloveimg, IMGonline и др. Они позволяют незаметно для человеческого глаза уменьшить число оттенков — и тем самым количество битов для их кодирования, удалить лишние метаданные, масштабировать фото и повысить его уникальность.

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

1. Название файлов позволяет поисковику опознать вашу картинку. Оно должно быть максимально релевантным и исчерпывающим — никаких абстракций или случайного набора знаков. Название файла прописывается латиницей. Для автоматической транслитерации картинок на русском языке можно воспользоваться плагинами: Clearfy Pro, Clearfy, Cyr To Lat и др. Все пробелы в длинных названиях заменяем дефисами или нижним подчеркиванием. Если речь идет об интернет-магазине, обязательно стоит указать наименование конкретной модели товара, а не ограничиваться его категорией или брендом. Например: название смартфона для интернет-магазина техники следует прописывать следующим образом: “xiaomi-redmi-note-7-4-64gb-black.jpg”.

Вам также может быть интересно:
Фотография товара, которая продает. Как оформить галерею интернет-магазина?

2. Атрибуты ALT и Title выполняют роль подсказки касательно содержания изображения как для поисковиков, так и для пользователей.

ALT — это альтернативный текст, который будет виден, даже если картинка не прогрузилась. Текст должен укладываться в 150 символов с учетом пробелов, быть информативным и содержать ключевые слова.

Title выводится при наведении курсора на изображение. Он должен максимально емко передавать смысл картинки и отличаться от атрибута ALT. Удостовериться, что для всех изображений на сайте прописаны атрибуты ALT и Title, можно с помощью сервисов Seo Screaming Frog, Netpeak Spider и других автоматизированных решений.

3. Адрес изображения должен быть взаимосвязанным с названием картинки и хорошо считываться пользователем. Такой URL позитивно влияет на ранжирование;

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

5. Анализ Sitemap станет дополнительным преимуществом для ранжирования. Вы сможете проверить, правильно ли проиндексированы изображения, а поисковые роботы — обнаружить даже те картинки, которые иначе остались бы вне их поля зрения (например, при использовании JavaScript). XML-файл для картинок можно создать отдельно, либо обновить существующую общую карту сайта.

6. Микроразметка не требует создания дополнительных файлов и реализуется с помощью тегов, прописанных в коде страницы. В этом помогут семантические словари Schema.org и OpenGraph. Особое внимание следует уделить параметрам Width и Height. Правильная разметка сделает картинки более привлекательными при репосте материала в соцсетях, а также позволит товарам из каталога и картинкам-заставкам видеороликов оказаться на основной странице поисковой выдачи.

7. Уникальность изображений также влияет на ранжирование. Лучше использовать авторский контент — реальное фото или дизайнерский объект станут лучшими иллюстрациями для вашего сайта. Картинки из фотостоков можно уникализировать с помощью фильтров, геометрических макетов Canva или банального изменения ориентации и геометрии в фоторедакторе.

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