Советы по оптимизации изображений

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

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

1. Название изображения

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

Например, возьмем эту картинку:

Вы можете использовать общее название, которое камера присвоила изображению (например, DCIMAGE11.jpg). Однако было бы гораздо лучше назвать файл Ford-Mustang-LX-Red.jpg. Такое название сужает поиск, это изображение увидят только те, кто интересуется красным «Мустангом» или «Мустангом» модели LX.

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

2. Оптимизация атрибутов alt

Атрибуты Alt — текстовая альтернатива изображениям, когда браузер не может правильно их отобразить. Они также используются для обеспечения веб-доступности. Помимо этого добавление соответствующих атрибутов alt, включающих релевантные ключевые слова, может помочь вам повысить рейтинг в поисковых системах. Это один из наилучших способов отображения ваших товаров в разделе «Картинки» в поисковиках.

Вот несколько простых правил для атрибутов alt:

  • Используйте релевантные ключевые слова и описания;
  • Если вы продаете товары с номерами моделей или серийными номерами,указывайте их;
  • Не заполняйте атрибуты alt поисковыми фразами (например, alt = «ford mustang купить дешево лучшая цена»).
3. Правильно выбирайте угол съемки

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

  • Интерьер;
  • Панель управления;
  • Двигатель;
  • Колеса.

При описании таких фотографий используйте уточнение: салон, двигатель, зеркало заднего вида и т.д. Вот как может выглядеть атрибут alt для нашего красного «Мустанга»:

2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> с использованием атрибута alt для: alt = «2012 Ford Mustang LX Красная кожаная отделка салона»

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

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

Вы уверены, что страница вашего интернет-магазина загружается меньше, чем за 3 секунды? А может быть, слишком тяжелые изображения увеличивают время загрузки до 10-15-20 секунд? Если это так, то пришла пора оптимизировать размер ваших изображений. Сделать это можно с помощью специальных онлайн-сервисов и программ: TinyPNG / TinyJPEG, Compressor.io, Kraken, JPEGmini, Optimizilla, Shortpixel, Resize Photo. Последняя программа особенно хороша, так как она позволяет вам работать с 5 форматами: JPG, PNG, GIF, BMP и PSD.

Если у вас установлен Adobe Photoshop, вы можете пакетно оптимизировать изображения, используя команду «Сохранить для Web». В видеоролике, представленном ниже, подробно рассказывается, как это сделать:

5. Выбор правильного типа файла

Существует три распространенных типа файлов, которые используются для публикации изображений в Интернете: JPEG, GIF и PNG. Они по-разному влияют на изображение.

Тип файла JPEG

Изображения в формате JPEG (или .jpg) являются файлами старого типа. За все свое время существования формат JPEG стал стандартным изображением Интернета. Изображения JPEG можно сжать очень сильно без потери качества.

Тип файла GIF

Изображения GIF (.gif) имеют более низкое качество, чем изображения JPEG, и используются для упрощенных значков, иконок, пиктограмм и декоративных изображений. GIF-файлы также поддерживают анимацию. GIF-изображения маленького размера не утяжеляют страницу. Чего нельзя сказать о больших.

Тип файла PNG

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

Обратите внимание, что размер файла PNG-24 в три раза больше, чем PNG-8. Вот почему вы должны быть очень осторожны с PNG.

Вот несколько советов, которые следует помнить при выборе типов файлов:

  1. Для интернет-магазинов в большинстве случаев JPEG станет лучшим выбором;
  2. Никогда не используйте GIF для больших изображений. Размер файла будет очень большим, и нет хорошего способа уменьшить его. Используйте GIF-файлы только для миниатюр и декоративных изображений;
  3. PNG могут быть хорошей альтернативой как JPEG, так и GIF. Если вы можете получать фотографии только в формате PNG, попробуйте использовать PNG-8 вместо PNG-24.
6. Оптимизируйте миниатюры

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

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

  • Делайте размер миниатюр как можно меньше. Подумайте о том, чтобы заменить их слайдами;
  • Измените текст атрибута alt, чтобы он не дублировал текст, который вы использовали для больших версий того же изображения. В противном случае велика вероятность того, что будет проиндексирована миниатюра, а не полноразмерное изображение.
7. Используйте Sitemap

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

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

Карта сайта: http://example.com/sitemap_location.xml

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

8. Остерегайтесь декоративных изображений

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

Чтобы не попасть в эту ловушку, вы можете использовать CSS- или HTML. Для изображений границ и простых рисунков выбирайте формат PNG-8 или GIF. Так в сможете создавать красивые изображения размером всего несколько сотен байт.

9. Соблюдайте осторожность при использовании CDN

Сети доставки контента (CDN) — идеальное место для размещения изображений и других медиафайлов. Они могут увеличить скорость загрузки вашей страницы и помочь решить проблемы с пропускной способностью. Единственный недостаток — когда дело доходит до обратных ссылок. Как вы, возможно, знаете, обратные ссылки имеют решающее значение для SEO, и чем больше у вас обратных ссылок, тем лучше ваш сайт ранжируется в поисковых системах. Размещая свои изображения в CDN, вы, скорее всего, удаляете изображение из своего домена и помещаете его в домен CDN. Поэтому, когда кто-то ссылается на ваш образ, он фактически ссылается на домен CDN.

10. Регулярно тестируйте изображения

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

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

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

Меню