Яндекс приглашает на первую в России отраслевую антиконференцию
Previous
выбрать за меня
Продажей видеорекламы на российском YouTube будет заниматься IMHO
Next
оптимизация изображений, фото продукта, фото товара, ecommerce
Интернет-маркетинг

Гид по оптимизации изображений для ecommerce: 10 шагов

Автор: Ия Пфанштиль13.03.2018

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

Оптимизация изображений подразумевает сокращение размера файлов без потери качества, а также подготовку фото к поиску. Вы когда-нибудь задавались вопросом, почему ваши изображения не отображаются в Google картинках, нужно ли добавлять alt описания ко всем изображениям или какая разница между JPEG, GIF и PNG?

В сегодняшней статье мы ответим на эти и многие другие важные и актуальные для многих владельцев интернет-магазинов вопросы. Поехали!

1. Используйте описательные названия

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

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

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

2. Оптимизируйте alt описания

Описание alt – это текстовая альтернатива изображения, которая отображается, если фото не может загрузиться. Его также можно увидеть при наведении курсора на картинку (в зависимости от настроек браузера).

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

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

Также периодически проверяйте ваши страницы на правильность заполнения описаний.

3. Используйте несколько фото для каждого товара

Часто на ecommerce сайтах продукт показывают с разных углов. Используйте для каждого фото отдельные alt описания. Это повысит шансы на привлечение заинтересованной аудитории на сайт.

Секреты создания качественных фото мы раскрываем в статье “Как делать уникальные фото товара: советы профессионалов”.

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

4. Уменьшите размер фото

Знаете ли вы, что:

  • Почти 50% потребителей не будут ждать, пока загрузится ecommerce сайт, и 3 секунд.
  • При этом в мире время загрузки сайтов только увеличивается.
  • Amazon выяснили, что если их страницы начнут загружаться на секунду дольше, они потеряют 1,6 миллиардов долларов в год.
  • Google использует скорость загрузки страницы в качестве фактора ранжирования в своем алгоритме.

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

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

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

Редактирование изображения в фотошоп

Если у вас нет Adobe Photoshop, выберите один из множества онлайн-инструментов для редактирования изображений (PicMonkey, PIXLR, Canva). Также всегда можно воспользоваться бесплатной программой GIMP, который практически ничем не уступает Photoshop.

Какого размера должны быть изображения?

Для ecommerce сайта лучше использовать фото не больше 70 кб. Это бывает непросто, но только так вы сможете обеспечить быструю загрузку страниц.

5. Выбирайте подходящий тип файла

В число самых популярных типов файлов входят JPEG, GIF и PNG.

Качество фото в формате jpeg

JPEG (или .jpg) стал негласным стандартом для изображений в интернете. Этот тип файлов легко сжимать без значительной потери качества.

Качество фото в формате gif

GIF (.gif) файлы более низкого качества и используются для простых изображений, например, иконок. Также этот формат поддерживает анимацию. Эффективно оптимизировать файлы этого типа можно только для простых картинок с несколькими цветами, для фото и сложных изображений он не подходит. На фото выше хороший результат объясняется небольшим размером изображения.

Качество фото в формате png-8

Качество фото в формате png24

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

Вот так выглядит одно и то же изображение весом всего 24 кб в разных форматах:

Сравнение качества фото разных форматов

JPEG, определенно, лучший из вариантов.

При выборе типа файла помните:

  • Чаще всего лучшим выбором для интернет-магазина будет JPEG, этот формат предлагает хорошее качество при меньшем размере.
  • Никогда не используйте GIF для больших фото продуктов. Уменьшить размер получившегося файла будет очень сложно. Выбирайте его только для иконок и элементов оформления.
  • Если вы используете PNG, отдавайте предпочтение PNG-8, а не PNG-24. Этот формат также лучше использовать для маленьких изображений.

Большинство редакторов может конвертировать изображение в любой из перечисленных выше форматов.

6. Оптимизируйте превью

На большинстве ecommerce сайтов используются превью, особенно на страницах категорий. Они позволяют быстро оценить товар и при этом не занимают много места.

Превью в интернет-магазине

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

Что можно сделать?

Максимально уменьшите размер файлов превью, при этом постарайтесь сохранить качество.

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

7. Используйте sitemap для изображений

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

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

Для этого добавьте в файл robots.txt строчку: Sitemap: http://example.com/sitemap_location.xml. Или отправьте карту через Search Console.

У Google есть множество инструкций по публикации изображений, которые помогут вам эффективно оптимизировать свои страницы.

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

8. С осторожностью используйте изображения для оформления

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

О том, как сделать интернет-магазин визуально привлекательным, читайте в статье “Создаем красивый интернет-магазин: 15 советов от экспертов”.

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

  • Для простых картинок и границ используйте формат PNG-8 или GIF. Так вы сможете сохранить качество изображений и при этом уменьшить их до размера в несколько сотен байтов.
  • Если есть возможность, используйте для оформления страниц CSS, а не изображения.
  • Сократите размер фоновых изображений, они могут сильно тормозить загрузку страниц. Для этого, например, можно вырезать середину фото.

9. С осторожностью используете CDN

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

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

10. Протестируйте изображения

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

  • Протестируйте число фото на странице
  • Определите, какие ракурсы предпочитает ваша аудитория
  • Найдите оптимальное количество продуктов для страниц категорий

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

Реакция на статью
поделюсь
20%
интересно
80%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Ия Пфанштиль
Люблю маркетинг, делюсь открытиями.
Комментарии
Оставить отзыв

    You must log in to post a comment

    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Позвольте нам обновлять ваши знания раз в неделю.