Оптимизация изображений для сайта. Пошаговая инструкция

Содержание:

• Зачем размещать картинки на сайт?
• Влияние изображений на сайте на SEO
• Зачем нужна оптимизация изображений для сайта?
• Как выявить неоптимизированные картинки?
• Базовые условия для размещения изображений на сайте
  • Как сжимать изображения для оптимизации сайта?
  • Выбираем форматы изображений: JPEG, PNG или WebP?
• Описательные имена файлов изображений: секрет понимания для поисковиков и юзеров
  • Как правильно называть файлы изображений?
  • Что будет, если переименовать изображение на сайте?
• Применение метатегов Alt и Title
• Подпись изображений для улучшения индексации и вовлечения пользователей
  • Как правильно писать подписи к изображениям?
• Микроразметка изображений на сайте
• Что еще стоит внедрить для оптимизации изображений?
• Рекомендации для изображений в карточках товаров
• Чек-лист оптимизации изображений для сайта: пройдитесь еще раз по графике

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

Зачем размещать картинки на сайт?

Фотоконтент выполняет ряд функций, влияющих на восприятие ресурса юзерами и поисковиками.

• Привлечение внимания и удержание посетителей. Релевантные изображения в хорошем качестве помогают задержать пользователя на странице, заинтересовать его и побудить к дальнейшему изучению контента. Представьте себе длинный, монотонный текст без единой иллюстрации. Вероятность того, что пользователь дочитает его до конца, крайне мала. Изображения же разбивают текст на читаемые фрагменты, делают его более привлекательным и запоминающимся.
• Улучшение понимания контента. Инфографика, диаграммы, схемы, иллюстрации – все это помогает визуализировать данные, сделать их более понятными и доступными. Вместо описания процесса работы сложного механизма в нескольких абзацах, можно просто показать это на схеме. Это не только экономит время пользователя, но и повышает вероятность того, что он правильно усвоит информацию.
• Создание эмоциональной связи. Визуальный контент обладает огромной силой воздействия на эмоции. Правильно подобранные изображения на сайте могут вызывать у пользователя определенные чувства и ассоциации, формируя тем самым положительное впечатление о бренде. Фотографии счастливых людей, использующих ваш продукт, вызывают у потенциальных клиентов желание приобрести и испытать те же эмоции.
• Продвижение. Поисковые роботы по изображениям определяют, релевантен ли контент на сайте запросам людей в поисковике.

Влияние изображений на сайте на SEO

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

Зачем нужна оптимизация изображений для сайта?

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

1. Ускорение загрузки страниц. Как уже упоминалось, скорость загрузки сайта – один из ключевых факторов SEO и опыта юзеров. Быстрая загрузка не только снижает показатель отказов, но и стимулирует посетителей к совершению целевых действий. Улучшайте конверсию и повысьте прибыльность сайта за счет оптимизации изображений.
2. Экономия места на сервере. Неоптимизированные изображения занимают много места на сервере, что приводит к дополнительным расходам на хостинг.
3. Выход в топ. Оптимизированные изображения – это двойной удар по SEO: они повышают релевантность контента для поисковых роботов и значительно ускоряют загрузку страниц, что критически важно для высокого рейтинга в Google и других поисковых системах.
4. Положительный опыт юзеров. Молниеносная загрузка, яркие изображения и контент, бьющий точно в цель, – вот что превращает случайных посетителей в преданных клиентов и взрывает конверсию. Инвестируйте в UX.

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

Как выявить неоптимизированные картинки?

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

Для этого запустите парсинг сайта в Screaming Frog. Программа соберет данные обо всех страницах и медиафайлах. Перейдите в раздел «Images – All» в правой панели навигации. Здесь собрана информация об изображениях, найденных на сайте. Отсортируйте список изображений по убыванию размера. В результате вы получите упорядоченный список всех изображений вашего сайта, начиная с самых тяжелых. Это позволит быстро определить те файлы, которые требуют оптимизации для улучшения производительности веб-ресурса.

Базовые условия для размещения изображений на сайте

Один из важных пунктов – релевантность изображений контенту, который они сопровождают. Бессмысленные и неуместные картинки путают пользователя и снижают его интерес к вашему сайту. Картинки должны дополнять содержимое страницы, иллюстрировать его основные идеи и помогать посетителю усвоить представленную информацию.

Изображения должны быть четкими, яркими и высокого разрешения. Размытые, пиксельные или низкокачественные изображения могут отпугнуть посетителей и создать впечатление несерьезного подхода к делу. Убедитесь, что используемые изображения соответствуют разрешению экрана, на котором они будут отображаться. Нет смысла загружать изображение с разрешением 5000×3000 пикселей, если оно будет отображаться на сайте в размере 500×300 пикселей. Это только увеличит размер файла и замедлит загрузку страницы.

Рекомендованные размеры картинок для интернет-ресурсов: 200-300Кб. Более крупные изображения могут значительно замедлить загрузку страниц, особенно на мобильных устройствах.

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

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

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

Возьмите на заметку любой из этих способов:

• Онлайн-сервисы: TinyPNG, ImageOptim, Compressor.io, Squoosh, Kraken.io, Optimizilla — простые и удобные приложения для легкой работы с изображениями.
• Специальные приложения для редактирования. Photoshop, GIMP — позволяют более тонко настраивать параметры сжатия и качество.
• Плагины для CMS. Например, для WordPress можно взять инструменты Smush, Imagify, ShortPixel, EWWW Image Optimizer. Они в автоматическом режиме подгоняют картинку для загрузки на сайт.

Выбираем форматы изображений: JPEG, PNG или WebP?

Определяясь с форматом изображений для сайта важно учитывать скорость загрузки, качество картинки и ее назначение. Разберем три часто используемых: JPEG, PNG и WebP, их преимущества и области применения.

JPEG можно выбирать, когда нужен компактный размер фото, а PNG подойдет для логотипа, графики или изображений с прозрачным фоном. Что касается самого современного формата WebP, гарантирующего самое высокое качество при наименьших размерах, то его рекомендуется использоваться в качестве базы. А для устаревшего ПО предусмотреть альтернативные версии в JPEG (для фотографий) и PNG (для графики с прозрачностью). Результат? Быстрая загрузка сайта, улучшение пользовательского опыта и рост позиций в поисковиках.

Описательные имена файлов изображений: секрет понимания для поисковиков и юзеров

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

Как правильно называть файлы изображений?

• Вставьте в имя файла ключевые запросы, описывающие содержание фото. Например, если на изображении изображен кот, сидящий на окне, то назвать файл можно «kot-sidit-na-okne.jpg».
• Чем конкретнее имя файла, тем лучше. Не короткое «kotik.jpg» , а смысловое «britanskiy-kotik-sidit-na-okne.jpg».
• Разделяйте слова в имени файла с помощью дефисов (-). Не ставьте пробелы или подчеркивания.
• Имена файлов должны быть написаны строчными буквами.
• Не включайте в названия спецсимволы: !, @, #, $, %, ^, &, *, (, ), +, =, ~, , |, \, {, }, [, ], :, ;, ‘, «, <, >, ?, /.
• Старайтесь придумывать не слишком длинные имена. Оптимальная длина до 50 символов.

Пример:

• Плохо: IMG00023.JPG
• Хорошо: britanskiy-kotik-sidit-na-okne.jpg

Что будет, если переименовать изображение на сайте?

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

Применение метатегов Alt и Title

Помимо имени файла, очень важными являются атрибуты alt и title, которые добавляются в HTML-код изображения на сайте.

Атрибут Alt — это не просто строчка кода, а мощный инструмент для:

• Улучшения SEO. Google и Yandex активно сканируют атрибут alt, чтобы понять, что изображено на картинке и насколько оно релевантно поисковому запросу. Оптимизируя alt, вы помогаете поисковикам лучше индексировать изображения и поднимать их в выдаче.
• Повышения доступности. Для пользователей с нарушениями зрения, использующих программы чтения с экрана, атрибут alt является единственным способом «увидеть» изображение. Четкое и информативное описание в alt обеспечивает доступность контента для всех.

Содержание атрибута alt должно быть кратким и точным описанием изображения. Не используйте общие фразы типа «картинка» или «изображение». Опишите, что именно на картинке. Можно включать в описание ключевые слова, но без переспама.

Плохой тег alt:

• <img src=’logo.jpg’ alt=’Логотип’>
• <img src=’krasiviy-sad.jpg’ alt=’Сад, ландшафтный дизайн, деревья, цветы, трава, красота’>

Удачные примеры alt:

• <img src=’logo.jpg’ alt=’Логотип компании ‘Зеленый Сад’ с изображением яблока’>
• <img src=’krasiviy-sad.jpg’ alt=’Красивый сад с ухоженным газоном и цветущими розами в ландшафтном дизайне’>

Атрибут title нужен для предоставления дополнительных данных об изображении пользователям. Содержание атрибута title отображается во всплывающей подсказке при наведении курсора на изображение. В тег также можно включать ключевые запросы юзеров. Но не дублируйте тег alt, нет смысла повторять текст из alt в title. Используйте title для предоставления новой информации.

Примеры title:

• <img src=’ceo.jpg’ alt=’Иван Петров — генеральный директор компании ‘>
• <img src=’product.jpg’ alt=’Красное платье с цветочным принтом’>

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

Подпись изображений для улучшения индексации и вовлечения пользователей

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

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

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

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

Примеры подписей к изображениям на сайте:

• Рис. 1: Диаграмма роста продаж компании за последние три года
• Генеральный директор компании «Синяя Волна» Иван Петров на конференции по маркетингу
• Красное платье с цветочным принтом – идеальный выбор для летнего образа

Микроразметка изображений на сайте

Микроразметка – способ структурировать данные на сайте, чтобы помочь поисковым системам лучше понимать содержание страниц. Микроразметка картинок указывает поисковикам, что именно на картинке, и предоставляет им дополнительные данные. А еще микроразметка:

• Способствует продвижению в топ поисковой выдачи.
• Позволяет изображением отображаться в расширенных сниппетах (rich snippets) в поисковой выдаче, привлекая еще больше внимания потенциальных посетителей.
• Дает посетителям возможность быстро и легко найти на сайте то, что их интересует, благодаря чему укрепляется лояльность и их пользовательский опыт.

Существует несколько способов использования микроразметки для изображений. Наиболее распространенные – это применение Schema.org и JSON-LD. Разберем на примере Schema.org.

Вариант кода:

<div itemscope item type=’http://schema.org/ImageObject’>

<img src=’product.jpg’ alt=’Красное платье’ itemprop=’contentUrl’>

  <span itemprop=’name’>Красное платье с цветочным принтом</span>

  <span itemprop=’description’>Идеальное платье для летнего отдыха</span>

</div>

Описание:

• <div itemscope itemtype=’http://schema.org/ImageObject’> Тег обозначает, что мы размечаем объект типа «Изображение» (ImageObject) в соответствии со словарем Schema.org.
• <img src=’product.jpg’ alt=’Красное платье’ itemprop=’contentUrl’> – Атрибут itemprop=’contentUrl’ указывает на URL-адрес изображения. Важно, чтобы атрибут alt был также заполнен, как описано выше.
• <span itemprop=’name’>Красное платье с цветочным принтом</span> – Атрибут itemprop=’name’ указывает на название изображения.
• <span itemprop=’description’>Идеальное платье для летнего отдыха</span> – Атрибут itemprop=’description’ указывает на описание изображения.

После добавления кода проверьте его через инструменты Google Rich Results Test  и  Schema Markup Validator. ПО покажет, верно ли вы реализовали микроразметку, и укажет на возможные ошибки.

Что еще стоит внедрить для оптимизации изображений?

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

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

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

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

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

Следите за производительностью на регулярной основе. Проанализировать можно в Google PageSpeed Insights или GTmetrix.

Рекомендации для изображений в карточках товаров

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

Рекомендуется использовать в каждой карточке по несколько изображений. Это позволяет покупателям рассмотреть товар со всех сторон и получить полное представление о его внешнем виде.

• Подбирайте белый/серый или какой-то наиболее нейтральный фон. Белый или серый фон позволяет сосредоточить внимание на продукте и избежать отвлекающих элементов.
• Фотографии должны соответствовать названию, описанию товара. Изображения должны точно отражать характеристики товара, указанные в названии и описании.
• Товар должен быть показан полностью, пусть они занимает большую часть пространства карточки. Убедитесь, что товар полностью виден на изображении.
• Должны быть дополнительные фотографии, на которых видно, как товар выглядит в использовании. Покажите товар в действии, чтобы клиенты могли представить, как он будет выглядеть в их жизни. Например, покажите одежду/обувь на модели, а если это мебель, покажите ее в интерьере.
• Применяйте zoom-эффект. Позвольте клиентам увеличить фото, чтобы рассмотреть детали товара.

Не рекомендуется использовать:

• Черно-белые изображения. За исключением случаев, когда это является частью дизайна или стиля товара.
• Картинки с рамками. Рамки мешают изучить детально товар.
• Некачественные фото. Размытые, плохо освещенные или низкого разрешения фотографии могут отпугнуть покупателей.
• Надписи на изображениях, например, цена или водяной знак. Они мешают рассмотреть товар и могут выглядеть непрофессионально. Исключение составляют случаи, когда надпись является частью самого продукта, к примеру, принт на футболке.

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

Чек-лист оптимизации изображений для сайта: пройдитесь еще раз по графике

• Выбирайте правильный формат (WebP – в приоритете).
• Оптимизируйте вес и размеры.
• Настраивайте адаптивные картинки.
• Прописывайте alt и title.
• Применяйте ленивую загрузку.
• Внедряйте CDN для более быстрой загрузки.
• Добавляйте микроразметку.

Оптимизация изображений для сайта – комплексный процесс, который требует внимания к деталям. Грамотное применение метатегов title и alt, микроразметка, сжатие, грамотный подбор формата и остальные способы, описанные в этом гайде, положительно повлияют на SEO-продвижение, повысят конверсию и вовлечение посетителей. Оптимизация – постоянный процесс, поэтому держите на контроле и вовремя обновляйте картинки, чтобы они соответствовали текущим условиям.