Оптимизация изображений для сайта онлайн и пакетная конвертация в JPG,PNG,WEBP и изменение размера фото

В данном видео мы разберем:

• как оптимизировать изображения/фото он-лайн, с возможностью пакетной конвертации в JPEG, PNG или в WEBP;
• параллельное изменение размера и пропорций изображений.

Оптимизировать изображения с помощью Bulkresizephotos

Пакетная оптимизация изображений для сайта интернет магазина

Рассмотрим на примере импорта товаров для интернет-магазина. Разные поставщики могут выдавать фотографии товаров в разном формате:

• Картинки в формате PNG с прозрачностью. Одно такое квадратное изображение 900*900 пикселей весит почти 1,5 Мб.
• Картинки в формате JPEG. Они могут быть очень большого размера (разрешение 3000*3000 пикселей);
• Картинки, которые идут с вертикальной или горизонтальной ориентацией.

Для чего необходимо оптимизировать изображения

Начнем с того, что все это очень неудобно. Если их импортировать на сайт, как есть сейчас, то они будут занимать гораздо больше места на сервере. Потому что картинка разрешения 900*900 пикселей не должна весить 1,5 Мб. Она может весить в несколько десятков раз меньше, если ее конвертировать и оптимизировать. Нет смысла заливать на сайт картинки размером 3000 на 3000 пикселей, если вы не хотите показать очень маленькие детали. Или если это не макросъемка. Потому что с телефона их вряд ли кто-то увидит.

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

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

Конвертация изображений + изменение размера и пропорций

Сейчас у нас есть 150 картинок общим размером/весом порядка 96 мегабайт. Тут есть картинки с вертикальной ориентацией, квадратной ориентацией, картинки с прозрачностью в PNG и картинки очень большого размера в JPEG.

Для их оптимизации, конвертации и изменения размера мы воспользуемся онлайн сервисом, называется он «bulkresizephotos» или сайт bulkresizephotos.com. Это абсолютно бесплатный сервис, то есть не нужно ничего покупать и не нужно устанавливать какое-то программное обеспечение.

Настройки конвертации изображений

Для конвертации изображений можно просто «закинуть» картинки и выбрать нужные настройки:

• Мы выделяем все наши картинки;
• Перетаскиваем их на сайт;
• Выбираем, какие операции нам нужно произвести.

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

Далее мы выбираем формат изображения: JPEG, PNG и WEBP. Формат PNG нам не нужен, потому что нас не интересует прозрачность. Нас интересует минимальный размер картинки, поэтому я выберу JPEG, как наиболее популярный.

Таким образом, на выходе мы получим следующее:

• Картинки, которые были в PNG с прозрачностью, сейчас конвертируются в JPEG и преобразуются в квадрат с изменением размера.
• Вертикальные картинки преобразуются в квадрат, уменьшатся и задний фон дополнится до квадрата.
• Картинки, которые были очень большого размера 3000 на 3000 пикселей, но подходящих пропорций, просто масштабируются/уменьшаться.

Экспертный режим настроек

В онлайн сервисе «bulkresizephotos» есть обычный режим, с минимальным количеством настроек. Есть экспертный режим, в котором мы можем выбрать:

• Качество изображения. Чем большее сжатие, тем получается больше потеря качества, и чем меньшее сжатие, тем меньшая потеря качества. В обычном режиме выбраны оптимальные настройки, подходящие под большинство вариантов.
• Цвет заливки заднего фона при дополнении до квадрата. В данном случае стоит белый цвет — нас это устраивает. Он используется, когда нужно заполнить часть изображения.

Проверка готовых изображений

После того, как все фото обработались, мы видим, что изначально размер (93,96 Мб) уменьшился до 8,31 Мб — примерно в 10 раз. Плюс мы сэкономили кучу времени на автоматизации операций изменения размера, дорисовки и заполнения заднего фона.

Далее скачиваем архив с оптимизированными изображениями и видим:

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

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

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

Если у Вас возникли вопросы по пакетной оптимизации изображений с помощью bulkresizephotos, то Вы можете задать свой вопрос в комментариях. Я постараюсь максимально подробно на него ответить. Если Вы не хотите разбираться с какими-то техническими моментами, и Вам просто нужен результат, то Вы можете и оставить заявку на обратную связь. Мы обсудим, как я смогу Вам помочь.