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

Сегодня мы поговорим об оптимизации изображений для размещения в интернет-магазине. Изображения могут занимать от 25 до 75% веса загружаемой страницы. Т.е. изображения занимают значительную часть веса страницы. И их вес игнорировать нельзя.

Изображения перед загрузкой на сайт необходимо оптимизировать.
У изображений должен быть оптимальный вес, пропорции и расширение. Тогда они будут легкими и сетка товаров не будет “плясать”.

Изображения занимают на главной странице 44%
Товары в сетке “пляшут” из-за изображения

Какие оптимальные характеристики должны быть у изображений перед загрузкой на сайт?

Я рекомендую следующие параметры:

  • Расширение: JPG
  • Вес: до 120 кб., желательно еще меньше
  • Пропорции: 800х800, 1000х1000, 1200х1200, больше нет смысла.
  • Изображения должны быть квадратными.

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

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

Как оптимизировать изображения? Какие существуют инструменты?

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

Инструменты:

  • Графический редактор Photoshop
  • Онлайн-сервисы
  • Плагины WordPress
  • Другие десктопные программы
Оптимизация изображения в Photoshop

Особенности использования сервисов

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

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

Особенности использования плагинов WordPress

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

Вы загружаете изображение 1 Мб, а получаете на выходе изображение весом 200 кб. Не плохо, но друзья, это все равно много. Например, на странице у вас 20 товаров, у каждого товара миниатюра весит 200 кб., посчитайте сколько будет весить такая страница? Около 4 Мб. Это только изображения, а еще есть стили CSS, скрипты JS и HTML. А если оригинал изображения весит 4 Мб, то мы получим около 400-500 кб. Это при условии, что в плагине вы выставили сжатие 75%. Можно поставить цифру меньшую, но тогда будут серьезные потери в качестве. А если изображение было загружено уже в плохом качестве и плагин его пропустит через себя, то что мы получим? Мы получим очень плохой результат!

Рекомендую прочитать:  Как настроить и проверить адаптивность сайта? Вам помогут Медиа-запросы и Search Console

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

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

Что делать? Каждое изображение через Photoshop пропускать? Замучаетесь! Продвинутые пользователи могут в Photoshop создать экшен и потом выполнить пакетную обработку изображений. Но, здесь нужен опыт.

Сервисы и плагины тоже не вариант.

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

Предыстория. Я делал импорт товаров в интернет-магазин своего заказчика. Он прислал сам файл для импорта и прислал папку с изображениями. Я заглянул в эту папку и ужаснулся. Изображения абсолютно разношерстные (разный размер, вес, пропорции, размещение объекта на изображении и т.д.). Они вообще не готовы для загрузки на сайт. Загрузить такие изображения означало выставить себя некомпетентным и просто наплевать на качество работы. Что делать? Играться в фотошопе, это большие потери времени, сервисы не вариант, плагины тоже. И я начал искать десктопные программы, которые могут пачками обрабатывать изображения по заданным параметрам. Я перебрал десяток сайтов и программ и нашел самородок, который меня устроил на все 100%!

Это программа XnConvert >>> Ссылка! И в видео я расскажу как работать с этой программой и как можно за считанные секунды получить тысячи оптимизированных изображений без потери качества.

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

Смотреть видео

Содержание видео:

  • Вступление. Важность оптимизации изображений?
  • Оптимальные характеристики изображений для интернет-магазина.
  • Оптимизируем изображение в программе Photoshop.
  • Сервисы оптимизации изображений. Минусы сервисов.
  • Плагины WordPress для оптимизации изображений “на лету”. Минусы плагинов.
  • Установка и обзор программы XnConvert.
  • Пакетная оптимизация изображений в XnConvert.
  • Завершение.
Как оптимизировать изображения для интернет-магазина? ➤ Быстрая пакетная обработка изображений
Смотреть это видео на YouTube.
Подпишитесь на канал InwebPress, чтобы узнать больше о создании и настройке сайтов!

🔥 Bono – легкая и быстрая премиум-тема для интернет-магазина. Тема уже на русском! Подробнее

На своем сайте Я рекомендую вам только те решения которыми сам пользуюсь или в качестве которых уверен. Теперь вы знаете как быстро можно на компьютере оптимизировать сотни изображений за 30 секунд.

Программа XnConvert – это быстрая, удобная и простая программа. Вам не нужны сервисы, плагины которые грузят ваш сайт. Вы можете через эту программу пропускать как отдельные изображения так и пачку изображений. И их качество будет на высоте.

Напишите в комментариях понравилась ли вам эта программа и как вы оптимизируете свои изображения?

 

Похожие записи

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии