Оптимизация изображений для интернет-магазинов

Fima Korolev

Оптимизация изображений

 

Как правильно оптимизировать изображения на сайте

 

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

1. Оптимизация имени изображения

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

Серый 3 пуговичный мужской костюм

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

  • имя файла изображения
  • Alt тег изображения
  • Название (Title) изображения

 

Для этого продукта, например, вместо того, чтобы IMAGE_322.jpg для имени файла, лучшим выбором будет имя файла: seriy-3-pugovitsy-muzhskoy-kostym.jpg.
Есть множество вариантов, которые вы можете использовать, чтобы назвать этот файл, но в целом это лучше использовать сервисы по выбору ключевых слов, чтобы называть изображения наиболее востребованными при поиске товаров ключевыми словами, либо использовать слова из заранее созданного семантического ядра сайта.
Alt тег для изображения крайне важен, так как браузер будет отображать альтернативный текст, когда изображение не может быть отображено правильно. Alt теги также важны для слабовидящих, так как они полагаются на программное обеспечение для чтения тегов изображения Alt, сообщающее им то, что находится на изображении.
Каждая фотография должна иметь свой уникальный и соответствующий тег Alt. Для простоты, вы можете использовать имя файла для Alt тег изображения, но без дефиса:

Рекомендую к прочтению:  Как правильно пользоваться wordstat

<img src=”seriy-3-pugovitsy-muzhskoy-kostym.jpg” alt=”Серый 3 пуговичный мужской костюм”>.

2. Оптимизация загрузки изображения

Это может показаться не так много, но несколько дополнительных секунд времени загрузки вашего сайта может стоить вам клиентов. Согласно данным статистики сайта kissmetrics.com, большинство потребителей ждут открытия страниц сайта около 5 секунд на своем мобильном устройстве, прежде чем покидают сайт. Пользователи настольных компьютеров ждут и того меньше, 3 секунды в среднем. Вот хорошее правило для изображения: чем больше размер файла, тем больше времени требуется для загрузки страницы. Для борьбы с этой проблемой, вы можете уменьшить размер каждого изображения, сжимая их. Если ваш сайт электронной коммерции имеет только несколько не сжатых изображений, вы можете использовать любой из этих инструментов для редактирования изображений (все ссылки открываются в новом окне):

Если же у вас есть сотни (или даже тысячи) фотографий, сжимание их по одной за раз не будет является жизнеспособным вариантом. Предлагаю использовать следующие сервисы, которые могут сжимать изображения в пакетном режиме.
Если ваш сайт работает на WordPress, скачать любой из этих плагинов:

Есть подобные инструменты и расширения для других CMS, таких, как например Magento и Joomla.

3. Выбрать оптимальные типы файлов изображений

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

  • JPEG
  • PNG
  • GIF

 

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

Рекомендую к прочтению:  Оптимизация сайта под социальные сети.


Куртки зимние

. JPG файлов на 68,7 KB

Kurtki-PNG

. PNG файлов на 195,3 КБ

Kurtki-GIF

. GIF файлов на 51,3 KB

4. Создание образа Карты сайта

Наряду с оптимизацией изображения, вы можете увеличить шанс попадания изображения вашего продукта в индекс ПС путем добавления изображения в карту сайта, и отправки ее в Google Webmaster Tools. Это особенно важно, если ваши изображения продукта создаются с использованием JavaScript, и не отображаются в исходном коде страницы.
Есть целый ряд инструментов, которые могут генерировать карту сайта:

Ну вот, в принципе и все, что я хотел сегодня рассказать.
[stextbox id="info" caption="Не забываем подписываться на обновления!"]Подписывайтесь на RSS, E-mail рассылку, следуйте за мной Twitter, что бы получать первыми новые и полезные статьи.[/stextbox]

VN:F [1.9.22_1171]
Рейтинг статьи:
Rating: 7.0/7 (4 votes cast)
Оптимизация изображений для интернет-магазинов, 7.0 out of 7 based on 4 ratings

6 комментариев »

  1. Андрей:

    Используя для сжатия изображений бесплатные сервисы TinyPng и Kraken, очень доволен качеством их работы.

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  2. Уникализация тоже не помешает. Поворот на 10-15 градусов меняет отношение поисковиков к уникальности изображения в лучшую сторону :).

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  3. kostik:

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

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  4. PokerBonus:

    Интересно написано – познавательно. Никогда не придавал этому большое внимание, теперь займусь этим.

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  5. Ирина:

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

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  6. elimS:

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

    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Что-то типа КАПЧИ :) *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">