Если вы управляете интернет-магазином, оптимизация изображений - искусство, которым вам просто необходимо овладеть. От привлечения покупателей к просмотру изображений в Google до сокращения времени загрузки сайта - оптимизация изображений является важной частью создания сайта электронной коммерции, поскольку фотография товаров является краеугольным камнем вашего интернет-магазина.
Оптимизация изображения заключается в максимально возможном уменьшении размера изображения без ущерба для качества.
Название изображения
Обязательно называйте ваши изображения. В названии используйте ключевое слово или предложение, описывающее картинку. Название должно быть простым и понятным. Использование релевантных ключевых слов положительно влияет на SEO и ранжирование вашего интернет-магазина в поисковиках. Создание описательных, богатых ключевыми словами имен файлов имеет решающее значение для оптимизации изображений. Поисковые системы сканируют не только текст на вашей веб-странице, но также и имена файлов изображений. Например, возьмем эту картинку: 
Вы можете использовать общее название, которое камера присвоила изображению (например, DCIMAGE11.jpg). Однако было бы гораздо лучше назвать файл Ford-Mustang-LX-Red.jpg. Такое название сужает поиск, это изображение увидят только те, кто интересуется красным "Мустангом" или "Мустангом" модели LX. Чтобы правильно подобрать релевантный ключевик, посмотрите на аналитику вашего сайта - вы увидите, какие шаблоны ключевых слов используют ваши клиенты.
Оптимизация атрибутов alt
Атрибуты Alt - текстовая альтернатива изображениям, когда браузер не может правильно их отобразить. Они также используются для обеспечения веб-доступности. Помимо этого добавление соответствующих атрибутов alt, включающих релевантные ключевые слова, может помочь вам повысить рейтинг в поисковых системах. Это один из наилучших способов отображения ваших товаров в разделе "Картинки" в поисковиках. Вот несколько простых правил для атрибутов alt:
- Используйте релевантные ключевые слова и описания;
- Если вы продаете товары с номерами моделей или серийными номерами,указывайте их;
- Не заполняйте атрибуты alt поисковыми фразами (например, alt = "ford mustang купить дешево лучшая цена").
Правильно выбирайте угол съемки
Наиболее распространенной практикой демонстрации товаров в интернет-магазинах является публикация нескольких фотографий с разных углов. Возвращаясь к примеру с "Мустангом", вот что нужно показать на изображениях:
- Интерьер;
- Панель управления;
- Двигатель;
- Колеса.
При описании таких фотографий используйте уточнение: салон, двигатель, зеркало заднего вида и т.д. Вот как может выглядеть атрибут alt для нашего красного "Мустанга":
2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> с использованием атрибута alt для: alt = "2012 Ford Mustang LX Красная кожаная отделка салона"
Ключевым моментом здесь является добавление описаний к вашему базовому атрибуту alt, чтобы потенциальные пользователи увидели вашу фотографию.
Уменьшение размера файла
Вы уверены, что страница вашего интернет-магазина загружается меньше, чем за 3 секунды? А может быть, слишком тяжелые изображения увеличивают время загрузки до 10-15-20 секунд? Если это так, то пришла пора оптимизировать размер ваших изображений. Сделать это можно с помощью специальных онлайн-сервисов и программ: TinyPNG / TinyJPEG, Compressor.io, Kraken, JPEGmini, Optimizilla, Shortpixel, Resize Photo. Последняя программа особенно хороша, так как она позволяет вам работать с 5 форматами: JPG, PNG, GIF, BMP и PSD. Если у вас установлен Adobe Photoshop, вы можете пакетно оптимизировать изображения, используя команду «Сохранить для Web». В видеоролике, представленном ниже, подробно рассказывается, как это сделать: https://www.youtube.com/watch?v=HLXI33uw1-c
Выбор правильного типа файла
Существует три распространенных типа файлов, которые используются для публикации изображений в Интернете: 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.
Вот несколько советов, которые следует помнить при выборе типов файлов:
- Для интернет-магазинов в большинстве случаев JPEG станет лучшим выбором;
- Никогда не используйте GIF для больших изображений. Размер файла будет очень большим, и нет хорошего способа уменьшить его. Используйте GIF-файлы только для миниатюр и декоративных изображений;
- PNG могут быть хорошей альтернативой как JPEG, так и GIF. Если вы можете получать фотографии только в формате PNG, попробуйте использовать PNG-8 вместо PNG-24.
Оптимизируйте миниатюры
Многие интернет-магазины используют миниатюрные изображения, особенно на страницах категорий. Это и быстрый просмотр товаров, и лента "С этим товаром также берут" и т.д. Их главное преимущество в том, что они демонстрируют клиенту товар, привлекая его внимание, увеличивая вовлеченность: 
Однако будьте осторожны! Миниатюры, не смотря на свой маленький размер, могут значительно увеличить скорость загрузки вашей страницы. Вы можете потерять потенциального клиента. Вот несколько советов по оптимизации миниатюр:
- Делайте размер миниатюр как можно меньше. Подумайте о том, чтобы заменить их слайдами;
- Измените текст атрибута alt, чтобы он не дублировал текст, который вы использовали для больших версий того же изображения. В противном случае велика вероятность того, что будет проиндексирована миниатюра, а не полноразмерное изображение.
Используйте Sitemap
Если на вашем сайте используются галереи Javascript, всплывающие окна с изображениями или другие «кричащие» способы улучшения общего процесса совершения покупок, карты сайта с изображениями помогут Google заметить ваши изображения. Поисковые алгоритмы не могут сканировать изображения, которые не отображаются в специальном исходном коде веб-страницы. Таким образом, чтобы сканеры знали об изображениях, вы должны указать их местоположение на карте сайта. Вы можете вставить следующую строку в ваш файл robots.txt, показывая путь к ней:
Карта сайта: http://example.com/sitemap_location.xml
У Google есть много рекомендаций по публикации изображений, которые могут помочь вашему сайту занять более высокую позицию в поисковой выдаче.
Остерегайтесь декоративных изображений
Веб-сайты часто используют декоративные изображения: фоновые изображения, кнопки и границы - все те изображения, которые не связаны с товаром. И хотя они придают страницам интернет-магазина эстетическую привлекательность, очень большой их объем может привести к снижению скорости загрузки. 
Чтобы не попасть в эту ловушку, вы можете использовать CSS- или HTML. Для изображений границ и простых рисунков выбирайте формат PNG-8 или GIF. Так в сможете создавать красивые изображения размером всего несколько сотен байт.
Соблюдайте осторожность при использовании CDN
Сети доставки контента (CDN) - идеальное место для размещения изображений и других медиафайлов. Они могут увеличить скорость загрузки вашей страницы и помочь решить проблемы с пропускной способностью. Единственный недостаток - когда дело доходит до обратных ссылок. Как вы, возможно, знаете, обратные ссылки имеют решающее значение для SEO, и чем больше у вас обратных ссылок, тем лучше ваш сайт ранжируется в поисковых системах. Размещая свои изображения в CDN, вы, скорее всего, удаляете изображение из своего домена и помещаете его в домен CDN. Поэтому, когда кто-то ссылается на ваш образ, он фактически ссылается на домен CDN.
Регулярно тестируйте изображения
Весь смысл оптимизации ваших изображений заключается в том, чтобы помочь увеличить скорость загрузки сайта. Но как насчет тестирования самих изображений, чтобы увидеть, какое из них конвертирует большее количество клиентов?
- Протестируйте количество изображений товара на странице. Вы можете обнаружить, что уменьшение количества изображений на странице приведет к увеличению числа кликов и продаж;
- Проверьте, какие фотографии предпочитают ваши клиенты с точки зрения угла съемки. Возможно, их больше интересует вид сверху или сбоку.
Оптимизация изображения является сложной, но очень важной задачей. Надеемся, наши советы помогут вам в этом.
