8. Базовая оптимизация JPEG — Xiper
Автор: Евгений Рыжков Дата публикации:
JPEG это лучший формат для фотографий в веб. Так же хорошо походит для изображений, где присутствует плавная смена цветов: градиентов, свечений, теней и т.п. Формат способен отобразить максимальное число цветов, которое может передать монитор — 16,8 миллиона. Сама же аббревиатура JPEG (Joint Photographics Experts Group) означает группу специалистов, разработавших стандарт сжатия JPEG.
Метод сжатия JPEG является сжатием с потерями, вследствие выборочного удаления данных. В итоге получаем более легковесный файл, но с худшим качеством.
Имеем к примеру вот такое исходное фото:
С ним и будем эксперементировать. Открываем окно оптимизации изображения для веб (Файл -> Сохранить для Веб) и выбираем формат JPEG:
Опции предопределенная степень сжатия и качество управляют степенью сжатия файла: чем выше степень сжатия, тем больше потерь в изображении (хуже качество), тем меньше весит файл.
Обычно степень сжатия применяется в пределах 45-65.
Progressive задает режим построчной развертки изображения, тем самым обычно немного увеличивая размер файла (но бывают исключения, когда Progressive даже уменьшает размер).
Теория: базовые JPEG и построчная развертка
Базовые JPEG загружаются на последовательно, пользователь увидит картинку полностью, только когда она целиком загрузится:
Такой способ загрузки изображения является «базовым» и поддерживается всеми браузерами и устройствами для просмотра веб страниц.
При использовании построчная развертка пользователь увидит сразу картинку целиком. Но сначала она будет в плохом качестве, которое будет постепенно улучшаться по мере загрузки файла:
Построчная развертка не поддерживается старыми браузерами и некоторыми устройствами (они отобразят изображение последовательно).
Какой из способов лучше использовать однозначно сказать тяжело, на этот счет до сих пор ведутся споры: одни считают, что построчная развертка улучшает юзабилити, другие же сетуют, что лишний вес того не стоит да и построчная разверстка больше нагружает ресурсы пользователя. Выбирать метод нужно исходя из задач, стоящих перед верстальщиком.
Optimized — создается улучшенный файл JPEG с незначительно меньшим размером файла. Опция не может быть использована, когда установлен флажок «progressive».
Размытие (blur) задает эффект размытия, увеличивая степень сжатия файла. Можно использовать для незначительного уменьшения объема файла. Обычно применяют в пределах от 0,1 до 0,5.
Вернемся к нашей подопытной картинке. Чтобы поучить коэффициент пользы от оптимизации JPEG в photoshop, сохраню сначала картинку просто в JPEG (Файл-> Сохранить как..). Качество при сохранении установлю Medium, получаем:
36,8Kb
Теперь возьму исходную картинку и сохраню ее, используя ручные настройки, при этом качество должно остаться приемлемым.
Открываю окно оптимизации (Файл -> Сохранить для веб…). После сравнений различных вариантов, остановился на такой комбинации: качество 55, не использовать progressive, blur = 0,2
21,3Kb
Результат получился приятным: качество вышло лучше, а вес файла 57.8% меньше. Правда изображение немного потеряло цвета.
Советы
- всегда сохраняй оригинал изображения, т.к. каждое сохранение в формате JPEG приводит к потерям качества, даже если оно сохраняется в качестве 100;
- никогда не сохраняй изображение с качеством 100. Это не максимальное качество, а математический предел оптимизации, при котором изображение будет весить неоправданно много. Качества 95 вполне хватит, чтобы сохранить изображение практически без потерь;
- помни, что в photoshop при качестве ниже 50 включается дополнительный алгоритм оптимизации — color downsampling, который дополнительно усредняет цвет в соседних восьмипиксельных блока:
качество 50
качество 51
Поэтому если на изображении присутствуют очень мелкие контрастные детали, не следует выставлять качество ниже 51.
- если при загрузке страницы используются анимации и присутствуют JPEG-изображения, для них лучше не использовать progressive (помнишь, что это требует дополнительных ресурсов?).
Материалы
- Параметры оптимизации JPEG
- Настройки оптимизации JPEG-файлов в Photoshop
- Последовательные JPEG — быть или не быть?
- Оптимизация JPEG. Часть 3
Как работает JPEG-сжатие? Разбор | Droider.ru
Сегодня для нас нет ничего необычного в том, чтобы отправить фотку другу и не волноваться по поводу того, какое устройство, браузер или операционную систему он использует. Все это благодаря формату JPEG, который может уменьшить размер исходного файла в 10, 50 и даже в 100 раз. Изображения формата JPEG встречаются повсюду в нашей жизни в интернете, но за простотой и удобством использования скрываются алгоритмы, устраняющие детали, не воспринимаемые человеческим глазом. В итоге получается высочайшее визуальное качество при наименьшем размере файла.
Вы когда-нибудь задумывались, сколько места фотки на наших устройствах?
Давате посмотрим на этот снимок:
Его разрешение 12.2 мегапикселя или 4032 × 3024 точек. Сколько он должна бы весить? Давайте посчитаем. Как известно, цвет каждого пикселя определяется тремя составляющими: красным, зелёным и синим. Каждая составляющая кодируется восьмибитным числом. Получим, что такое изображение будет весить 8х3х4032×3024 = 292 626 432 бит, то есть почти 300 мб!!!
В реальности же она весит 7.36 мб. То есть в 40 раз МЕНЬШЕ! А если пожать через Whatsapp, будут какие-то 200 килобайт. Все благодаря формату JPEG, с которым мы сталкиваемся постоянно.
Конечно, присутствует небольшая потеря качества, но по сравнению с тем, что размер файла был уменьшен в несколько десятков раз, это уже не играет большой роли.
И новые форматы отвоевывают рынок — тот же hevc. JPEG все еще остается королем индустрии. Так что давайте разберемся, как конкретно всё это работает? Причем здесь психология зрения, и как хитрая математика экономит место.
К началу 80-х годов прошлого столетия компьютеры умели хранить и показывать цифровые изображения, однако для воплощения этого существовало множество различных решений. Например, нельзя было просто отправить изображение с одного компьютера на другой. Для решения этой проблемы в 1986 году был собран комитет экспертов со всего мира под названием «Объединённая группа экспертов по фотографии» (Joint Photographic Experts Group, JPEG). Эта группа людей и создала стандарт сжатия цифровых изображений JPEG в 1992 году, который спасает нас до сих пор.
Прежде всего давайте разберёмся, почему вообще возможно сжать изображение так, чтобы наши глаза при этом не замечали изменений, вносимых форматом в фотографию. JPEG удаляет информацию, которую человеческий глаз плохо воспринимает.
Теперь стоит поговорить о том, как устроено наше зрение. Как известно, в глазу есть два типа восприимчивых к свету клеток: палочки и колбочки (rods and cones). Палочки плохо восприимчивы к свету, но играют решающую роль для зрения в условиях низкой освещенности, в то время как колбочки имеют цветовые рецепторы. Именно они обеспечивают нашим глазам цветное зрение. В каждом глазу имеется около 100 миллионов палочек и всего лишь 6 миллионов колбочек.
Как следствие, глаз гораздо более восприимчив к изменениям в яркости изображения и менее восприимчив к изменению в цвете. Поэтому при сжатии картинки можно использовать такую хитрость: во первых, отделить цвет от яркости, во вторых, убрать немного цвета, и в таком случае никто ничего не заметит. Именно на данной хитрости и основывается первый и очень важный этап сжатия, называемый цветовой субдискредитацией.
Но как именно нам отделить яркость от цвета? Как известно, каждый пиксель характеризуется тремя компонентами: R,G,B — по одной переменной для каждого цвета, которые могут принимать значения в диапазоне от 0 до 255.
Хитрость в том, что эту же информацию мы можем сохранить, используя другие три переменные: Y, Cb, Cr. Тогда мы без проблем можем преобразовать изображение с пикселями формата RGB в новый формат с другими компонентами Y,Cb,Cr. Здесь Y отвечает за яркость, а Cb и Cr- цветовые каналы. Таким образом, вычислив эти переменные, мы получаем три новых изображения, составленных из этих трех компонент. Вычисление происходит по таким мудреным формулам, если интересно.
Такое разделение необходимо, чтобы дальше мы могли убрать часть деталей из цветовых каналов (составленных из Сb и Cr).Пока что никакие данные мы не удаляли, а математические преобразования из одного формата в другой являются обратимыми. Данные действия, конечно же, проделываются над всеми пикселями изображения.
Теперь мы и будем использовать особенность нашего зрения: воспринимать изменения в цвете хуже, чем изменения в яркости. Ранее мы получили из исходной картинки 2 цветовых переменных и одну яркостную.
Теперь делается еще один ход: каждые 4 пикселя в обоих цветовых изображениях объединяются в 1, тем самым удаляется повторяющаяся информация. В результате, детали, плохо воспринимаемые нашими глазами, т.е. обе цветовые составляющие (Cr и Сb), уменьшаются до ¼ своего исходного размера, а яркостная составляющая остаётся прежней. Таким образом, всего за два шага изображение становится в 2 раза меньше исходного размера
Было: 1+1+1=3
Стало: ¼+¼+1=1,5
При этом если сейчас собрать эти 3 составляющие в одно исходное изображение, то невооруженным глазом разницу между оригиналом и сжатым изображением заметить будет невозможно.
Теперь выполняется подготовка к самому важному, сложному и умному этапу. Для этого каждая из 3 наших картинок, составленных из яркостного и двух цветовых каналов, разбивается на блоки пикселей 8×8. Теперь алгоритмы сжатия должны каким-то образом понять, насколько много деталей в каждом из таких блоков. Если деталей мало, то можно закодировать меньшим количеством бит, уменьшая размер файла, а если деталей много, то наоборот.
Иными словами, если бы картины в музеях хранились в джипеге, то любая картина Ван Гога занимала бы меньше места, чем черный квадрат Малевича.
Такой анализ и производится с помощью штуки со страшным названием — дискретное косинусное преобразование. Прежде, чем переходить к нему, рассмотрим такой простой пример. У нас есть разноцветные полупрозрачные стеклышки. Накладывая их друг на друга, мы можем получить тот цвет, который нам нужен, т.е., например,чтобы получить фиолетовый цвет, нужно наложить синее стеклышко на красное. Такая же ситуация и в случае с алгоритмом.
Рассмотрим один из блоков 8х8. Все последующие действия будут выполняться для каждого из таких блоков. Такой блок содержит 64 пикселя. Оказывается, что любое простое монохромное изображение можно представить в виде комбинации вот таких 64 базовых картинок.
То есть, накладывая их друг на друга с разной степенью прозрачности, можно получить любую простую картинку 8х8 примерно так же, как и в примере со стеклышками.
Именно таким образом мы и можем перестроить любой наш блок 8х8 путём наложения этих базовых картинок друг на друга. При этом каждый из узоров умножается на число, являющееся показателем того, какая его часть используется при построении определенной картинки.
Суть алгоритма дискретного косинусного преобразования и заключается в вычислении данных чисел. На выходе получаем матрицу 8х8, состоящую из чисел, отображающих, насколько большой или не очень вклад каждого узора в данное изображение 8х8. Выглядит это примерно так. Прикольно, да?
Чем больше число, тем больший вклад базового изображения (узора), соответствующего данному числу. Коэффициенты, находящиеся в левой верхней части матрицы отвечают за плавные переходы и более общие черты, а коэффициенты, лежащие в правой нижней части- за частые переходы, т.е. за тонкие детали. Если деталей в данном блоке оказывается мало, то коэффициенты, отвечающие за них (находящиеся в правой нижней части матрицы) будут равны нулям или близким к нулю значениям.
(Именно на данном этапе отбрасывается огромная часть информации, не видимой человеческим глазом.) Это важный момент запомним.
Это немного напоминает составление фоторобота: нос номер 9, рот номер 13, глаза среднее между нумером 6 и 42.
Прежде, чем идти дальше, подведем промежуточные итоги. Что мы имеем на данный момент?
У нас есть матрица из 64 чисел, содержащих информацию о том, как именно нужно использовать базовые изображения. Если не считать этап цветовой субдискредитации, то пока что мы не отбрасывали существенное количество информации, а только определяли, что нужно отбросить.
Как это делается?
Для этого этапа используется вот такая таблица. Называется таблица квантования. К квантовым компьютерам не имеет отношения. Не пугайтесь, какждется это послдений сложный термин на сегодня. Если по простому: она определяет какую часть из полученной прежде информации мы возьмем в итоговый файл. Смотрите: это матрица 8х8, содержащая коэффициенты, на которые мы делим числа из нашей исходной матрицы.
Степень сжатия задаётся характеристиками таблицы квантования, т.е. чем больше коэффициенты в этой таблице, тем меньше будут числа в новой матрице. В зависимости от характеристик таблицы квантования мы можем уменьшить размер изображения до 95% от первоначального размера, но в таком случае, конечно, качество сжатого изображения будет далеко не самым высоким. Именно эта таблица и является основной настройкой jpeg, регулирующей степень сжатия.
Теперь переходим к квантованию, т.е. этапу, на котором будет производиться наибольшее сжатие. Здесь происходит сначала деление чисел из матрицы, которую мы получили на прошлом этапе, на определенные коэффициенты, соответствующие таблице квантования, а затем происходит округление полученных чисел до ближайшего целого (например: делим 560/4=140; -41/3=-13,7- округляем до целого, получаем -14 и т.д.). Но что ещё за таблица квантования и откуда она берется?
- Исходная матрица
- Таблица квантования
- Новая матрица
Если посмотреть на таблицу квантования, то можно увидеть, что самые большие числа расположены в правой нижней части таблицы.
В результате этого процесса получается, что большая часть чисел нашей исходной матрицы стала равной нулю, так как числа, близкие к правому нижнему углу матрицы были слишком малы и после деления и округления обнулились. Остаются только числа, близкие к левому верхнему углу матрицы. На этом этапе и происходит самое существенное сжатие изображения, т.е. практически все данные, к которым наши глаза плохо восприимчивы, отбрасываются.
Далее используется зигзагообразное сканирование матрицы чисел, в результате чего получается числовая строка, в начале которой ненулевые значения, а в конце — нулевые.
Затем вместо того, чтобы перечислять все числа строки по порядку, мы используем алгоритм кодирования длин серий, благодаря которому можно не перечислять все нули, а просто назвать их количество.
Далее уже сжатая последовательность кодируется с помощью алгоритма Хаффмана.
Это достаточно сложный процесс, но если говорить кратко, то нули кодируются меньшим количеством бит, а ненулевые элементы последовательности кодируются большим количеством бит.
Процесс сжатия завершён. Мы получили сжатое изображение в виде последовательности чисел.
Как же теперь вывести его на экран? Для этого необходимы все те же самые действия, но уже проделанные в обратном порядке: 1. Декодирование с помощью алгоритма Хаффмана, 2. Декодирование по методу длин серий, 3. Заполнение матрицы 8х8 коэффициентами зигзагообразным методом для каждого из блоков 8х8, 4. Умножение каждого числа матрицы на соответствующий коэффициент согласно таблице квантования, 5. Масштабирование компоненты цветов, 6. Преобразование полученных значений Y, Cb и Cr для каждого пикселя в RGB и 7. Вывод изображения уже в формате JPEG на экран. Готово!
Подведём итоги. Как видите, при работе JPEG используется огромное количество нюансов: особенности строения глаза, математические методы сжатия, разложение в спектр.
Конечно, у JPEG есть достаточно большое количество недостатков: невозможность качественного сжатия текстовых изображений, ухудшение качества при повторном сохранении, но несмотря на все его многочисленные недостатки и почтенный возраст, он по сей день остаётся самым популярным форматом изображений в интернете, хотя сейчас ему на смену начали приходить другие, гораздо более продвинутые форматы, такие как HEIC, AV1, WebP и другие. Причины популярности JPEG в настоящее время, конечно, есть: он очень хорошо изучен за 30 лет существования, является бесплатным, а также всем понятен и привычен.
Post Views: 2 787
Оптимизация изображений для формата JPEG
Руководство пользователя Отмена
Поиск
- Руководство пользователя Photoshop Elements
- Введение в Photoshop Elements
- Что нового в Photoshop Elements
- Системные требования | Элементы Фотошопа
- Основы рабочего пространства
- Ведомый режим
- Создание фотопроектов
- Рабочее пространство и среда
- Знакомство с главным экраном
- Основы рабочего пространства
- Инструменты
- Панели и ящики
- Открыть файлы
- Линейки, сетки и направляющие
- Расширенный быстрый режим
- Информация о файле
- Пресеты и библиотеки
- Поддержка мультитач
- Скретч-диски, плагины и обновления приложений
- Отмена, повтор и отмена действий
- Просмотр изображений
- Исправление и улучшение фотографий
- Изменение размера изображений
- Обрезка
- Обработка необработанных файлов изображений камеры
- Добавить размытие, заменить цвета и клонировать области изображения
- Настройка теней и света
- Ретушь и корректировка фотографий
- Повышение резкости фотографий
- Трансформация
- Автоматический интеллектуальный тон
- Перекомпоновка
- Использование действий для обработки фотографий
- Photomerge Compose
- Создать панораму
- Перемещение наложений
- Подвижные элементы
- Добавление фигур и текста
- Добавление текста
- Редактировать текст
- Создание фигур
- Редактирование фигур
- Обзор окраски
- Малярные инструменты
- Щетки для настройки
- Узоры
- Заливки и штрихи
- Градиенты
- Работа с азиатским типом
- Управляемое редактирование, эффекты и фильтры
- Управляемый режим
- Фильтры
- Управляемый режим редактирования Photomerge
- Управляемый режим Основные правки
- Регулировочные фильтры
- Эффекты
- Управляемый режим Забавные правки
- Управляемый режим Специальные правки
- Художественные фильтры
- Управляемый режим Редактирование цвета
- Управляемый режим черно-белого редактирования
- Фильтры размытия
- Фильтры мазка кистью
- Фильтры искажения
- Прочие фильтры
- Помехоподавляющие фильтры
- Фильтры визуализации
- Эскизные фильтры
- Стилизовать фильтры
- Текстурные фильтры
- Пиксельные фильтры
- Работа с цветами
- Понимание цвета
- Настройка управления цветом
- Основы коррекции цвета и тона
- Выберите цвет
- Настройка цвета, насыщенности и оттенка
- Исправить цветовые оттенки
- Использование режимов изображения и таблиц цветов
- Цвет и камера RAW
- Работа с выборками
- Сделайте выбор в Photoshop Elements
- Сохранение выбора
- Изменение выбора
- Перемещение и копирование выделенного
- Редактировать и уточнить выборки
- Сглаживание краев выделения со сглаживанием и растушевкой
- Работа со слоями
- Создание слоев
- Редактировать слои
- Скопируйте и расположите слои
- Корректирующие слои и слои-заливки
- Обтравочные маски
- Маски слоя
- Стили слоя
- Непрозрачность и режимы наложения
- Создание фотопроектов
- Основы проекта
- Создание фотопроектов
- Редактирование фотопроектов
- Сохранение, печать и обмен фотографиями
- Сохранение изображений
- Печать фотографий
- Поделиться фотографиями в Интернете
- Оптимизация изображений
- Оптимизация изображений для формата JPEG
- Дизеринг веб-изображений
- Управляемое редактирование — панель «Поделиться»
- Предварительный просмотр веб-изображений
- Использовать прозрачность и матовость
- Оптимизация изображений для формата GIF или PNG-8
- Оптимизация изображений для формата PNG-24
- Сочетания клавиш
- Клавиши для выбора инструментов
- Клавиши для выбора и перемещения объектов
- Клавиши для панели «Слои»
- Клавиши для отображения или скрытия панелей (экспертный режим)
- Ключи для рисования и кисти
- Клавиши для использования текста
- Ключи для фильтра Liquify
- Ключи для трансформации выделений
- Клавиши для панели «Образцы цвета»
- Ключи для диалогового окна Camera Raw
- Ключи для галереи фильтров
- Ключи для использования режимов наложения
- Клавиши для просмотра изображений (экспертный режим)
О формате JPEG
Формат JPEG поддерживает 24-битный цвет, поэтому он сохраняет тонкие вариации.
по яркости и оттенку на фотографиях. Прогрессивный файл JPEG
отображает версию изображения с низким разрешением в веб-браузере
пока загружается полное изображение.
Сжатие изображений JPEG называется сжатием с потерями, потому что оно выборочно отбрасывает данные изображения. Более высокое качество приводит к меньшему объему данных отбрасывается, но метод сжатия JPEG все еще может ухудшаться резкие детали на изображении, особенно на изображениях, содержащих шрифт или векторное искусство.
Артефакты, такие как волнообразные узоры или блочные области полос, создаются каждый раз, когда вы сохраняете изображение в формате JPEG. Поэтому, всегда следует сохранять файлы JPEG из исходного изображения, а не из ранее сохраненный JPEG.
Исходное изображение (слева) и оптимизированный JPEG с низким качеством настройка (справа) Формат JPEG не поддерживает прозрачность. Когда вы сохраняете
изображение в виде файла JPEG, прозрачные пиксели заполняются
цвет подложки, указанный в диалоговом окне «Сохранить для Интернета».
Имитировать
эффект прозрачности фона, можно подобрать матовый цвет
к цвету фона веб-страницы. Если ваше изображение содержит прозрачность
и вы не знаете цвет фона веб-страницы, или если фон
является шаблоном, вы должны использовать формат, поддерживающий прозрачность
(GIF, PNG-8 или PNG-24).
Оптимизировать как JPEG
JPEG — это стандартный формат для сжатия фотографий.
Откройте изображение и выберите «Файл» > «Сохранить». Для Интернета.
Выберите JPEG в меню формата оптимизации.
Для оптимизации до определенного размера файла щелкните стрелку справа от меню «Стили», а затем нажмите «Оптимизировать в файл». Размер. Введите число в текстовое поле «Желаемый размер файла» и выберите либо Текущие настройки, оптимизирующие текущие настройки, или Auto Select GIF/JPEG, который автоматически определяет, будет ли JPEG или GIF — лучший формат.
Чтобы указать уровень сжатия, выполните одно из следующих действий:
Выберите параметр качества (Низкий, Средний, Высокий, и т.
д.) из всплывающего меню в меню формата оптимизации.Щелкните стрелку в меню «Качество» и перетащите Качественный всплывающий слайдер.
Введите значение от 0 до 100 в поле Качество.
чем выше значение параметра «Качество», тем больше деталей сохраняется в кадре. оптимизированное изображение, но чем больше размер файла. Посмотреть оптимизированный изображение с несколькими настройками качества, чтобы определить наилучший баланс между качеством и размером файла.
Выберите Progressive для прогрессивного отображения изображения. в веб-браузере; то есть отображать его сначала в низком разрешении, а затем в более высоком разрешении по мере загрузки.
Некоторые браузеры не поддерживают прогрессивные файлы JPEG.
Чтобы сохранить профиль ICC исходного изображения в оптимизированный файл, выберите Профиль ICC.
Некоторые браузеры используют профили ICC для коррекции цвета. ICC-профиль изображения зависит от текущей настройки цвета.
Если исходное изображение содержит прозрачность, выберите Матовый цвет, соответствующий фону вашей веб-страницы. Прозрачный области исходного изображения заполняются матовым цветом.
Чтобы сохранить оптимизированное изображение, нажмите OK. В сохранении оптимизировано В диалоговом окне введите имя файла и нажмите «Сохранить».
Больше похожего
- Создание матового изображения в формате GIF или PNG
- Об управлении цветом
Войдите в свою учетную запись
Войти
Управление учетной записью
Умные методы оптимизации JPG — Smashing Magazine
- Чтение: 7 мин.
- Графика
Дизайн,
Техники,
Оптимизация.
Больше о
Сергей ↬ Когда люди говорят об оптимизации изображений, они рассматривают только ограниченные параметры, предлагаемые популярными графическими редакторами, такие как ползунок «Качество», количество цветов в палитре, дизеринг и так далее.
Кроме того, некоторым утилитам, таким как OptiPNG и jpegtran, удается выжимать лишние байты из файлов изображений. Все это довольно известные инструменты, которые предоставляют веб-разработчикам и дизайнерам простые методы оптимизации изображений.В этой статье мы покажем вам другой подход к оптимизации изображений, основанный на как данные изображения хранятся в разных форматах . Начнем с формата JPG и простой техники, называемой восьмипиксельной сеткой.
Вы также можете взглянуть на следующие статьи по теме:
- Умные методы оптимизации PNG
- Руководство по оптимизации PNG: более умные методы
- Эффективное изменение размера изображения с помощью ImageMagick
- Руководство по использованию изображений WebP сегодня: пример Исследование
Восьмипиксельная сетка
Как вы уже знаете, изображение JPG состоит из серии блоков 8×8 пикселей, которые могут быть особенно видны, если вы установите слишком низкое значение параметра «Качество» JPEG.
Как это помогает нам в оптимизации изображений? Рассмотрим следующий пример:Еще после прыжка! Продолжить чтение можно ниже ↓
32×32 пикселя, качество: 10 (в Photoshop), 396 байт.Оба белых квадрата имеют одинаковый размер: 8×8 пикселей. Несмотря на низкое качество, нижний правый угол выглядит нечетким (как и следовало ожидать), а верхний левый угол выглядит красивым и чистым. Как это произошло? Чтобы ответить на этот вопрос, нам нужно посмотреть на это изображение под сеткой:
Как вы можете видеть, верхний левый квадрат выровнен по восьмипиксельной сетке, что гарантирует четкость квадрата.
При сохранении изображение разбивается на блоки 8×8 пикселей, и каждый блок оптимизируется независимо . Поскольку нижний правый квадрат не соответствует ячейке сетки, оптимизатор ищет индексы цвета, усредненные между черным и белым (в JPEG каждый блок 8×8 кодируется как синусоида). Это объясняет пушистость.
Многие расширенные утилиты для оптимизации JPEG имеют эту функцию, которая называется выборочной оптимизацией и приводит к коэффициентам разного качества в разных областях изображения и большему количеству сэкономленных байтов.Этот метод особенно удобен для сохранения прямоугольных объектов. Давайте посмотрим, как это работает с более практичным изображением:
13,51 КБ.
12,65 КБ.В первом примере микроволновая печь расположена случайным образом. Перед сохранением второго файла мы выравниваем изображение по восьмипиксельной сетке. Настройки качества одинаковы для обоих: 55. Давайте посмотрим внимательнее (красные линии обозначают сетку):
Как видите, мы сохранили 1 КБ данных изображения, просто правильно расположив изображение. Кроме того, мы сделали изображение немного «чище».
Оптимизация цвета
Этот метод довольно сложен и работает только для определенных типов изображений.
Но мы все равно его пройдем, хотя бы для изучения теории.Во-первых, нам нужно знать, какая цветовая модель используется для формата JPEG. Большинство форматов изображений имеют цветовую модель RGB, но JPEG также может быть в YCbCr, который широко используется для телевидения.
YCbCr похож на модель HSV в том смысле, что YCbCr и HSV разделяют яркость, к которой зрительная система человека очень чувствительна, от цветности (HSV должен быть знаком большинству дизайнеров). Он состоит из трех компонентов: оттенок, насыщенность и значение. Самым важным для наших целей здесь является значение, также известное как яркость (оптимизаторы имеют тенденцию сжимать цветовые каналы, но сохраняют значение как можно выше, потому что человек наиболее чувствителен к нему). Photoshop имеет цветовой режим Lab, который помогает нам лучше подготовить изображение к сжатию с помощью оптимизатора JPEG.
В качестве примера возьмем микроволновую печь. Над дверью тонкая сетка, которая является идеальным образцом для нашей оптимизации цвета.
После простого сжатия с качеством 55 файл весит 64,39 КБ.
990×405 пикселей, Качество: 55 (в Photoshop), 64,39 КБ. Увеличенная версия.Откройте увеличенную версию изображения в Photoshop и включите режим Lab Color: Изображение >> Режим >> Lab Color.
Лабораторный режим почти, но не совсем такой же, как HSV и YCbCr. 9Канал 0384 lightness содержит информацию о светлоте изображения. Канал A показывает, сколько красного или зеленого. А канал B обрабатывает синий и желтый. Несмотря на эти различия, этот режим позволяет нам избавиться от избыточной информации о цвете.
Переключитесь на палитру Channels и посмотрите на каналы A и B . Мы можем ясно видеть текстуру сети, и кажется, что есть три блока разной интенсивности яркости.
Мы собираемся внести некоторые изменения в цвет, поэтому, возможно, будет полезно держать оригинальную копию открытой в отдельном окне. Наша цель — сгладить зернистую текстуру на этих участках в обоих цветовых каналах.
Это даст оптимизатору гораздо более простые данные для работы. Вам может быть интересно, почему мы оптимизируем именно эту область изображения (окно дверцы духовки). Просто: эта область состоит из чередующихся черных и оранжевых пикселей. Черный — это нулевая яркость, и эта информация хранится в канале яркости. Итак, если мы сделаем эту область полностью оранжевой в цветовых каналах, мы ничего не потеряем, потому что канал светлоты будет определять, какие пиксели должны быть темными, и на такой текстуре разница между полностью черным и темно-оранжевым не будет заметна.Переключитесь на канал A , выберите каждый блок отдельно и примените Медианный фильтр (Фильтр >> Шум >> Медиана). Радиус должен быть как можно меньше (т.е. до исчезновения текстуры), чтобы не слишком сильно искажать блики. Стремитесь к 4 в первом блоке, 2 во втором и 4 в третьем. На данный момент дверь будет выглядеть так:
Увеличенная версия.Насыщенность низкая, поэтому нам нужно это исправить.
Чтобы мгновенно увидеть все изменения цвета, продублируйте текущее активное окно: Окно >> Упорядочить >> Новое окно. В новом окне нажмите на канал Лаборатория, чтобы увидеть изображение. В результате ваше рабочее пространство должно выглядеть так:
Оригинал справа, дубликат слева и рабочее место внизу.Выделите все три блока в канале A на рабочем месте и вызовите окно Уровни (Ctrl+L или Image >> Adjustments >> Levels). Сдвиньте средний ползунок влево, чтобы цвет внутренней части духовки в дубликатной копии совпадал с цветом оригинала (у меня получилось значение 1,08 для среднего ползунка). Сделайте то же самое с каналом B и посмотрите, как он выглядит:
990×405 пикселей, Качество: 55 (в Photoshop), 59,29 КБ Большая версияКак видите, мы убрали из образа 5 КБ (было 64,39 КБ). Хотя описание этой техники выглядит большим и пугающим, на ее выполнение уходит около минуты: переключитесь на цветовую модель Lab, выберите разные области цветовых каналов и примените к ним Медианный фильтр, затем выполните некоторую коррекцию насыщенности.
Как уже упоминалось, этот метод более полезен для теории, но я использую его для тонкой настройки больших рекламных изображений, которые должны выглядеть чистыми и четкими.Общие советы по оптимизации JPG
На этом мы закончим, предложив несколько полезных советов по оптимизации.
Каждый раз, когда вы выбираете качество сжатия изображения, обдуманно выбирайте программу, которую вы используете для оптимизации. Стандарты JPEG строги: они определяют только то, как трансформируется изображение при уменьшении размера файла. Но разработчик решает, что именно делает оптимизатор.
Например, некоторые маркетологи рекламируют свое программное обеспечение как предлагающее наилучшую оптимизацию, позволяющее сохранять файлы небольшого размера с настройками высокого качества, в то время как Photoshop изображает файлы вдвое тяжелее. Не ведитесь на обман. Каждая программа имеет свою шкалу качества, и различные значения определяют дополнительные алгоритмы оптимизации.
Единственным критерием, по которому можно сравнивать производительность оптимизации, является соотношение качества и размера. Если вы сохраните изображение с качеством от 55 до 60 в Photoshop, оно будет выглядеть и иметь тот же размер, что и файлы, созданные с помощью другого программного обеспечения, скажем, с качеством 80.
Никогда не сохраняйте изображения с качеством 100. Это не максимально возможное качество, а лишь предел математической оптимизации. Вы получите неоправданно тяжелый файл. Сохранения изображения с качеством 95 более чем достаточно, чтобы предотвратить потерю.
Имейте в виду, что когда вы устанавливаете качество ниже 50 в Photoshop, он запускает дополнительный алгоритм оптимизации, называемый цветовой субдискретизацией , который усредняет цвет в соседних восьмипиксельных блоках:
48× 48 пикселей, Качество: 50 (в Photoshop), 530 байт.
48×48 пикселей, Качество: 51 (в Photoshop), 484 байта.