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

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 МБ.
• Грамотно заполненные поисковые атрибуты и имя файла.
• Возьмите за правило оптимизировать каждое изображение для всех товаров в интернет-магазине.

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

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