Блог

Инструменты по сжатию картинок

Часто при тестировании быстродействия сайтов мы сталкиваемся с тем, что сайты загружаются слишком долго ⌛️ Настолько долго, что посетителям хочется покинуть сайт и не ждать его полной загрузки. Причин этому может быть много и самая распространенная из них - это загруженные изображения слишком большого размера 🏞 🌅

Может быть «тяжелые» картинки загрузили по незнанию, а может просто забыли, какие последствия это может повлечь. В любом случае нам, тестировщикам, надо понять, в этом ли проблема.

Всегда перед загрузкой изображений на сайт надо сначала эти изображения сжать ➡️⬅️ Оптимальный вес картинки для сайта 200-400 КБ в зависимости от ее размера, но, конечно, после сжатия не должно ухудшиться качество отображения. Для этого есть много разных инструментов. Мы расскажем про 2 из них. Эти инструменты используются в тестировании, когда надо выявить причину низкой скорости загрузки сайта. С их помощью мы можем проверить, сжаты ли картинки до максимально возможного размера. Как проверить? Если фотография с сайта после сжатия заметно потеряла в весе, значит предварительно ее не сжимали, и это может повлиять на загрузку сайта.

Squoosh


Веб-сервис, у которого также есть и десктопная версия 🖥 (для компьютера). Мы рассмотрим именно веб-приложение. Единовременно можно сжимать только один файл.


Для начала нужно перетащить нашу картинку на страницу или нажать на иконку (либо Paste) в центре экрана и выбрать нужный файл на вашем компьютере в появившемся окне. Мы выбрали фотографию размером 2.05 МБ.


После загрузки картинки на сервис мы можем изменить настройки сжатия. Самые важные из них - это формат итоговой картинки и процент сохраняемого качества. Эти настройки находятся в правом нижнем углу во вкладке Compress. Еще ниже мы можем увидеть, сколько будет весить картинка после сжатия с выбранными настройками. Укажем Quality 25%. Это означает, что качество картинки понизится на 75% ⬇️ И мы можем сразу увидеть результат на экране - перетащим бегунок в центре экрана налево и убедимся, что качество нас устраивает. Также мы видим справа снизу итоговый вес - 403 КБ. Обратите внимание, что невооруженным взглядом очень сложно обнаружить разницу в качестве даже при его 75%-ной потере! Супер! 👏

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


Здесь выберем размер поменьше - 1024 ширина картинку и 768 высота. Результат сразу видим на экране, а чтобы прикинуть, как это будет выглядеть в итоге, изменим в самом низу экрана масштаб картинку на 30%. Двигаем ползунок влево - отлично, качество нам подходит. Если вы продвинутый пользователь ПК 😎 и разбираетесь в том, как устроена графика, то можете поэкспериментировать с остальными настройками сервиса, чтобы получить более оптимальный результат.

Итак, итоговый размер картинки - 69.7 КБ, а ведь был 2.05 МБ! Мы смогли уменьшить вес картинки в 29 раз, вот это да! А разница почти незаметна! Теперь кликаем кнопку скачивания в нижнем правом углу и загружаем файл на сайт ➡️ 🌐

Optimizilla


Другой популярный веб-сервис, который, кстати, позволяет работать одновременно с несколькими файлами (до 20 за раз), а также поддерживает русский язык 😉 Уменьшать размер с помощью Optimizilla можно только для форматов изображений JPEG и PNG.


Сожмем сразу 20 файлов, вес которых в сумме 46.1 МБ. Выполняем аналогичные действия - либо перетаскиваем их на серую область, либо кликаем «Загрузить» и выбираем файлы на нашем компьютере. За несколько секунд все 20 изображений обработаны, и мы видим такую картину:


Каждая картинка была обработана до минимально возможного уровня (по мнению алгоритма сервиса), результат сжатия в процентах пишется на каждом файле. Любое изображение мы можем открыть по клику и ниже увидеть его в формате до/после сжатия. Над исходной и над итоговой картинками пишется вес. Здесь же справа можно вручную указать, какое качество мы хотим сохранить в процентах. Выбираем более низкое качество - 40% ⬇️ Результат нам подходит, вес стал еще меньше, и в итоге он отличается от исходного в 9 раз.

Таким же образом мы можем пройтись по каждой картинке и вручную задать сохраняемое качество изображения. Вот так всего за пару минут можно сжать сразу 20 файлов! После сжатия файлов из 46.1 МБ мы получили 18 МБ! 👏 И это мы вручную настроили сжатие только для одного файла, а если сделать это для всех, то можно добиться намного меньшего веса всех картинок. Теперь нажимаем кнопку «Скачать все», получаем архив с нашими картинками и загружаем их на сайт ➡️ 🌐

Итак, мы рассказали вам про 2 самых популярных инструмента сжатия картинок. Тестировщики часто используют их при анализе быстродействия сайта. Они скачивают картинки с сайта, который долго грузится, и проверяют, сжаты ли они до максимально возможного размера. Squoosh больше подходит для задач, когда нужно сжать одно изображение и сделать это максимально эффективно, а Optimizilla - если надо сжать сразу много файлов.

Желаем приятного сжатия! А также не забывайте, что сжатие сжатием, а качество результата не должно пострадать 🏞 🌅
Made on
Tilda