Форматы изображений: JPEG¶
Узнайте о самом распространенном формате изображений в Интернете.
JPEG - самый распространенный тип изображений, используемый в Интернете, и на то есть веские причины: на протяжении десятилетий JPEG практически всегда был правильным выбором для кодирования фотографий. Причина этого кроется в самом названии: JPEG расшифровывается как "Joint Photographic Experts Group", комитет, ответственный за выпуск стандарта в 1992 году. В расширении файла JPEG можно встретить .jpg или .jpeg, хотя последний вариант в современном использовании встречается редко.
Если сжатие без потерь пассивно сжимает данные изображения настолько, насколько это возможно, то сжатие с потерями в JPEG ищет возможности сделать сжатие более эффективным с помощью крошечных, часто незаметных изменений данных изображения. JPEG кодирует данные изображения в виде блоков пикселей размером восемь на восемь и алгоритмически описывает блоки, а не отдельные пиксели внутри них.
На бумаге это может показаться академическим различием: "В GIF используется сетка из пикселей, а в JPEG - сетка из более мелких пикселей". На практике такое использование блоков, а не пикселей означает, что JPEG хорошо подходит для гораздо более распространенных случаев использования изображений: таких тонких, многослойных градиентов, которые образуют реальную фотографию.
Описание даже очень простого однопиксельного градиента с использованием кодировки в стиле GIF будет чрезвычайно многословным:
Первая строка, столбцы с первого по девятый - #00CC00. Первая строка, десятый столбец - #00BB00. Первая строка, одиннадцатый столбец - #00AA00. Строка первая, столбец двенадцатый - #009900. Первая строка, тринадцатый столбец - #008800. Первая строка, четырнадцатый столбец - #007700. Первая строка, пятнадцатый столбец - #006600. Первая строка, шестнадцатый столбец - #005500.
Описание градиента с помощью кодирования в стиле JPEG намного, намного эффективнее:
Первый блок - #00CC00. Второй блок - градиент от #00CC00 до #005500.
Где JPEG действительно силен, так это в квантовании уровня "высокочастотных" деталей изображения, часто незаметном. В результате сохранение изображения в формате JPEG обычно означает снижение его качества, которое можно измерить, но не обязательно видимо. Как вы уже поняли, квантование палитры в стиле GIF - относительно простая операция: уменьшение количества цветов в изображении приводит к уменьшению размера файла, но так, что это легко заметить человеческим глазом.
В JPEG, напротив, квантование выполняется очень хитро: Сжатие с потерями в JPEG пытается квантовать исходное изображение таким образом, чтобы оно примерно соответствовало тому, как наши собственные психо-визуальные системы квантуют окружающий нас мир. По сути, JPEG пытается отбросить детали, которые мы вряд ли увидим, чтобы незаметно для нас получить дополнительное сжатие.
Психовизуальная система человека делает очень многое для "сжатия" изображений, которые вы постоянно воспринимаете. Когда я смотрю на свой крошечный сад, то сразу же обрабатываю огромное количество информации: например, выделяются отдельные ярко окрашенные цветы. Я сразу же замечаю, что почва серая от пыли, а листья поникли - моим растениям нужна вода. Что я вижу, но не полностью обрабатываю, так это точную форму, размер, угол наклона и оттенок зеленого для каждого из отдельных поникших листьев. Я, конечно, могу активно искать такие детали, но для пассивного восприятия это было бы просто слишком много информации, не приносящей никакой реальной пользы. Поэтому моя психовизуальная система делает небольшое квантование, сводя эту информацию к "листья поникли".
В сущности, JPEG работает точно так же. Сжатие с потерями в JPEG снижает уровень детализации изображения таким образом, который может вообще не восприниматься нашими психовизуальными системами с естественными "потерями", если это делается в пределах разумного, и открывает гораздо больше возможностей для экономии полосы пропускания, чем сжатие без потерь.
Например, JPEG использует одну из основных слабостей нашей психовизуальной системы: наши глаза более чувствительны к различиям в яркости, чем к различиям в оттенках. Прежде чем приступить к сжатию, JPEG использует процесс, называемый "дискретным косинусным преобразованием", для разделения изображения на отдельные частоты - "слои", так сказать, представляющие яркость (яркость) и хроматику (цвет), или "луму" и "хрому".
Слой luma сжимается минимально, отбрасываются только мелкие детали, которые вряд ли заметны человеческому глазу.
Слои цветности значительно уменьшаются. Вместо того чтобы просто квантовать палитру цветных слоев, как в GIF, JPEG может выполнять процесс, называемый "субдискретизацией", при котором цветной слой хранится с меньшим разрешением. При рекомбинации путем эффективного растягивания слоев цветности с более низким разрешением на слой luma разница часто оказывается незаметной. Небольшие различия в оттенках могут быть заметны при сравнении исходного изображения и JPEG, но только в том случае, если мы точно знаем, что искать.
Тем не менее, JPEG не идеален. Как бы ни был хитер JPEG, чтобы скрыть от нас сжатие, оно может стать очевидным, если зайти слишком далеко. На самом деле, если вы проводили много времени в Интернете, особенно в далекие времена, вы могли заметить результат слишком сильного сжатия JPEG:
Слишком сильное сжатие данных изображения приводит к тому, что уровень детализации снижается настолько, что наши психо-визуальные системы не замечают этого, поэтому иллюзия нарушается. Становится очевидным, что детали отсутствуют. Поскольку JPEG оперирует блоками, швы между ними могут стать заметными.
Прогрессивный JPEG¶
Прогрессивный JPEG (PJPEG) эффективно перестраивает процесс рендеринга JPEG. "Базовый JPEG рендерится сверху вниз по мере передачи, а прогрессивный JPEG разбивает рендеринг на множество полноразмерных "сканов" - как бы сверху вниз, причем каждый скан повышает качество изображения. Все изображение появляется сразу, хотя и нечетко, и становится более четким по мере продолжения передачи.
На бумаге это кажется чисто техническим различием, но на деле это дает огромные преимущества для восприятия: благодаря тому, что вместо пустого пространства сразу передается полноразмерная версия изображения, PJPEG может показаться конечному пользователю быстрее, чем базовый JPEG. Кроме того, за исключением самых маленьких изображений, кодирование изображения в PJPEG почти всегда означает меньший размер файла по сравнению с базовым JPEG - не намного, но каждый байт помогает.
Однако есть один небольшой компромисс: декодирование PJPEG сложнее на стороне клиента, что означает несколько большую нагрузку на браузер и аппаратное обеспечение устройства во время рендеринга. Точно оценить этот эффект сложно, но он очень незначительный и вряд ли будет заметен, разве что на совсем уж маломощных устройствах. Это компромисс, на который стоит пойти, и, в целом, прогрессивный подход является разумным по умолчанию при кодировании изображения в JPEG.
Использование JPEG¶
Возможно, вы чувствуете себя немного ошеломленным всей этой информацией. Однако для повседневной работы есть хорошие новости: технические особенности сжатия JPEG абстрагированы от них и представлены в виде единственной настройки "качества": целого числа от 0 до 100. Значение 0 обеспечивает наименьший размер файла и, как и следовало ожидать, наихудшее качество изображения. По мере продвижения от 0 до 100 увеличивается и качество, и размер файла. Конечно, эта настройка субъективна - не каждый инструмент будет интерпретировать значение "75" одинаково, а качество восприятия всегда зависит от содержания изображения.
Чтобы понять, как работает эта настройка сжатия, воспользуемся распространенным веб-инструментом для оптимизации графических файлов: Squoosh.
Squoosh, поддерживаемый командой разработчиков Chrome, позволяет сравнить между собой различные методы кодирования и настройки выходных изображений, при этом возможности настройки варьируются от глобального ползунка "качества" 0-100 до возможности тонкой настройки деталей передискретизации цветности и яркости. Чем меньше значение параметра "качество", тем выше степень сжатия и тем меньше будет результирующий файл.
Здесь при значении "качества" 60 размер файла уменьшается на 79%. Пусть вас не обманывает смысл этой надписи: разница в качестве на большей части шкалы будет незаметна для человеческого глаза даже при сравнении рядом.
Чтобы преобразовать исходное изображение в прогрессивный JPEG, установите блок "Прогрессивный рендеринг" в разделе "Дополнительные параметры". Некоторые из этих опций почти наверняка окажутся более глубокими, чем это требуется для среднего веб-проекта, но они позволят вам лучше понять, как то, что вы узнали о кодировании JPEG, влияет на размер и качество файла в реальных условиях использования.
С практической точки зрения это не так уж и много, несмотря на то, насколько сложным, как мы теперь знаем, является JPEG внутри. Squoosh - это всего лишь один из бесчисленных методов сохранения оптимизированных JPEG, все они используют схожий способ определения степени сжатия: одно целое число от 0 до 100.
Определение идеального уровня сжатия для ваших изображений - дело тонкое, учитывая, что вся сложность кодирования JPEG сводится к одному целому числу, особенно когда многое зависит от содержания изображения. Как и размышления о моргании или дыхании, рассмотрение параметров сжатия JPEG меняет наше восприятие.
Оглядываясь на улицу сейчас, после написания всего этого, я вижу, что моя психовизуальная обработка стала более ручной - теперь я смотрю на отдельные листья, хотя сама картинка, так сказать, не изменилась. Это делает настройку сжатия JPEG несколько затруднительной: вы точно знаете, какие визуальные дефекты следует искать. Задумываясь о сжатии изображения, вы в первую очередь фокусируетесь на отдельных листьях - мы готовы заметить легкое размытие и случайные артефакты сжатия. Чем тщательнее вы ищете артефакты при точной настройке параметров сжатия JPEG, тем больше вероятность того, что вы их обнаружите, тогда как пользователь, скорее всего, этого не сделает. Даже если бы пользователь точно знал, что искать, он вряд ли стал бы заходить на страницу, имея в виду сжатие JPEG.
Поэтому не стоит увеличивать масштаб изображения в поисках артефактов или даже слишком внимательно рассматривать те части изображения, где, как вы знаете, артефакты появятся в первую очередь. Для пользователей слабые артефакты сливаются с мельчайшими деталями, которые их психовизуальные системы, работающие с потерями, обычно не замечают. На самом деле, даже понимая, какие трюки пытается разыграть JPEG, вы не заметите эти артефакты при просмотре веб-страниц, если не будете их искать. По этой причине почти всегда стоит уменьшить степень сжатия JPEG до уровня, который, по вашему мнению, может быть заметен, особенно если изображение будет отображаться меньше, чем его собственный размер, из-за непосредственной стилизации или ограничений, накладываемых окружающим макетом.
Источник — Image formats: JPEG