Как оптимизировать фотографии товаров для интернет-магазина

Весь мир переходит в скоростной онлайн-режим. Логично, что успеха добьётся тот, кто действует быстрее всех. Чтобы «разогнать» свой интернет-магазин, начать стоит с главного — с того, что важнее слов... С фотографий товаров! Что такое оптимизация фотографий и как с ней справиться самостоятельно — с этим разбираемся сегодня.

Сжатие фотографии

1. Что такое оптимизация фотографий и зачем она нужна интернет-магазину

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

Интернет-магазинам знакомы такие проблемы:

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

Поэтому второе, о чём стоит позаботиться, — чтобы избежать этих проблем, — это оптимизировать фотографии товаров.

Оптимизация — это процесс выявления выгодных характеристик и их соотношений, и избавления от лишнего.

Для фотографий в интернете это значит:

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

Рассказываем по порядку.

2. Характеристики изображения: размер, разрешение и формат файла

Три кита, на которых держится оптимизация изображений — это размер, разрешение и формат изображения.

Размер

Размер файла измеряется в килобайтах (кБ) или мегабайтах (МБ). Фотография, сделанная смартфоном, «весит» примерно 5 МБ, цифровым фотоаппаратом — раз в 5 больше. Прекрасно для того, чтобы напечатать снимки в альбом. Но для веб-изображений достаточно всего 100–500 кБ, а это в десятки раз меньше! На экране фотография такого размера смотрится точно так же хорошо.

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

Разрешение

Разрешение — это величина, которая показывает количество точек в цифровом изображении, из которых оно состоит.

Точки называются пикселями (pixels). Чем больше пикселей в изображении, тем оно чётче. Но не всегда обязательно нужно максимальное разрешение, чтобы фотографию было хорошо видно.

Как определить, сколько пикселей нужно изображению на странице?

Экраны разных устройств тоже состоят из пикселей — их количество показывает разрешающую способность экрана. 1 пиксель экрана равен 1 пикселю изображения.

Вот простой пример. Вы открываете фотографию кроссовок на экране и просматриваете её при 100%-м масштабе. Это качественный, большой снимок в 4000 пикселей. Но на экране вы видите только кусок фотографии — остальное не помещается. Почему так? Потому что разрешающая способность экрана не 4000 пикселей, а 1080, а то и меньше — зависит от конкретного устройства. Чтобы показать картинку на экране целиком, её разрешение необходимо уменьшить до разрешения этого экрана. Допустим, мы просто понизим масштаб изображения со 100% до 25% — и вот наши кроссовки уже полностью видны!

Уменьшение фотографии

Хотя мы вроде бы добились нужного эффекта, но делать так постоянно не стоит. Почему? Первое — пересчёт пикселей при изменении масштаба занял какое-то (лишнее) время. Второе — мы видим уменьшенную картинку, которая «весит» столько же, сколько и полноразмерная. Так зачем «переплачивать»: тратить время, место на сервере и интернет-трафик, если полноразмерная картинка на экране всё равно не нужна?

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

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

Пиксели

В Shop-Script можно загружать фотографии любого размера. Для отображения на витрине их размер изменится автоматически и адаптируется под вашу тему дизайна. Поэтому страница будет загружаться быстро независимо от размера загруженной фотографии — эту часть оптимизации берёт на себя Shop-Script. Однако если вы добавляете очень «тяжёлые» картинки, то напрасно тратите на них лишнее место на диске сервера и переплачиваете за хостинг.

Формат

Браузеры и поисковые системы поддерживают форматы JPEG, PNG, GIF и WEBP. Поэтому их используют чаще остальных.

У каждого формата свои особенности:

  • JPEG — самый распространённый в цифровом пространстве формат. Он поддерживает широкий диапазон цветов, с ним легко работать: редактировать и изменять размер, сохраняя отличное качество.
  • PNG — имеет более широкий цветовой диапазон, чем JPEG. Главная особенность формата — он поддерживает прозрачный фон картинок.
  • GIF — при одном и том же размере занимает меньше места, чем JPEG или PNG, но хуже по качеству. Этот формат идеален для миниатюр: небольших знаков, логотипов или иконок. И единственный из этих популярных форматов, который поддерживает анимацию.
  • WEBP — самый «молодой» из перечисленных форматов. При одинаковых пропорциях фотография в этом формате «весит» меньше, чем JPEG или PNG, но при этом может немного потерять в качестве. Недостаток WEBP в том, что он пока доступен не для всех браузеров. Этот формат сегодня поддерживают Google Chrome, Opera и Firefox.

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

  • Размер: в среднем 300 кБ.
  • Разрешение: до 1000 пикселей по каждой стороне.
  • Формат: JPEG — для любых изображений, PNG — если нужен прозрачный фон, GIF — для анимации или небольших знаков, WEBP — если браузеры ваших клиентов его поддерживают.

Теперь расскажем, где вы сможете «поколдовать» над своими фотографиями и получить нужные вам размер, разрешение и формат.

3. Способы оптимизации фотографий: программы и сервисы

В интернет-магазине на одной странице могут размещаться десятки и даже сотни фотографий товаров. Где их можно правильно подготовить и оптимизировать?

В специальных программах! Какие они бывают:

  • Платные графические редакторы. Их много. Но самые лучшие, по мнению, профессиональных дизайнеров, — это Photoshop и Lightroom. Во второй можно настроить автоматизацию — пакетную обработку всех снимков.
  • Бесплатные графические редакторы. Посоветуем GIMP — мы им часто пользуемся в работе.
  • Онлайн-сервисы: Compressjpeg, Compresspng, Сanva.
  • Сервисы для сжатия картинок. Подойдут, если картинку надо просто уменьшить: JpegMini, TinyPNG и TinyJPG, ImageOptimizer. Советуем сжимать не более, чем на 70–80%, иначе визуально фотография сильно ухудшится.

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

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

Но не одним «весом», как говорится... Для максимальной оптимизации изображений нужно сделать ещё несколько шагов: заполнить атрибуты alt и title для каждой картинки и проверить содержимое Sitemap-файла. Расскажем, как всё это сделать.

4. Как правильно заполнить alt, title и сформировать Sitemap-файл

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

Alt

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

Альт картинки

Несколько советов для заполнения атрибута alt:

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

Title

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

Тайтл картинки

HTML-код может выглядеть так:

<img src="/footwear/men/converse/chuck-taylor-the-simpsons/"
alt="Фото Converse Chuck Taylor Simpsons"
title="Кроссовки Converse Simpsons">

Sitemap-файл

Sitemap-файл — это карта сайта в формате XML. На него также опираются поисковые системы, чтобы быстрее найти данные и правильно индексировать страницы.

В Shop-Script Sitemap-файл создаётся автоматически и доступен по адресу вида http://ваш_домен/sitemap.xml.

Подробнее о Sitemap-файлах читайте в справке Shop-Script. Подробнее о Sitemap-файлах для изображений в поисковиках можете прочитать в справке Google и в справке «Яндекса».

Подведём итоги и дадим ещё несколько полезных советов!

5. Дополнительная оптимизация изображений

Ещё несколько полезных советов, которые помогут организовать более качественную оптимизацию всех ваших изображений:

  1. Обращайте внимание на имена файлов

    Это важно. Поисковики «Яндекс» и Google обращают внимание и на имя файла тоже. Лучше, чтобы оно соответствовало содержимому картинки.

    Пример

    Неправильно: DSC0001.jpg
    Правильно: converse_men_simpsons.jpg

    Подумайте, по каким запросам пользователи ищут товары. Например, так: «кроссовки Сonverse Simpsons мужские», «Сonverse men Симпсонс», «мужские конверс симпсонс», «кроссовки Simpsons мужские» и т. п. Укажите ключевые слова в имени файла, и покупатель с большей вероятностью найдёт ваш товар.

  2. Увеличивайте скорость загрузки страницы за счёт уменьшенных эскизов изображений

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

  3. Проверяйте скорость загрузки страниц

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

Поздравляем! Теперь вы знаете, как оптимизировать фотографии товаров.

Напомним о самом важном:

  • Критерии оптимизированной фотографии:
    • Картинка хорошего качества: чёткая и без «шумов». Словом, такая, чтобы вам нравилась.
    • Размер до 1 МБ.
    • Грамотно заполненные поисковые атрибуты и имя файла.
  • Возьмите за правило оптимизировать каждое изображение для всех товаров в интернет-магазине.

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

А если вы уже опытный «оптимизатор», поделитесь своим опытом и разными хитростями в комментариях — этим вы очень поможете начинающим предпринимателям, в числе которых когда-то были и вы!

Смотрите также
Все статьи

«Отзывы в интернет-магазине: как правильно с ними работать»

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

«Расширяем клиентскую базу интернет-магазина: инструменты для сбора контактов потенциальных клиентов»

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

«Что такое когортный анализ и зачем он нужен в интернет-магазине»

СтатьяКак измерить пользу рекламной кампании, проанализировать поведение клиентов и использовать результат в будущем.