10
лет в электронной коммерции
8 800 3020 886
ГлавнаяБлогЗачем интернет-магазину оптимизация изображений?

Зачем интернет-магазину оптимизация изображений?

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

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

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

«Тяжелая» станица тормозит работу интернет-магазина. Когда время загрузки составляет более трех секунд, пользователи чаще всего уходят, не дождавшись ее окончания. Каждый ушедший покупатель — упущенная прибыль. Например, в Amazon выяснили, что если их страницы начнут загружаться на секунду дольше, они потеряют 1,6 миллиарда долларов в год. Отказы ухудшают поведенческие метрики и больно бьют по позициям интернет-магазина при ранжировании поисковыми системами.

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

График зависимости конверсии от скорости загрузки страницы

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

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

Плюсы оптимизации изображений:

  1. Ускорение загрузки страниц.
  2. Увеличение конверсии.
  3. Увеличение показателей Google Pagespeed Insights.
  4. Снижение отказов, улучшение поведенческих факторов на сайте.
  5. Как итог первых четырех пунктов — улучшенное ранжирование сайта в поисковой выдаче.
  6. Объем файлов существенно уменьшается, а это означает экономию места на хостинге.

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

Есть несколько вариантов технической оптимизации изображений.

1. Уменьшить размер файла

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

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

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

Сжимать изображения можно с помощью специальных онлайн-сервисов и программ: TinyPNG / TinyJPEG, Compressor.io, Kraken, JPEGmini, Optimizilla, Shortpixel, Resize Photo. Последняя программа особенно хороша, так как она позволяет вам работать с 5 форматами: JPG, PNG, GIF, BMP и PSD. Если вам больше нравится Adobe Photoshop, можно пакетно оптимизировать изображения командой «Сохранить для Web».

Если ваш интернет-магазин работает на CS-Cart, то сэкономить время поможет модуль «Оптимизация изображений», который добавляет возможность уменьшать размеры используемых изображений с помощью внешних сервисов: Resmush.it и Shortpixel.com. Причем можно настроить CRON, и оптимизация будет происходить по расписанию без вашего участия.

2. Кадрировать детали

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

Кадрирование изображения товара

3. Соблюдать пропорции

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

Вот эти пропорции:

Пропорции для изображений товаров

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

Для CS-Cart советуем использовать модуль «Умная обрезка изображений». С ним можно автоматически или вручную обрезать изображения для всех сущностей CS-Cart и корректировать отображение их миниатюр. Например, если вы загружаете большую непропорциональную картинку товара, то модуль самостоятельно определит основную часть изображения и обрежет его с правильными пропорциями. Карточки товаров будут выглядеть привлекательно, единообразно и их кадрирование не займет много времени.

4. Выбирать правильный формат

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

GIF

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

PNG

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

JPEG

Алгоритм JPEG может сжимать файл как с потерями, так и без потерь. То есть его плюс в том, что управляя параметрами сжатия, можно выбирать оптимальное соотношение качества и веса изображения. Формат JPEG используется в 90% интернет-магазинов.

Вот пример того, как меняется размер файла при выборе разных форматов:

Сжатие файла в зависимости от формата

Сохранение фотографии JPG в форматах PNG, GIF, JPEG. Файл JPEG самый оптимальный

WebP

По сравнению с предыдущими форматами, WebP достаточно молодой. Он был разработан Google в 2010 году. Тогда в своей презентации Google отметил, что даже сжатые с потерями изображения в формате WebP весят на 30% меньше, чем аналогичные в формате JPEG, а сжатые без потерь на 25% меньше, чем в формате PNG.

То есть при таком же качестве изображения WebP отличается от своих форматов-конкурентов гораздо меньшим размером файла. Он объединяет все фишки других форматов: сжатие как с потерями так и без (как в JPEG), полупрозрачность (как в PNG) и анимацию (как в GIF). Широкое распространение WebP тормозится тем, что его пока еще поддерживают не все браузеры. Проблемы есть с Safari, Edge, Internet Explorer и Firefox.

Если вы решили использовать формат WebP для изображений в интернет-магазине, вот несколько программ для конвертации вручную: online-convert.comconvertio.cowebp-converter.com. Больше конвертеров вы легко найдете через поисковые системы. Однако, когда вы вручную загрузите в интернет-магазин изображения в формате WebP, есть риск, что из-за неподходящего браузера не все пользователи увидят эти изображения. Лучше всего использовать специальные модификации для вашей CMS, которые обходят эту проблему.

Для CS-Cart мы предлагаем модуль «Изображения WebP». Модуль автоматически конвертирует имеющуюся на сайте графику (фото товаров, баннеры, логотипы и т.п.), а если браузер пользователя не поддерживает WebP, то он увидит исходные изображения. Таким образом, решена проблема с поддержкой браузеров, о которой было написано выше. С WebP-изображениями посетитель не заметит разницы в качестве, но страницы вашего сайта будут грузиться быстрее.

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

  1. Для изображений товара в интернет-магазине лучше всего подойдут форматы JPEG или WEBP. У них оптимальное качество при небольшом размере.
  2. Для больших фотографий товара не используйте GIF. Управлять размером такого файла очень сложно. GIF — только для иконок и анимационных элементов витрины.
  3. PNG можно выбирать для маленьких изображений и изображений с прозрачным фоном.
  4. Не используйте в интернет-магазине формат TIFF. У этого формата хорошая глубина цвета, и он незаменим для печати отсканированных изображений. Однако размеры файлов при этом большие и не поддаются сжатию.
  5. Найти конвертер формата изображения не составляет труда: большинство графических редакторов могут сохранять изображение в любом из перечисленных выше форматов.

Ручная или автоматическая оптимизация

Оптимизировать изображения можно тремя способами.

Первый способ — вручную изменять картинку (сжимать, кадрировать, менять формат) с помощью редакторов, например, Adobe Photoshop или других онлайн-сервисов. Этот способ не подойдет для интернет-магазина, ведь товарный ассортимент предполагает сотни, а то и тысячи изображений товаров. Каждое изображение придется загружать в редактор, конвертировать вручную, сохранять на компьютер и заново импортировать в интернет-магазин. Это пустая трата времени, денег и ресурсов.

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

Третий способ — автоматическая оптимизация изображений. У популярных CMS есть модификации, которые позволяют по API подключать внешние сервисы (например, Resmush.it и Shortpixel.com) и в пару кликов оптимизировать все изображения интернет-магазина: менять размер, соблюдать пропорции и конвертировать в другой формат. Для CS-Cart с этими задачами отлично справятся модули «Оптимизация изображений»«Умная обрезка изображений»Изображения WebP.

Получите консультацию специалиста по вашему проекту

  • Содержание
Ксения Чебурова , Редактор Cart-Power
Все статьи автора
Чек-лист будет отправлен на указанный Вами e-mail
Пожалуйста, заполните форму