Давайте посмотрим на эту фотографию. Ее разрешение составляет 12 и 2 мп. Если быть точным, 432 на 324 точки. Но сколько она должна весить? Товарищ пишет. Как известно, обычно цвет кодируется от трех базовых цветов: красного, зеленого и синего. И каждый из этих компонентов кодируется числом в 8 бит. Таким образом, если перемножить получим 8 бит до 30 вето, до 432 точек по горизонтали и еще на 324 точки по вертикали. И получится 292 млн. То есть почти 300 мб. Но в реальности эта фотография весит всего 736 мб. То есть 40 раз меньше. А если сжать ее, она вообще будет весить каких-то 200 кб. Но как так получается? Все благодаря легендарному формату для хранения изображений, JPEG. Конечно, присутствует небольшая потеря качества, но по сравнению с тем, что размер файла был уменьшен в десятки раз, то уже не играет кубическую роль. И да, новые форматы тоже появляются, такие как HEVC, но JPEG все еще стоит во главе индустрии. Так что сегодня разберемся, как конкретно он работает, причем здесь психология зрения и как хитроумно, черт возьми, реально экономит место. Эту дробь, что мы видим, что это было в этом году. И тут важна предыстория. К началу 1980-х годов компьютеры уже умели хранить и показывать цифровые изображения, но делали это все по-разному. Существовало слишком много стандартов. В общем, нельзя было просто взять и отправить картинку с одного компьютера на другой. Решение этой проблемы в 1986 году было собрано комитетом экспертов со всего мира под названием Объединенная группа экспертов по фотографии. Joint Photographic Experts Group, то есть JPEG. И этот коллектив в 1992 году создал стандарт для цифровых изображений, который спасает нас до сих пор. Прежде всего давайте посмотрим, а как вообще возможно сжимать изображение так, чтобы наши глаза этого не замечали. JPEG удаляет информацию, которую человеческий глаз плохо воспринимает. И форма действительно здорово использует особенности нашего зрения. Как известно, в глазу человека есть два типа светочувствительных клеток, палочки и колбочки. Палочки в основном отвечают за свет и часто нужны при низкой освещенности, а для распознавания цвета нужны колбочки, у них есть соответствующие рецепторы. Именно они обеспечивают глаза цветным зрением, но фишка в том, что их относительно мало, 6-7 миллионов штук, в то время как палочек намного больше, 120 миллионов. Как следствие, глаз менее чувствителен к изменению яркости и изображения, чем к изменению его цвета. Поэтому, сжимая изображение, можно использовать такой трюк. Смотрите, во-первых, мы отделяем цвет от яркости, а во-вторых, ту информацию, которая отвечает за цвет, мы можем немного сжать, и скорее всего взгляд ничего не заметит. Профессиональные приложения и сервисы редко бывают удобными. Видели, когда-нибудь инженерный или бухгалтерский софт. Сесть сходу разобраться вообще нереально. Да, говорят интерфейсы для профи должны быть функциональными, а неудобными. Но лично я с этим не согласен. Каждый заслуживает пользоваться интерфейсом, который разработан с заботой о человеке. От приложения для инвестиций я не ждал многого, но это же серьезный финансовый инструмент. Значит, его разработчики тоже не станут заботиться об удобстве пользователей. Торговые приложения фирмы одного из крупнейших в России инвестиционных брокеров доказывают, что я ошибался. Удобный интерфейс, поддержка 24/7, бесплатное обучение и аналитика, возможность следить за инвестиционными стратегиями экспертов. Здесь есть все, что нужно как для новичков, так и для опытных инвесторов. А еще при регистрации вам подключат тариф "Фритрейт". Без комиссии за сделки с российскими акциями и облигациями на Московской и Петербургской биржах. В общем, попробуйте сами, открывайте счет и начинайте инвестировать с компанией "Фирма". Ссылка, как всегда, в описании. Возвращаемся к видео. Именно на этом, в принципе, основан первый важный этап сжатия. Он называется цветовая субдискретизация. Но как именно нам отделить яркость от цвета? Смотрите, дальше. Каждый пиксель у нас кодируется тремя компонентами RGB, по одной переменной для каждого цвета, значения могут принимать диапазон от 0 до 2505. Но фишка в том, что эту информацию мы можем сохранить при помощи трех других переменных Y, Cb, Cr. Поэтому мы можем без потерь преобразовать изображение из формата RGB в формат YCbCr. Здесь Y отвечает за яркость, а Cb и Cr — за цветовые каналы. Таким образом, вычислив эти переменные, мы получим три новых изображения. Вычисления происходят по определенным формулам, но для нас это не важно. Такое разделение необходимо, чтобы дальше мы могли убрать часть деталей из цветовых каналов Cb и Cr. Пока мы не удалили никакие данные, и математическое преобразование из одного формата в другой является обратимым. Теперь мы будем использовать особенность нашего зрения, которая замечает яркость, но не так сильно замечает цвета. В обоих цветовых каналах Cb и Cr мы объединяем каждые четыре пикселя в один. По сути, мы снижаем разрешение этих каналов. Обе цветовые составляющие уменьшаются в четыре раза по сравнению с фотонным размером, а яркость остается неизменной. Таким образом, на этом шаге размер изображения уменьшился в два раза, поскольку две компоненты уменьшились в четыре раза. Вот так выглядят две картинки после обработки. Вы можете поставить их на паузу и попробовать найти разницу. Но здесь мы сжали изображение в два раза, а нам нужно сжать его в 40 раз. Поэтому переходим к самому сложному и умному этапу. Для этого изображение разбивается на квадратные блоки размером 8 на 8 пикселей. И теперь алгоритмы должны определить, насколько много деталей содержится в каждом из таких блоков. Если деталей мало, то можно закодировать меньшим количеством бит и уменьшить размер файла. Если деталей много, то наоборот. Иными словами, если бы картины в музее хранились в формате JPEG, то любая картина в стиле ангога занимала бы намного больше места, чем чёрный квадрат Малевича. Вот где происходит анализ при помощи дискретного косинусного преобразования. Но это не суть. Главное — философия. Можно сравнить это с игрой со стеклянными стеклышками в детстве. Накладывая одно на другое, можно получить третий цвет. Такой же подход используется в JPEG, только вместо цветов — паттерны. Вот наш блок 8 на 8 пикселей. Он содержит 64 точки. И оказывается, что любое простое монохромное изображение можно представить в виде комбинации таких базовых картинок, всего 64 штуки. То есть, если накладывать их друг на друга с разной степенью прозрачности, можно получить любую простую картинку разрешением 8 на 8, примерно как с цветными стеклышками. Именно таким образом мы можем перестроить наши изображения. Единственное, что нужно знать, это в какой пропорции смешивать эти паттерны. Каждый коэффициент в матрице говорит, насколько интенсивно такой паттерн должен присутствовать в картинке. И суть алгоритма заключается в вычислении этих коэффициентов. На выходе получается матрица 8 на 8, которая описывает вклад каждого рисунка. Прикольно, да? Но это еще не все. Оказывается, коэффициенты, находящиеся в левой верхней части матрицы, отвечают за плавные переходы и более общие черты рисунка. А коэффициенты, лежащие в правой нижней части, отвечают за более тонкие детали и линии. Если деталей в картинке мало, то коэффициенты из правой нижней части будут близки к нулю. И напомню, что на данном этапе мы пока не отбросили никакую информацию, мы просто разложили нашу картинку на слои. Но главное, мы поняли, от каких из этих слоев потенциально можно избавиться. Как же это сделать? Суть алгоритма заключается в делении чисел из исходной матрицы на числа из матрицы квантования. И здесь, как можно догадаться, выживает только сильнейший. Если коэффициент какого-то паттерна слишком маленький, его просто не учитываем. Причем, паттерны, отвечающие за высокую детализацию, должны очень сильно постараться, чтобы пройти через этот этап и попасть в итоговый JPEG. Понимаете? То есть, данные, отвечающие за четкие детали, отбрасываются прежде всего, и нужно быть очень выразительным, чтобы сохраниться. В общем, в результате деления чисел между матрицами получается, что большая часть квантов становится равной нулю после округления. Именно они отбрасываются, а все остальное остается в картинке. Как раз на этом этапе происходит самое сильное сжатие в JPEG. Дальше для записи этих чисел в строки используется такой интересный механизм в виде змеи. Получается, примерно такая строчка, и здесь тоже есть несколько ухищрений. Например, вместо того, чтобы писать все нули, можно просто в соответствующих местах указывать количество нулей, это тоже сжатие небольшое. И, примерно здесь, основные этапы сжатия JPEG закончены. Поздравляю! В итоге у нас получилась длинная последовательность цифр, но как же теперь вывести ее на экран? Нужно сделать все то же самое, только в обратном порядке. Во-первых, декодировать с помощью алгоритмов сжатия цифр, заполнить матрицу 8 на 8, умножить каждое число на соответствующую восстановленную переменную, добавить слой с узорами и преобразовать получившиеся переменные в RGB. Вот такой механизм действий проделал, который каждый раз, когда вы просматриваете картинку, восстанавливает сообщение. И в итоге получается создать алгоритм, и не зря потратили 6 лет. В нем учитываются куча аспектов, особенности нашего зрения, сложная математика, преобразование матриц и разложение цветовой переменной. Круто, но конечно же у JPEG есть куча недостатков. Например, он не очень эффективно сжимает текст или дает кучу артефактов при повторном сжатии. Но несмотря на почти девятилетний возраст, он до сих пор остается основным форматом в интернете, и это явно говорит о качестве заложенных подходов и технологии.