Когда говорят об оптимизации изображений, обычно имеют в виду либо заполнение метатегов для SEO, либо сжатие изображений для уменьшения веса страницы. В одной из прошлых статей мы уже рассказывали о том, что SEO-оптимизированные картинки помогут привлечь трафик и хорошо скажутся на ранжировании интернет-магазина в поисковой системе. Сегодня мы разберемся, зачем оптимизировать размер изображений в интернет-магазине, какие способы оптимизации существуют и можно ли автоматизировать этот процесс.
Зачем оптимизировать изображения?
Изображение товара — один из главных элементов, на которые обращает внимание посетитель интернет-магазина. Чтобы мотивировать его совершить покупку, фотография товара должна быть детальной и качественной, что, к сожалению, означает большой вес изображения и, как следствие, страницы интернет-магазина.
«Тяжелая» станица тормозит работу интернет-магазина. Когда время загрузки составляет более трех секунд, пользователи чаще всего уходят, не дождавшись ее окончания. Каждый ушедший покупатель — упущенная прибыль. Например, в Amazon выяснили, что если их страницы начнут загружаться на секунду дольше, они потеряют 1,6 миллиарда долларов в год. Отказы ухудшают поведенческие метрики и больно бьют по позициям интернет-магазина при ранжировании поисковыми системами.
Верно и обратное, ускорение работы интернет-магазина положительно влияет на конверсию. А значит можно привлечь больше потенциальных покупателей и увеличить прибыль.
Так вот, чтобы ускорить загрузку страниц интернет-магазина, нам и пригодится оптимизация.
Оптимизация изображений — это обработка файла с целью уменьшить его «вес», максимально сохранив качество.
Плюсы оптимизации изображений:
Ускорение загрузки страниц.
Увеличение конверсии.
Увеличение показателей Google Pagespeed Insights.
Снижение отказов, улучшение поведенческих факторов на сайте.
Как итог первых четырех пунктов — улучшенное ранжирование сайта в поисковой выдаче.
Объем файлов существенно уменьшается, а это означает экономию места на хостинге.
Какими способами можно оптимизировать изображения
Есть несколько вариантов технической оптимизации изображений.
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.com, convertio.co, webp-converter.com. Больше конвертеров вы легко найдете через поисковые системы. Однако, когда вы вручную загрузите в интернет-магазин изображения в формате WebP, есть риск, что из-за неподходящего браузера не все пользователи увидят эти изображения. Лучше всего использовать специальные модификации для вашей CMS, которые обходят эту проблему.
Для CS-Cart мы предлагаем модуль «Изображения WebP». Модуль автоматически конвертирует имеющуюся на сайте графику (фото товаров, баннеры, логотипы и т.п.), а если браузер пользователя не поддерживает WebP, то он увидит исходные изображения. Таким образом, решена проблема с поддержкой браузеров, о которой было написано выше. С WebP-изображениями посетитель не заметит разницы в качестве, но страницы вашего сайта будут грузиться быстрее.
При выборе формата файла помните:
Для изображений товара в интернет-магазине лучше всего подойдут форматы JPEG или WEBP. У них оптимальное качество при небольшом размере.
Для больших фотографий товара не используйте GIF. Управлять размером такого файла очень сложно. GIF — только для иконок и анимационных элементов витрины.
PNG можно выбирать для маленьких изображений и изображений с прозрачным фоном.
Не используйте в интернет-магазине формат TIFF. У этого формата хорошая глубина цвета, и он незаменим для печати отсканированных изображений. Однако размеры файлов при этом большие и не поддаются сжатию.
Найти конвертер формата изображения не составляет труда: большинство графических редакторов могут сохранять изображение в любом из перечисленных выше форматов.
Ручная или автоматическая оптимизация
Оптимизировать изображения можно тремя способами.
Первый способ — вручную изменять картинку (сжимать, кадрировать, менять формат) с помощью редакторов, например, Adobe Photoshop или других онлайн-сервисов. Этот способ не подойдет для интернет-магазина, ведь товарный ассортимент предполагает сотни, а то и тысячи изображений товаров. Каждое изображение придется загружать в редактор, конвертировать вручную, сохранять на компьютер и заново импортировать в интернет-магазин. Это пустая трата времени, денег и ресурсов.
Второй способ — обрабатывать изображения пакетно. Для этого надо скачать папку с изображениями из вашей CMS, загрузить ее в специальное десктопное приложение (например, ImageOptim, Riot-optimizer, Optimizilla) оптимизировать и загрузить обратно в CMS. Приложения бывают как платные, так и бесплатные и отличаются количеством файлов, которые можно единовременно оптимизировать. Это опять же требует много времени и знания процесса. Намного проще для администраторов интернет-магазина воспользоваться третьим способом.
Третий способ — автоматическая оптимизация изображений. У популярных CMS есть модификации, которые позволяют по API подключать внешние сервисы (например, Resmush.it и Shortpixel.com) и в пару кликов оптимизировать все изображения интернет-магазина: менять размер, соблюдать пропорции и конвертировать в другой формат. Для CS-Cart с этими задачами отлично справятся модули «Оптимизация изображений», «Умная обрезка изображений», Изображения WebP.
Получите консультацию специалиста по вашему проекту
Содержание
Получите консультацию специалиста по вашему проекту
Что такое пагинация в интернет-магазине и как ее… Как оптимизировать однотипные страницы маркетплейсов и интернет-магазинов? Зачем нужна оптимизация страниц пагинации подробно рассказали в статье.
Зачем интернет-магазину оптимизация изображений?
Когда говорят об оптимизации изображений, обычно имеют в виду либо заполнение метатегов для SEO, либо сжатие изображений для уменьшения веса страницы. В одной из прошлых статей мы уже рассказывали о том, что SEO-оптимизированные картинки помогут привлечь трафик и хорошо скажутся на ранжировании интернет-магазина в поисковой системе. Сегодня мы разберемся, зачем оптимизировать размер изображений в интернет-магазине, какие способы оптимизации существуют и можно ли автоматизировать этот процесс.
Зачем оптимизировать изображения?
Изображение товара — один из главных элементов, на которые обращает внимание посетитель интернет-магазина. Чтобы мотивировать его совершить покупку, фотография товара должна быть детальной и качественной, что, к сожалению, означает большой вес изображения и, как следствие, страницы интернет-магазина.
«Тяжелая» станица тормозит работу интернет-магазина. Когда время загрузки составляет более трех секунд, пользователи чаще всего уходят, не дождавшись ее окончания. Каждый ушедший покупатель — упущенная прибыль. Например, в Amazon выяснили, что если их страницы начнут загружаться на секунду дольше, они потеряют 1,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.com, convertio.co, webp-converter.com. Больше конвертеров вы легко найдете через поисковые системы. Однако, когда вы вручную загрузите в интернет-магазин изображения в формате WebP, есть риск, что из-за неподходящего браузера не все пользователи увидят эти изображения. Лучше всего использовать специальные модификации для вашей CMS, которые обходят эту проблему.
Для CS-Cart мы предлагаем модуль «Изображения WebP». Модуль автоматически конвертирует имеющуюся на сайте графику (фото товаров, баннеры, логотипы и т.п.), а если браузер пользователя не поддерживает WebP, то он увидит исходные изображения. Таким образом, решена проблема с поддержкой браузеров, о которой было написано выше. С WebP-изображениями посетитель не заметит разницы в качестве, но страницы вашего сайта будут грузиться быстрее.
При выборе формата файла помните:
Ручная или автоматическая оптимизация
Оптимизировать изображения можно тремя способами.
Первый способ — вручную изменять картинку (сжимать, кадрировать, менять формат) с помощью редакторов, например, Adobe Photoshop или других онлайн-сервисов. Этот способ не подойдет для интернет-магазина, ведь товарный ассортимент предполагает сотни, а то и тысячи изображений товаров. Каждое изображение придется загружать в редактор, конвертировать вручную, сохранять на компьютер и заново импортировать в интернет-магазин. Это пустая трата времени, денег и ресурсов.
Второй способ — обрабатывать изображения пакетно. Для этого надо скачать папку с изображениями из вашей CMS, загрузить ее в специальное десктопное приложение (например, ImageOptim, Riot-optimizer, Optimizilla) оптимизировать и загрузить обратно в CMS. Приложения бывают как платные, так и бесплатные и отличаются количеством файлов, которые можно единовременно оптимизировать. Это опять же требует много времени и знания процесса. Намного проще для администраторов интернет-магазина воспользоваться третьим способом.
Третий способ — автоматическая оптимизация изображений. У популярных CMS есть модификации, которые позволяют по API подключать внешние сервисы (например, Resmush.it и Shortpixel.com) и в пару кликов оптимизировать все изображения интернет-магазина: менять размер, соблюдать пропорции и конвертировать в другой формат. Для CS-Cart с этими задачами отлично справятся модули «Оптимизация изображений», «Умная обрезка изображений», Изображения WebP.
Получите консультацию специалиста по вашему проекту
Получите консультацию специалиста по вашему проекту
Другие статьи этой категории