Центр поддержки
Получите ценные советы и руководства от наших экспертов.
Популярные ключевые слова:

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

Avatar
Куратор раздела: Николай
Последнее обновление 12 мая 2020 г.

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

Оптимизация веб-изображений - что это? Как быстро разобраться в оптимизации? Ответы на эти вопросы вы найдете ниже.

Содержание статьи:

  1. Что такое оптимизация графических изображений и зачем это нужно онлайн-магазину?
  2. Характеристики фотографии: размер, формат и качество
  3. Методы оптимизации: приложения и сервисы.
  4. Как правильно заполнять аlt, title и создавать Sitemap-файл
  5. Дополнительная оптимизация картинок.

1. Что такое оптимизация графических изображений и зачем это нужно онлайн-магазину?

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

Онлайн-магазины часто сталкиваются с такими проблемами:

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

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

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

Для фото, которые помещаются в сеть, это означает:

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

Разберем все постепенно.

2. Характеристики фотографии: размер, формат и качество

Это основа оптимизации.

Размер

Картинка занимает пространство на диске (в килобайтах и в мегабайтах - сокращенно кБ и МБ). Фото, которое сделано с помощью мобильного телефона, будет весить в среднем 5 мегабайт. Фотография с профессионального фотоаппарата займет в пять раз больше места на диске. Она идеально подойдет для печати. Но веб-изображение не должно весить много. Если эскиз предназначен для размещения на веб-ресурсе, будет достаточно 600 килобайт. Ведь он будет представлен в сжатом размере для просмотра на экране и даже с небольшим разрешением будет смотреться хорошо.

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

Формат

Браузеры и поисковики работают с такими форматами: JPEG, PNG, GIF и WEBP. Именно поэтому рекомендуется использовать именно их.

Каждый из них имеет своих особенности.

  1. JPEG является наиболее распространенным в цифровом пространстве. Формат поддерживает множество цветов и оттенков, с ним просто работать. Веб-изображение легко редактируется. В результате изменения размера, картинка по-прежнему остается хорошего качества.
  2. PNG это формат с более широким диапазоном цветов, в сравнении с JPEG. Главной особенностью PNG является поддержка прозрачного фона.
  3. GIF занимает меньше дискового пространства, в отличие от предыдущих форматов. При этом картинка будет иметь худшее качество. Данный формат рекомендуется использовать для миниатюр или значков. К тому же это единственный формат с поддержкой анимации.
  4. WEBP - относительно новый формат. Веб-изображение так же занимает мало места. Но стоит учесть ухудшение качества. Главным недостатком является то, что на сегодняшний день не все браузеры работают с форматом.

Качество

Разрешение - это показатель, по которому можно определить, из скольких точек состоит конкретное веб-изображение. Точки - это пиксели. От количества пикселей зависит четкость картинки.

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

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

Давайте разберемся на простом примере. Вы смотрите рассматриваете платье на сайте магазина одежды. Фотография платья имеет разрешение в 5 тысяч пикселей. Вам не нравится миниатюра из-за того, что на ней не видно деталей изделия. Вы хотите посмотреть фото в большом размере. Но на экран попадет только его фрагмент, ведь остальные части не поместились. Дело в том, что экран имеет разрешение в 1080 пикселей, в то время как картинка - 5 000 пикселей.

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

Достаточным разрешением для изображения, которое будет выставлено в интернет-магазине, - 600*900 пикселей. Можно отклониться немного отклониться от стандарта.

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

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

  1. вес: примерно 300 килобайт;
  2. разрешение: не больше 1000 пикселей;
  3. формат: JPEG, если нужен прозрачный фон - используем PNG, нужна анимация - GIF, формат WEBP только при поддержке браузера.

3. Методы оптимизации: приложения и сервисы

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

  1. Редакторы с платной подпиской. Их существует достаточно много. Самыми удобными считаются Photoshop и Lightroom. Второй редактор предлагает функцию автоматической обработки всех картинок.
  2. Бесплатные программы. Рекомендуем попробовать GIMP и XnConvert.
  3. Онлайн-сервисы: Compressjpeg, Compresspng, Сanva.
  4. Сервисы для сжатия: JpegMini, TinyPNG и TinyJPG, ImageOptimizer. Не рекомендуется делать сжатие сильнее, чем на 80 процентов для сохранения качества.

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

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

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

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

Alt

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

Рекомендации по заполнению alt:

  1. alt заполняется для всех картинок;
  2. лучше использовать словосочетания, которые помогут пользователю найти нужный товар;
  3. пишите точные ключевые вхождения.

Title

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

Sitemap-файл

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

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

Еще несколько рекомендаций, которые позволят эффективнее провести оптимизацию для онлайн-магазина:

  1. Учитывайте названия файлов

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

Пример:

Неправильное название: DКC0007.png

Правильное название: converse_children.png

Продумайте запросы, которые чаще всего вбивают пользователи при поиске конкретного товара в сети Интернет. К примеру, "купить кроссовки детские фирмы Сonverse", "заказать детские Конверс", "кроссовки от Конверс", "заказать Convers для детей", "купить онлайн Convers" и так далее. Позаботьтесь о том, чтобы в названии файла присутствовали ключевики. Так появится большая вероятность, что пользователь попадет именно на ваш сайт.

  1. Уменьшайте эскизы фотографий. Так вы ускорите загрузку веб-страниц.

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

  1. Мониторьте показатели загрузки.

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

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

Примите наши поздравления! Теперь вам известно все о правильной оптимизации для интернет-магазина.

Вспомним самое важное

Критерии оптимизации:

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

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

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

  • Пишите нам
  • Звоните
    8 902 579 86 90
Написать в поддержку
Icon