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

Если ваш бизнес работает на Shopify, вероятно, у вас есть тонны фотографий товаров, и вы потратили бесчисленные часы, сортируя изображения товаров, чтобы выбрать самые лучшие. Каждая страница Shopify нуждается в фотографиях товаров. Лайфстайл фотографиях. Маркетинговых материалах. В целом: это означает, что ваша страница Shopify несет МНОГО данных. Если ваши изображения не оптимизированы (мы разберем точно, что это означает), вы можете терять клиентов. Исследования показывают, что клиенты с большей вероятностью покинут ваш веб-сайт с каждой проходящей секундой времени загрузки. Вы владелец бизнеса. Не UX дизайнер. Поэтому не слишком углубляйтесь в понимание всех тонкостей оптимизации изображений (есть несколько приложений, которые делают эту работу за вас). Прежде чем мы представим наши советы для того, чтобы ваши клиенты не уходили с вашего сайта Shopify — давайте определим некоторые из этих терминов.

SEO - поисковая оптимизация. Этот термин относится ко всему, что помогает поднять ваш веб-сайт на вершину результатов поисковых систем. Google Analytics — это бесплатный инструмент, который вы можете использовать, чтобы убедиться, что изображения и текст на вашем веб-сайте доступны для поиска.
alt text - альтернативный текст. Для каждого изображения, которое вы загружаете в Shopify: у вас есть возможность добавить альтернативный текст. Это означает, что вы описываете изображение в текстовом поле. Этот альтернативный текст прикрепляется к этому изображению. Чем более описательным и конкретным является этот альтернативный текст: тем чаще ваше изображение будет появляться в поисках.
сжатие изображений - размер и качество любого изображения влияют на количество данных, которые оно содержит. Если у вас повсюду на Shopify огромные оригинальные высококачественные изображения, время загрузки может пострадать. Сжатие изображений — это концепция минимизации размера (и, следовательно, времени загрузки) вашего изображения настолько, насколько это возможно, без ущерба для качества.
метрики - числа, которые говорят вам, насколько хорошо работает ваш бизнес. Есть конкретные метрики, которые наиболее часто используются для электронной коммерции. Та, которую мы обсуждаем здесь больше всего, — это конверсия. В контексте этого блога — ваша конверсия — это то, сколько людей пришло на ваш веб-сайт, чтобы его проверить, а затем действительно что-то купили. Вы превратили обычного браузера в клиента. Нам это нравится!
позвольте нам дать вам руку

контент, который аплодирует вашему бренду

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

Как узнать, теряете ли вы клиентов из-за времени загрузки? Это не просто. Множество других факторов могут повлиять на вашу конверсию. Но вы можете использовать инструмент типа Speed Boostr, чтобы проверить ваше время. Нет одного жесткого и быстрого правила о том, насколько быстро должен загружаться веб-сайт. Вам придется балансировать между контентом и временем. Но помните: каждая секунда времени загрузки снизит вашу конверсию.

Исследования показывают, что клиенты хотят, чтобы сайты электронной коммерции (интернет-магазины) загружались в течение двух секунд. Это звучит как страшное число. Как может быть одна постоянная скорость? Разве у людей не разная скорость интернета?

Да! Вы хотите стремиться к наименьшему количеству секунд, которое вы можете, используя тестер типа инструмента Speed Boostr, о котором мы говорили. Не волнуйтесь — если кто-то дома у бабушки на точке доступа пытается делать покупки: они будут знать о потенциально медленном интернете. Когда мы говорим о скорости загрузки сайта, мы говорим о метрике, которую вы можете контролировать.

{{shopify-ad}}

Соглашение об именовании изображений

У вас может быть папка, полная изображений товаров с именами типа "IMG_43892.jpg". Это общее значение по умолчанию. Но как только ваше изображение на вашей странице Shopify — оно должно иметь описательное и четкое имя изображения. Подумайте о том, в каких поисках изображений Google вы хотите появляться.

Например: вы продаете индивидуальные канцелярские товары. Что вы ожидаете, что ваши клиенты будут искать, чтобы найти товары, подобные вашим? Попробуйте формулу тега типа "---.jpg".

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

Выберите формат вашего изображения

Есть два основных формата изображений для Shopify: PNG и JPEG. PNG более высокого качества, тогда как JPEG меньше (и поэтому загружается быстрее). Ключ в том, что любое изображение в вашем HTML на Shopify должно быть JPEG, когда это возможно (это будет включать изображения товаров). Изображения, которые живут в вашем CSS коде, должны быть PNG (это будет включать логотипы и баннеры). Это звучит запутанно, если вы еще не начали строить ваш сайт Shopify, но Shopify фактически отлично справляется с проведением вас через эти шаги при создании вашего сайта.

Мы также покрыли вас 6 лучшими приложениями для редактирования ваших фотографий электронной коммерции. Вы можете найти приложение, которое подходит вашему бюджету и уровню навыков. Тогда у вас будет домашняя база для изменения размера, переименования, ретуширования и сохранения ваших изображений как PNG или JPEG.

Быстрое примечание: Shopify преобразует все файлы изображений в WebP. Это потрясающий тип файла, разработанный Google, который одновременно меньше и четче других. Однако: вы никогда не хотите загружать изображения WebP в Shopify напрямую. В основном — если человек, просматривающий ваш сайт, имеет браузер, который поддерживает WebP: это то, что они увидят. Если нет: они увидят JPG или PNG. Позвольте Shopify делать работу за вас!

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

Shopify сжимает ваши изображения до некоторой степени. Как общее правило: стремитесь к размерам файлов 70KB или меньше. Диапазон для размеров изображений в Shopify составляет 800px x 800px (чтобы функция увеличения работала правильно и не размывала ваши изображения) до 4472 x 4472. Это большой диапазон! Подумайте о назначении каждого изображения, чтобы принять эти решения. Если у вас есть товар с деликатной текстурой — возможно, ваши клиенты захотят увеличить очень близко, чтобы получить представление о ткани. Убедитесь, что любой размер, который вы выберете, не повредит качеству изображения, необходимому.

Рекомендация золотой середины составляет 2048 x 2048.

Убедитесь, что вы используете инструмент специально для Shopify (как приложения, которые мы представляем вам ниже), чтобы вы не закончили со странным форматированием.

Для дополнительной помощи: мы покрыли вас руководством по размерам изображений Shopify.

Используйте теги alt img

Теги alt img — это дескрипторы изображения, к которому они прикреплены. Они используются для целей доступности и поиска. Если у вас есть потенциальный клиент с нарушениями зрения — что вы хотите убедиться, что они знают об этом изображении? Им нужно знать цвет, размер, материал, использование и название вашего бренда, конечно.

Другая сложная вещь, которую нужно иметь в виду, — это то, что Google фактически судит вас на основе этих тегов alt img. Они не хотят, чтобы вы использовали их для продвижения (имея теги типа "большая распродажа скидка покупайте сейчас"), и они не хотят, чтобы вы использовали их только для SEO (используя неактуальные ключевые слова типа "канцелярские товары карточки свадьба похороны каллиграфия DIY типография"). У Google есть программы, которые читают эти теги и будут наказывать вас — это означает, что вы будете появляться в меньшем количестве поисков — если вы используете их неправильно.

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

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

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

Определите ваши собственные метрики

Поскольку у вас есть бренд: у вас также есть полномочия принимать так много решений для вашего бренда. Метрики — одно из тех невероятно влиятельных решений, которые вы просто должны принять самостоятельно. "конверсия", "средняя стоимость заказа", "средняя цена продажи". Это все метрики, которые вы будете рассматривать как владелец бизнеса. Но они будут выглядеть по-разному для каждого бренда. Важно, чтобы вы определили ваши собственные метрики и поставили цели для себя — не основываясь на том, что делают другие бренды. Это сделает принятие решений проще, когда дело доходит до таких вещей, как время загрузки страницы и размер изображения.

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

Если это звучит как ваш бренд: не волнуйтесь! Ваши метрики для ВАС и ВАШЕЙ уникальной демографии клиентов.

Ключ здесь в том, что — когда вы вносите изменения в ваш сайт Shopify — вы отслеживаете ваши метрики до, и, после. Это будет ваш лучший измеритель того, насколько хорошо ваш сайт работает, чтобы донести ваш товар. Помните: все эти советы здесь, чтобы получить больше вашего бренда, добавленного в корзины и КУПЛЕННОГО. Если вы не видите эти очень реальные результаты после капитального ремонта вашего сайта Shopify; может быть другой подход для рассмотрения!

4 лучших инструмента оптимизации изображений для Shopify

1. TinyIMG
$0 - $4.99/месяц
4.9 🌟

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

2. SEO Suite
Бесплатно
4.9 🌟

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

3. Alt Text
$1.99/месяц
4.8 🌟

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

4. Page Speed Image Optimizer
$0 - $19/месяц
4.7 🌟

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

Начните с услуг фотографии товаров с soona

Прежде чем заботиться о размерах изображений, форматах файлов и поисковой оптимизации, вам нужны высококачественные фотографии для каждого раздела вашего сайта Shopify! В soona мы покрыли вас вдохновением для лайфстайл фотографии, лучшими практиками для фотографии электронной коммерции и как подготовиться к фотосессии. Когда вы готовы начать создавать контент ваших мечт, забронируйте съемку с нами всего за $39/фото, плюс ежемесячная подписка или разовая плата за бронирование.