Как оптимизировать изображения и фотографии для Интернета (без потери качества)

1. Что такое Google Speed ​​Update?
2. Правда об оптимизации изображений, скорости и вашей прибыли
3. Почему изображения так важны
4. 1. Первые впечатления учитываются.
5. 2. Картинка стоит 1000 слов.
6. 3. Мобильный телефон вступает во владение.
7. 4. Изображения могут действительно повредить ваш сайт.
8. Оптимизация изображений и фотографий: краткое руководство
9. 1. Начните с хороших фотографий.
10. Убедитесь, что у вас есть правильные настройки.
11. 2. Продемонстрируйте свою продукцию под разными углами.
12. 3. Используйте белый фон для ваших продуктов.
13. 4. Сохраните ваши изображения с нужными размерами.
14. 5. Увеличьте скорость загрузки страницы, используя правильный формат изображения.
15. 6. Поэкспериментируйте с настройками качества.
16. Когда не использовать JPEG.
17. Не на BigCommerce? Сожмите ваши изображения с помощью этого бесплатного инструмента.
18. Поисковая оптимизация изображений 101
19. 1. Используйте информативные имена файлов.
20. 2. Включите соответствующий альтернативный текст.
21. 3. Обеспечить контекст вокруг вашего изображения.
22. 4. Используйте изображения, чтобы улучшить опыт.
23. Уловка торговли: используйте открытый график, чтобы показать правильное изображение в социальных сетях
24. Контрольный список оптимизации изображения продукта
25. 1. Настройтесь на успех.
26. 2. Снимайте несколько фотографий.
27. 3. Делайте снимки в контексте.
28. 4. Уберите законченные фотографии.
29. 5. Получите правильный размер.
30. 6. Будьте последовательны.
31. Часто задаваемые вопросы по оптимизации изображений
32. Что такое сжатие изображения?
33. Что такое сжатие без потерь?
34. Что такое сжатие с потерями?
35. В чем разница между сжатием с потерями и сжатием без потерь?
36. Заметят ли пользователи, когда будут оптимизированы фотографии товара?
37. Какие другие инструменты оптимизатора изображений вы рекомендуете?
38. Как не дизайнеры могут создавать качественные изображения для веб-сайта?

Сколько внимания вы уделяете вашему магазину оптимизация изображения ?

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

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

Только видео соответствует силе изображения в этом отношении.

И вы используете свои фотографии везде:

• На страницах вашего продукта.
• На страницах вашей категории.
• На вашей домашней странице.
• В вашей заброшенной корзине сообщения.
• В вашем блоге.
• На ваших социальных счетах.
• Для вашей рекламы в Facebook.
• Для вашего потока покупок в Google.

Фактически, единственное, для чего вы не используете изображения, это Google AdWords. А Google AdWords часто является самым дорогим КПП из всех, что у вас есть.

Что такое Google Speed ​​Update?

Несмотря на то, что в AdWords нет изображений, Google также активно инвестирует в изображения ваших брендов и продуктов.

Это называется обновлением скорости.

И есть 2 вещи, которые замедляют скорость загрузки страницы:

1. Слишком много JavaScript часто вызвано слишком большим количеством приложений и недостаточно встроенным на ваш сайт.
2. Слишком большие изображения, которые не оптимизированы под размер экрана.

Меньше приложений. Больше продаж. Только на BigCommerce

«Недавно мы переформировали с Shopify Plus в BigCommerce. Я не могу объяснить, как я злюсь, что в течение многих месяцев мы платили Shopify много тысяч долларов за функциональность, которая входит в стандартную комплектацию BigCommerce!

Как только мы решили, что собираемся отключить Shopify, мы буквально потратили три дня на BigCommerce, установив шаблон, настроив его, а затем завершив полный импорт продукта.

Отзывы людей, которым я уже поделился с сайтом: «Он загружается намного быстрее! Мобильный опыт намного лучше! »

- Ричард Эйб, Монро и Кент

Проверьте свои данные в BigCommerce

Такие платформы, как BigCommerce, помогут вам решить эту проблему:

1. Создание большей функциональности для платформы. В среднем магазины BigCommerce используют 2-5 приложений. На других платформах SaaS среднее значение составляет +15.
2. Автоматическая оптимизация всех изображений для скорости загрузки страницы на любом устройстве. BigCommerce сотрудничает с Akamai, лидером в области оптимизации изображений в сети, для автоматической оптимизации всех изображений для всех клиентов - без каких-либо дополнительных усилий или затрат с их стороны.

Меньше технического долга. Больше продаж

«Решение перейти на сеть Akamai Image Manager стало стимулом для наших продавцов, позволив им ускорить загрузку сайта и повысить общую производительность своего мобильного сайта.

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

- Фрэнк Морралл, президент VisionCourse Media агентство интернет-маркетинга и дизайна и партнер BigCommerce.

Правда об оптимизации изображений, скорости и вашей прибыли

Да, изображения являются одним из самых важных активов вашего интернет-магазина.

Зачем?

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

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

Но с чего начать?

Мы вас прикрыли.

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

Почему изображения так важны

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

1. Первые впечатления учитываются.

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

На самом деле, в исследовании, проведенном в 2017 году по заказу BigCommerce и Square, американские онлайн-покупатели цитируется дополнительная фотография продукта как вещь № 1, от которой они хотят большего от онлайн-брендов.

Комплексное исследование современных потребительских покупательских привычек

Так как объем электронной торговли растет на 23% в год, используйте это исследование, чтобы узнать, как сделать онлайн-продажу и личную продажу более беспроблемной (а также заработать больше $$$!)

Получить данные сейчас

2. Картинка стоит 1000 слов.

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

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

Действительно, в том же исследовании, проведенном BigCommerce и Square, почти половина респондентов (49%) указали, что не могут потрогать, почувствовать или попробовать товар как один из своих наименее любимых аспектов онлайн-покупок.

Это был второй самый ненавистный аспект онлайн-покупок в исследовании.

3. Мобильный телефон вступает во владение.

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

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

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

4. Изображения могут действительно повредить ваш сайт.

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

• Ваши изображения загружаются медленно?
• Вы не добавили мета-описание?
• Люди подпрыгивают, как только они там приземляются?

Вы никогда не попадете на страницу 1 с таким поведением.

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

Оптимизация изображений и фотографий: краткое руководство

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

Но после этого большая часть процесса оптимизации остается за кадром.

Они не видят, что вы делаете в конце концов, но вы получите более высокий рейтинг в поиске, что означает:

Добавьте к этому мощь и настраиваемость SEO вашего сайта (т.е. полный контроль над URL по всем направлениям), и вы выиграете в Google.

Давайте посмотрим, как это сделать, несмотря на то, на какой платформе вы находитесь.

Автоматическая оптимизация изображений и полный контроль SEO

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

• Никаких дополнительных затрат.
• Не трата времени.

Кроме того, BigCommerce является единственной платформой SaaS, которая позволяет полностью настраивать все URL-адреса и метаданные сайта. Непатентованный язык кодирования платформы также получает бонусные баллы от Google.

Переместите данные прямо сейчас и убедитесь сами с 15-дневной бесплатной пробной версией.

Протестируйте платформу под вашим контролем.

1. Начните с хороших фотографий.

Хорошая фотография в электронной коммерции начинается с правильной фотографии.

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

Но есть несколько советов, которым вы можете следовать, чтобы убедиться, что вы начинаете с наилучшими фотографиями.

Убедитесь, что у вас есть правильные настройки.

Настройка электронной коммерции не должна быть дорогой, но если вы только начинаете, есть несколько вещей, в которые вы должны инвестировать, чтобы делать качественные фотографии:

1. Потребительская зеркальная камера или смартфон. Большинство современных смартфонов имеют камеру, которая будет более чем достаточной для съемки стандартных фотографий продуктов. Использование смартфона также дает вам доступ к сотням приложений для фотосъемки.
2. Источник света Наличие источника света помогает обеспечить равномерное освещение вашего изображения и будет иметь огромное значение для качества ваших фотографий. Если вы только начинаете, вам может быть проще работать с естественным источником света. В этом случае использование заливочного света поможет вам устранить тени на изображении.
3. Белое движение Развертка поможет равномерно распределить освещение по вашему изображению и значительно упростит редактирование ваших фотографий. Это может быть что угодно, от белого листа до рулонов бумаги.
4. Ровная поверхность. Если вы делаете несколько снимков, то наличие устойчивой поверхности облегчает постоянное размещение изображений.
5. Штатив для камеры. Точно так же наличие штатива для фотокамеры гарантирует, что вы сможете последовательно размещать фотографии каждый раз. Это также позволяет легко перенастроить ваши продукты без необходимости одновременно манипулировать камерой.

2. Продемонстрируйте свою продукцию под разными углами.

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

Например, в интернет-магазине одежды Olive Ave , они используют различные снимки, чтобы продемонстрировать свой продукт.

Вы можете сделать это и без моделей. Посмотрите на этот пример из KAOS ,

Различные фотографии могут помочь продемонстрировать разные аспекты.

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

3. Используйте белый фон для ваших продуктов.

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

Белые фоны являются стандартными почти во всех интернет-магазинах, и для этого есть несколько веских причин:

1. Ваши продукты будут POP на белом фоне
2. Ваши изображения будут выглядеть последовательно на страницах коллекции
3. Это сэкономит вам деньги и время на редактирование
4. Вы можете легко использовать или заменить фон на любой из ваших фотографий
5. Торговые площадки, такие как Google Shopping и Amazon, теперь требуют белого фона

Использование белых фоновых изображений позволяет легко сравнивать продукты. Источник: JENIS ,

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

4. Сохраните ваши изображения с нужными размерами.

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

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

Ваш iPhone будет иметь что-то в диапазоне 12-мегапиксельной камеры, что означает, что фотографии, которые он делает, состоят из двенадцати миллионов пикселей. Фотографии, сделанные 12-мегапиксельной камерой, будут 3000px x 4000px ,

Для электронной коммерции такой размер не нужен. Например, на BigCommerce оптимальный размер для ваших фотографий товара 1028px на 1028px в то время как ваши другие фотографии должны быть до 1000 пикселей с обеих сторон.

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

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

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

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

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

Услуги, такие как Pixlr а также Canva может помочь вам с базовыми потребностями редактирования и изменения размера.

Быстрее Оформить заказ. Меньше развития.

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

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

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

Ваш магазин BigCommerce поддерживает три разных формата изображения: JPG / JPEG, GIF или PNG. Каждый из них имеет свои преимущества и недостатки.

• GIF-файлы имеют более низкое качество, но и размер файла. Если вам нужно создать изображение специально для маленьких значков или миниатюр, то вы, вероятно, хотите использовать GIF. Они также являются единственным доступным форматом, который поддерживает анимацию (хотя следите за APNG ). Однако с увеличением размера изображения GIFS становятся менее эффективными при обработке цветов.
• Файлы PNG поддерживают более широкий диапазон цветов, а также единственный формат, поддерживающий прозрачный фон. Однако все это происходит за счет увеличения размера файла. Если вам нужно отредактировать фотографию несколько раз, вам нужно будет экспортировать ее в файл PNG.
• Изображения JPEG являются наиболее распространенным форматом, используемым цифровыми камерами и онлайн. Они поддерживают широкий диапазон цветов, но настройки сжатия JPEG позволяют найти баланс между качеством изображения и размером файла.

JPEGS предлагает хороший баланс между размером файла и качеством, в то время как GIFS предлагает плохой размер файла для более сложных изображений. Источник изображения: Брук Ларк

6. Поэкспериментируйте с настройками качества.

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

Одним из значительных преимуществ типа файлов jpeg является возможность выбрать необходимый уровень сжатия. Настройка параметров сжатия позволяет уменьшить размер файла за счет качества изображения.

Посмотрите на этот пример, где одна и та же фотография была сохранена с использованием разных уровней сжатия:

Результат использования высокого, среднего и низкого сжатия JPEG. Источник изображения: Алекс Джонс

Когда не использовать JPEG.

Хотя JPEG является наиболее популярным форматом для веб-изображений, в некоторых случаях лучше использовать файлы с более высоким разрешением, такие как PNG. Например:

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

Не на BigCommerce? Сожмите ваши изображения с помощью этого бесплатного инструмента.

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

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

Для всех остальных ... давайте начнем здесь:

Если вы не знакомы с байтным блоком данных, каждый байт равен 1024 из предыдущего.

Итак, чтобы уточнить:

1024 байта (б) = 1 килобайт (кб). 1024 килобайта = 1 мегабайт (МБ). 1024 МБ = 1 гигабайт (ГБ)

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

Типичный размер файла фотографии iPhone 7 около 3 МБ что означает 3072 КБ, или более 30x оптимальных размеров изображения!

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

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

TinyJPG Это один из таких бесплатных сервисов - бесплатный оптимизатор изображений, который будет принимать изображения в формате JPG и PNG.

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

TinyJPG показывает исходное изображение в сравнении с оптимизированным.

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

Поисковая оптимизация изображений 101

Изображения - это фантастический источник органического контента, который может помочь повысить ваш рейтинг в Google.

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

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

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

Имя файла по умолчанию, которое исходит от вашей камеры и выглядит как цепочка цифр, никак не объясняет, о чем на самом деле фотография.

При названии изображений опишите содержание фотографии и используйте тире вместо пробелов. BigCommerce не допускает пробелов в именах файлов изображений.

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

2. Включите соответствующий альтернативный текст.

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

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

Но альтернативный текст также используется Google, чтобы лучше понять содержание изображения.

Это делает ценным место для включения релевантного поискового запроса, который ищут люди, ищущие ваш продукт.

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

3. Обеспечить контекст вокруг вашего изображения.

Содержание, которое окружает ваше изображение, также важно.

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

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

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

4. Используйте изображения, чтобы улучшить опыт.

Вы также можете сделать все возможное и создать отличный пользовательский опыт, выполнив следующие действия со своими изображениями:

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

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

Уловка торговли: используйте открытый график, чтобы показать правильное изображение в социальных сетях

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

Источник: Kelty

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

Здесь вы можете сделать это в бэкэнде BigCommerce для каждого отдельного продукта.

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

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

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

Изображения продуктов могут сделать или прекратить продажу.

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

Итак, вы прибиваете эти лучшие практики, когда дело доходит до изображения продукта ?

Вот контрольный список, чтобы убедиться, что вы - 100% времени.

1. Настройтесь на успех.

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

2. Снимайте несколько фотографий.

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

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

• Начните с «изображения героя». Это первый из серии изображений вашего продукта. Лучший вариант для изображения героя - это либо фронтальный снимок, либо снимок под углом 45 градусов, в зависимости от продукта. В некоторых случаях, таких как обувь, например, боковой выстрел может быть более подходящим. Фотография должна быть простой и содержать только товар, который вы продаете, чтобы не запутать зрителя.
• Исходя из изображения вашего героя , включите фотографии сверху, снизу, сбоку, сзади и т. Д.

3. Делайте снимки в контексте.

Затем, продайте свой продукт с некоторыми фотографиями продукта в контексте.

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

Зритель должен хотеть все на фотографии (включая ваш продукт;);

4. Уберите законченные фотографии.

Есть также несколько советов, которые следует помнить после того, как вы положили камеру.

Хорошая идея - убрать фон и позволить вашим продуктам говорить.

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

5. Получите правильный размер.

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

Когда вы настраиваете свой интернет-магазин, вы выбираете размеры изображения продукта для вашего шаблона.

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

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

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

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

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

• Создайте холст нужного размера в Photoshop и перетащите свои фотографии на новый холст, изменив их размер в новом холсте, а не в исходных файлах.
• Если у вас нет Photoshop или вы хотите что-то, что немного проще в использовании, используйте Canva , Просто создайте дизайн, используя пользовательские размеры, загрузите ваши изображения и измените их размер там. Это слишком просто!

6. Будьте последовательны.

Наконец, вы хотите, чтобы ваши изображения выглядели согласованно.

Ваш шаблон BigCommerce сделает их все одинакового размера, а белый фон сохранит все красивым и аккуратным.

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

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

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

Часто задаваемые вопросы по оптимизации изображений

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

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

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

Что такое сжатие изображения?

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

Сжатие изображения сжимает размер изображения (делает его меньше) без ущерба для качества в зависимости от устройства, с которого человек просматривает изображение.

Например, размер файла, необходимый для высококачественной печати фотографий, очень велик. Для этого вам понадобится изображение с высоким разрешением (hi-res), то есть изображение 4608 x 3456 даст отпечаток 15 x 11. Потребности в веб-изображениях ниже.

Что такое сжатие без потерь?

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

При сжатии без потерь каждый отдельный бит данных, который был изначально в файле, остается после того, как файл распакован.

Ваш магазин должен беспокоиться об этом? Это зависит.

Рекомендуется сохранять все оригинальные файлы в облаке с резервной копией. Другими словами, используйте Google Drive, Dropbox или Box для сохранения ваших оригинальных, больших файлов.

Что такое сжатие с потерями?

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

Это означает, что оригинальный файл не может быть восстановлен.

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

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

В чем разница между сжатием с потерями и сжатием без потерь?

Разница между сжатием с потерями и сжатием без потерь заключается в способе сжатия изображения.

При сжатии с потерями вы не можете восстановить исходный файл.

При сжатии без потерь вы можете восстановить исходный файл.

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

Заметят ли пользователи, когда будут оптимизированы фотографии товара?

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

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

Какие другие инструменты оптимизатора изображений вы рекомендуете?

Должны ли изображения быть адаптивными?

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

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

Как не дизайнеры могут создавать качественные изображения для веб-сайта?

Мы настоятельно рекомендуем нанять профессиональных фотографов для всех изображений продуктов и использовать опытных графических дизайнеров, чтобы обеспечить высокое качество изображений на вашем веб-сайте. Однако такие инструменты, как Canva , Piktochart , вольер а также LogoGarden может помочь вам создать изображения высокого качества с небольшим опытом проектирования.

Похожие

Комментарии