Методы сжатия изображений для сайта в JPG – Прогрессивный и базовый

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

Какие моменты стоит учесть при оптимизации изображений

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

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

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

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

Какой способ сжатия фото лучше

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

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

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

Анна Хоменко

Привет, меня зовут Анна, присоединяйтесь ко мне в Instagram @anna.webstudio