Методы сжатия изображений формата JPG: прогрессивный и базовый

9.4.2020
Данные отсутствуют

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

Пожалуй, для многих не станет открытием, что для встраивания в код сайта изображения необходимо “сжимать”, то есть уменьшать их первоначальный вес, особенно это актуально для особо “тяжелых” форматов типа .ttf или .raw, используемых в профессиональной фотосъемке. Самым оптимальным форматом для сжатия изображений, если ключевым моментом не является сохранение прозрачности слоя, является JPG. При этом существуют два метода сжатия:

  • базовый;
  • прогрессивный.

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

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

Какой способ сжатия фото лучше использовать для сайта?

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

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

Я пользуюсь инструментом Adobe Photoshop Файл/Сохранить как/Формат сжатия JPG/Прогрессивный метод сжатия (выбрать подходящий баланс для сжатия 30-80%).

Обсудить в Instagram
Другие статьи