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

0
81

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

Статья из блога АРТИЗАН-ТИМ

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

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