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

Хочешь в ТОП? Хватит хотеть, пора действовать!

Начать продвижение

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

18 апреля 2018
4.1к
Москва г. Москва, ул. Нобеля 7, п. 56 +7 (800) 700-59-30

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

Шаг 1. Использование описательных названий

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

Шаг 2. Оптимизация alt-описания

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

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

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

если вы продаете товары, модели которых имеют собственные номера, включайте их в alt;

не стоит перенасыщать описание ключевыми фразами;

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

Также не ленитесь периодически уделять внимание правильности оформления описаний.

Шаг 3. На один товар несколько фото

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

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


Шаг 4. Уменьшение размера изображений

Примерно половина пользователей Сети ждут загрузки интернет-магазина не более 3 секунд.

В мире время загрузки сайтов только увеличивается.

Сотрудники Amazon провели исследование и определили, что при увеличении времени загрузки сайта примерно на 1 секунду компания потеряет 1,6 млрд долларов в год.

Скорость загрузки является одним из факторов ранжирования. Этот параметр используется в алгоритме Google.

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

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

Для подобных целей можно использовать Adobe Photoshop. Функционал этой программы позволяет настраивать резкость, цвет, качество изображения, а также формат документа. Кроме того, предусмотрена функция «Оптимизация».

Если вы не хотите покупать Photoshop, то можете воспользоваться одним из представленных в интернете:

Canva,

PIXLR,

PicMonkey и другими.

Также есть и бесплатные десктопные программы. Например, в GIMP можно делать практически все то же самое, что и в Photoshop.

В случае с ecommerce-сайтами размер фото должен быть в пределах 70 кБ. Добиться этого в некоторых случаях бывает крайне тяжело. Однако только так можно увеличить скорость загрузки страницы.

Шаг 5. Использование файлов подходящего типа

На сегодняшний день самыми популярными являются файлы типа PNG, GIF и JPEG.

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

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

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

Если сравнивать все эти три формата, то лучшим из них будет JPEG. Выбирая тип файлов, необходимо учитывать следующие нюансы:

JPEG – лучший формат для интернет-магазинов. Он отличается хорошим качеством и небольшим размером;

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

в случае с PNG отдавайте предпочтение формату PNG-8. Этот тип также используется для небольших картинок.

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


Шаг 6. Оптимизация превью

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

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

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


Шаг 7. Использование sitemap

Если вы используете всплывающие окна, галереи JavaScript или любые другие элементы, улучшающие пользовательский опыт, карты помогут поисковикам не упустить изображения. Роботы индексируют только те изображения, которые имеют название, прописанное в коде. Для облегчения работы поисковиков и более быстрого определения местоположения картинки используется карта сайта. Для этого добавьте в файл robots.txt строчку: Sitemap: http://example.com/sitemap_location.xml. Или отправьте карту через Search Console. Если у вас возникли затруднения при выполнении оптимизации страницы, всегда можно воспользоваться инструкцией, предоставленной Google. Также не лишним будет присвоить каждому изображению определенные теги. Делается это непосредственно в созданном специально для картинки файле или в карте сайта.

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

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

сконвертировать границы и простые картинки в формат GIF или PNG-8;

максимально использовать CSS;

уменьшать размер фоновых изображений.

Шаг 9. Осторожно используйте CDN

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

Шаг 10. Тестирование изображений

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

Протестируйте количество фото на странице.

Определите, какие ракурсы больше всего нравятся вашей аудитории.

Найдите оптимальное количество продуктов для страниц категорий.

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


Оценить статью

7 4.43