Почему не удается сжать рисунки в формате jpeg?

26 ответов на вопрос “Почему не удается сжать рисунки в формате jpeg?”

  1. m0rgan21 Ответить

    Если говорить об изображениях и их форматах, то бесспорным фаворитом для них является, конечно, JPG. Примерно 70% веб-сайтов, например, используют формат JPG, его используют большинство цифровых фото-и видеокамер, в том числе те, что встроены в смартфоны и планшеты. Формат JPG занимает огромную долю рынка в Интернете и в электронных устройствах, которые используют изображения.
    Почему преобладает именно JPG?
    Преимуществом JPG, в частности в Интернете или в устройствах с ограниченным объемом внутренней памяти, является то, что он удобно комбинирует достойное качество изображения и компактный объем самого файла.

    Так почему же JPG не в почете у типографий? Почему их сотрудники закатывают глаза и делают кислую мину при одном упоминании такого полезного и популярного формата?
    Все объясняется довольно просто: качество формата JPG. Вернее, недостаточное качество для полиграфии.
    Изображения в формате JPG, как правило, отлично смотрятся на экране компьютера, но в печати часто выглядят некачественно. Это происходит потому, что требования к качеству изображений для монитора гораздо ниже, чем у печатной машины. Не вдаваясь в излишние технические подробности о количестве точек на дюйм, мы просто предлагаем вам сделать следующее: если у вас есть образ, который заполняет экран вашего компьютера 22” (с разрешением 1680х1050) и выглядит большим, что же изображение будет печатать только на 5,6″х 3,5″ (140х90 мм), или немного больше, чем визитная карточка.
    Обратите внимание, мы консультируем по всем вопросам, связанным с препрессом и печатью!
    Обращайтесь по нашим телефонам или на почту vera@formatd.ru

    Таким образом, очевидно, что к изображениям для печати требования значительно выше, чем у тех, которые предназначены для просмотра на мониторе. Это потому, что стандарт для печати, как правило, 300 dpi, в отличие от 72 dpi для вашего монитора.
    Теперь давайте рассчитаем размеры изображения, которое должно пойти на печать. Допустим, у вас есть изображение на весь монитор (1680 х 1050), чтобы его напечатать качественно, оно должно быть не менее 5625 х 3525 пикселей. То есть более чем в 3 раза!
    Хотя JPG универсален, изображение в таком формате можно сделать и с разрешением 300 dpi. Но есть и другая причина, почему формат JPG нежелателен для печати:
    Сжатие с потерями
    Это не то, что вы можете компенсировать, просто увеличив разрешение изображения до требуемых 300 точек на дюйм. Все файлы JPG используют сжатие с потерями, и потери эти могут оказаться фатальными для печатного оттиска.
    Сжатие с потерями может создать “артефакты” и пикселизацию в изображении.
    Так что же такое сжатие с потерями, и как это влияет на качество изображения?
    Сжатие с потерями – это агрессивная форма сжатия файлов, которая позволяет уменьшить размер файла изображения примерно до одной десятой от первоначального. Например, TIFF или PSD размером 30 Mb файл можно сжать до JPG размером 3 Mb. Именно поэтому JPG так удобен для Интернета, где меньшие размеры файла означают более быструю загрузку страниц. Некоторые данные файла попросту отбрасываются. Потерянные данные сглаживаются методами, которые, в принципе, не портят картинку, если она используется на электронном носителе, но при печати создают видимые “артефакты” в изображении.
    Так какие типы файлов нужно использовать для печати?
    Прежде чем поставить изображение в верстку, откройте его в Photoshop и первым делом, до начала всех преобразований, приведите его в нужный размер, задайте ему разрешение 300 dpi, переведите в цветовое пространство CMYK (не RGB!). Затем сохраните файл в формате “без сжатия” как PSD, PDF или TIFF.
    Если у вас возникли вопросы о том, как это сделать, обратитесь к нам с конкретным вопросом по электронной почте vera@formatd.ru
    Правильно готовя свои файлы для печати, вы получите очень хороший результат. Удачи!
    Ваш “Формат-Д”

  2. shynsh Ответить

    И снова здравствуйте! Я нашел эту статью, написанную еще мае 2019-ого года. Это — продолжение серии статей о WAVE и JPEG, Вот первая. Эта публикация включит в себе информацию об алгоритме кодирования изображений и о самом формате в целом.

    Щепотку истории

    Столовую ложку статьи из Википедии:
    JPEG (Joint Photographic Experts Group) — один из популярных растровых графических форматов, применяемый для хранения фотоизображений и подобных им изображений.Разработан этот стандарт был Объединенной группой экспертов по фотографии еще в 1991 году для эффективного сжатия изображений.

    Какой путь проходят изображения от сырого вида до JPEG

    Некоторые считают, что JPEG-картинки — сжатые методом Хаффмана сырые данные, но это не так. Перед контрольным сжатием данные проходят длинный путь.
    Сначала цветовую модель меняют с RGB на YCbCr. Для этого даже есть специальный алгоритм — здесь. Y не трогают, так как он отвечает за яркость, и его изменение будет заметно.
    Первое, что делают с изображением — это “прореживание” (subsampling). Понять это просто: берется 2х2 массив пикселей, далее берутся Cb и Cr — средние значения каждого из компонентов YCbCr этих 4 пикселей. И так, мы выиграли 6 байт, вместо 4 Y, 4 Cb, 4 Cr мы получили 4 Y и одинаковые для каждого из них Cb и Cr (4 + 4 + 4 = 12; 4 + 1 + 1 = 6; 12 — 6 = 6). В масштабах даже 2×2 сжатие с потерей с коэффициентом сжатия 2:1 звучит солидно. Это применяется ко всему изображению. И так — сбросили половину размера. А такой прием мы можем использовать благодаря нашему цветовому восприятию. Человек с легкостью заметит разницу в яркости, но не в цвете, если он усредненный в маленьком блоке пискелей. Также прореживание может выполняться в линию, 4 пикселя по горизонтали и вертикали. Первый вариант используется чаще. Если важно качество изображения, то прореживание не выполняется вообще.
    Наглядная иллюстрация прореживания (Хабр не дал вставить гифку) — https://i.ibb.co/Rg5Th9H/150953010617579181.gif
    Основная часть подготовки
    ДКП
    Теперь самая сложная и необходимая часть. Вся картинка разбивается на блоки 8×8 (используют заполнение в случае, если разрешение не кратно стороне блока).
    Теперь к каждому блоку применяют ДКП (Дискретно-косинусное преобразование). В этой части из картинки вынимают все лишнее. Используя ДКП надо понять, описывает ли данный блок (8×8) какую-нибудь монотонную часть изображения: неба, стены; или он содержит сложную структуру (волосы, символы и т.д.). Логично, что 64 похожих по цвету пикселей можно описать всего 1-им, т.к. размер блока уже известен. Вот вам и сжатие: 64 к 1.
    ДКП превращает блок в спектр, и там, где показания резко сменяются, коэффициент становится положительным, и чем резче переход, тем выше будет выход. Там, где коэффициент выше, на картинке изображенны четкие переходы в цвете и яркости, где он ниже — слабые (плавные) смены величин компонентов YCbCr в блоке.
    Квантование
    Тут уже применяются настройки сжатия. Каждый из коэффициентов в каждой из матриц 8×8 делится на определенное число. Если качество изображения после всех его модификаций вы более уменьшать не будете, то делитель должен быть единицей. Если вам важнее память, занимаемая этой фотографией, то делитель будет больше 1, и частное округляется. Так выходит, что после округления нередко получается много нулей.
    Квантование делают для создания возможности еще большего сжатия. Вот как это выглядит на примере квантования графика y = sin(x):

    Сжатие
    Сначала проходим по матрице зиг-загом:

    Получаем одномерный массив с числами. Мы видим, что в нем много нулей, их можно убрать. Для этого вместо последовательности из множества нулей мы вписываем 1 нуль и после него число, обозначающее их количество в последовательности. Таким образом можно сбросить до 1/3 размера всего массива. А дальше просто сжимает этот массив методом Хаффмана и вписываем уже в сам файл.

    Где используется

    Везде. Как и PNG, JPEG используется в фотокамерах, OS’ях (в качестве логотипов компании, иконок приложений, thumbnail’ов) и во всех возможных сферах, где нужно эффективно хранить изображения.

    Вывод

    На данный момент знания о JPEG сейчас ценны лишь в образовательных целях, ведь он уже везде встроен и оптимизирован большими группами людей, но гранит науки все-же вкусный.
    Источники
    Статья про YCbCr на Википедии
    Статья о JPEG на Википедии
    Немного про ДКП с поста Пикабу
    Статья о ДКП на Википедии

  3. max_xtrim Ответить

    Давайте рассмотрим процесс работы с изображениями на Mac, к примеру, рисунки отлично сожмёт стандартное приложение «Просмотр»: установка дополнительного ПО ни к чему, даже для пакетной обработки. Программа «Просмотр» на Маке знает, как изменить размер сразу нескольких фото.
    Выбираете одно, или несколько изображений, открываете их в просмотре, далее выбираете Инструменты > Настроить размер, и заполняете нужные значения. И сохраняете.

    к оглавлению ↑

    Заключение

    Рекомендуем поэкспериментировать со сжатием картинок самостоятельно – при этом предварительно скопировав их в тестовую папку, чтобы не потерять важные фото. После 3-4 попыток вы на практике поймёте, как уменьшить размер изображения оптимальным образом, с наиболее подходящими параметрами компрессии, ширины и высоты.
    Наши рекомендации о том, как уменьшить размер файла JPG:
    Установить и использовать повседневно любой качественный менеджер графических файлов.
    Забыть о Фотошопе: это слишком мощный и неповоротливый редактор для таких простых задач.
    Использовать онлайн-сервисы лишь когда под рукой нет других способов – а для одиночных файлов пользоваться Paint’ом.
    Дисклеймер: ни одна собака в ходе художественных и программных экспериментов не пострадала. : )

  4. yuravax Ответить

    Вокруг формата JPEG так уж много разговоров и так часто меня о нем спрашивают, что я решил воспользоваться свободной минуткой и показать какие-то вещи, на которые на занятиях времени всегда нету, а на пальцах не очень-то объяснишь.

    Сразу хочу сказать, что JPEG — это в общем-то хорошо. Ну правда, посудите сами — не будь этого формата сколько времени приходилось бы ждать загрузки страницы в интернет? И это при нынешних-то скоростях. Я уже не говорю про несчастных фотолюбителей, которым приходилось бы (о ужас) самостоятельно делать RAW-конвертацию всякий раз, когда нужно выложить в инстаграм фото котика.
    Как мы знаем, основная идея JPEG — это любой ценой уменьшить размер файла. В числе прочего это уменьшение достигается за счет процедуры квантования. Пожалуй последствия этой процедуры наиболее заметны. По сути — программа ищет похожие участки изображения и заменяет их некоторым «эталоном», что в обязательном порядке повреждает изображение. Однако — там, где программа не смогла найти ничего похожего сжатие происходит с меньшими, практически незаметными потерями. Другими словами — чем изображение сложнее, чем больше в нем деталей, тем меньше будет сжатие.
    В качестве эксперимента я разрезал следующую фотографию на три части и сохранил их в виде отдельных файлов:

    Как вы можете заметить, файл с небом, где никаких, практически, деталей нет оказался в три раза меньше, чем нижний фрагмент, где JPEGу не удалось сэкономить на повторяющихся участках.
    Отсюда можно сделать вывод, что наиболее уязвимая зона изображения — это границы обширных малодетализованными участками, например — неба. Именно там возникают самые заметные JPEG-артефакты. На днях я выкладывал в Facebook одну из фотографий из тура в Словакию. Как я не упрашивал загрузчик не калечить фото — идея была обречена на провал. Черные силуэты на фоне синего неба в обязательном порядке обрастали джипеговой грязью. Тут мне стало жутко интересно, а с каким же качеством сжатия пересохраняет мои картинки Facebook? Ведь при слабом сжатии (Quality 12) проблемы не очень заметны. Пришлось немного поэксперементировать:

    Судя по всему качество пересохранения в Facebook никак не выше шести. А это значит, что когда вы готовите фотографии для публикации в этой сети, то ничего кроме максимального качества ставить ни в коем случае нельзя. Во всяком случае, если у вас есть в фотографии небо :))
    Еще один момент — это повторное сохранение JPEG. Даже если вы ничего не делали с файлом (а только добавили свой копирайт), то картинка станет хуже. Чтобы показать что это я двадцать раз пересохранил файл в качестве 12

    …и еще раз сделал то же самое в качестве 10:

    Так вот. JPEG это прекрасно. Но один раз.
    Конечно, тут есть еще два вопроса — можно ли делать цветокоррекцию в JPEG и (самое главное) можно ли снимать JPEG? Я хочу подробно разобрать и эти темы, но мне хочется узнать, а что вы думаете по этим двум поводам?

  5. alexey67 Ответить

    Изображения формата JPEG встречаются повсюду в нашей цифровой жизни, но за этим покровом осведомлённости скрываются алгоритмы, устраняющие детали, не воспринимаемые человеческим глазом. В итоге получается высочайшее визуальное качество при наименьшем размере файла – но как конкретно всё это работает? Давайте посмотрим, чего именно не видят наши глаза!


    Легко принять, как само собой разумеющееся, возможность отправить фотку другу, и не волноваться по поводу того, какое устройство, браузер или операционную систему он использует – однако так было не всегда. К началу 1980-х компьютеры умели хранить и показывать цифровые изображения, однако по поводу наилучшего способа для этого существовало множество конкурирующих идей. Нельзя было просто отправить изображение с одного компьютера на другой и надеяться, что всё заработает.
    Для решения этой проблемы в 1986 году был собран комитет экспертов со всего мира под названием “Объединённая группа экспертов по фотографии” (Joint Photographic Experts Group, JPEG), основанный в рамках совместной работы Международной организации по стандартизации (ISO) и Международной электротехнической комиссии (IEC) – двух международных организаций по стандартизации, штаб-квартира которых расположена в Женеве (Швейцария).
    Группа людей под названием JPEG создала стандарт сжатия цифровых изображений JPEG в 1992 году. Любой человек, использовавший интернет, вероятно, встречался с изображениями в кодировке JPEG. Это самый распространённый способ кодирования, отправки и хранения изображений. От веб-страниц до емейла и соцсетей, JPEG используется миллиарды раз в день – практически каждый раз, когда мы смотрим изображение онлайн или отправляем его. Без JPEG веб был бы менее ярким, более медленным, и, вероятно, в нём было бы меньше фоток котиков!
    Эта статья – о том, как декодировать JPEG изображение. Иначе говоря, о том, что требуется для преобразования сжатых данных, хранящихся на компьютере, в изображение, появляющееся на экране. Об этом стоит знать не только потому, что это важно для понимания технологии, которую мы используем ежедневно, но и потому, что раскрывая уровни сжатия, мы лучше узнаём восприятие и зрение, а также то, к каким деталям наши глаза восприимчивей всего.
    Кроме того, играться с изображениями таким способом очень интересно.

    Заглядывая внутрь JPEG

    На компьютере всё хранится в виде последовательности двоичных чисел. Обычно эти биты, нули и единицы, группируются по восемь, составляя байты. Когда вы открываете JPEG изображение на компьютере, что-то (браузер, операционка, ещё что-то) должно декодировать байты, восстановив изначальное изображение в виде списка цветов, которые можно показать.
    Если вы скачаете эту умильную фотографию кота и откроете её в текстовом редакторе, вы увидите кучу бессвязных символов.

    Здесь я использую Notepad++ для изучения содержимого файла, поскольку обычные текстовые редакторы, типа Notepad из Windows, испортят двоичный файл после сохранения, и он перестанет удовлетворять формату JPEG.
    Открывая изображение в текстовом редакторе, вы сбиваете компьютер с толку, точно так же, как вы сбиваете с толку свой мозг, когда потрёте глаза и начинаете видеть цветные пятна!
    Эти пятна, которые вы видите, известны, как фосфены, и не являются результатом воздействия светового стимула или галлюцинациями, порождёнными разумом. Они возникают, потому что ваш мозг считает, что любые электрические сигналы в глазных нервах передают информацию о свете. Мозгу необходимо делать такие предположения, поскольку никак нельзя узнать, является ли сигнал звуком, видением или чем-то ещё. Все нервы в теле передают абсолютно одинаковые электрические импульсы. Давя на глаза, вы отправляете сигналы, не являющиеся зрительными, но активирующие рецепторы глаза, что ваш мозг интерпретирует – в данном случае, неверно – как нечто зрительное. Вы буквально способны видеть давление!
    Забавно думать о том, насколько компьютеры похожи на мозг, однако это также является полезной аналогией, иллюстрирующей, насколько сильно значение данных – передаваемых по телу нервами, или хранящихся на компьютере – зависит от их интерпретации. Все двоичные данные состоят из нулей и единиц, базовых компонентов, способных передавать информацию любого вида. Ваш компьютер часто догадывается, как интерпретировать их при помощи подсказок, например, расширений файлов. А сейчас мы заставляем его интерпретировать их как текст, поскольку именно этого ожидает текстовый редактор.
    Чтобы понять, как декодировать JPEG, нам нужно увидеть сами изначальные сигналы – двоичные данные. Это можно сделать при помощи шестнадцатеричного редактора, или же прямо на веб-странице оригинала статьи! Там есть изображение, рядом с которым в текстовом поле приведены все его байты (кроме заголовка), представленные в десятичном виде. Вы можете менять их, и скрипт перекодирует и выдаст новое изображение на лету.

    Можно узнать многое, просто играясь с этим редактором. К примеру, можете ли вы сказать, в каком порядке хранятся пиксели?
    В этом примере странно то, что изменение некоторых чисел вообще не влияет на изображение, а, например, если заменить число 17 на 0 в первой строке, то фотка полностью испортится!

    Другие изменения, например, замена 7 на строке 1988 на число 254 изменяет цвет, но только последующих пикселей.

    Возможно, наиболее странным будет то, что некоторые числа меняют не только цвет, но и форму изображения. Измените 70 в строке 12 на 2 и посмотрите на верхний ряд изображения, чтобы увидеть, что я имею в виду.

    И вне зависимости от того, какое JPEG изображение вы используете, вы всегда будете находить эти загадочные шахматные последовательности при редактировании байтов.
    Играясь с редактором, тяжело понять, как воссоздаётся фотка из этих байтов, поскольку JPEG сжатие состоит из трёх различных технологий, применяющихся последовательно по уровням. Мы изучим каждую из них отдельно, чтобы раскрыть наблюдаемое нами загадочное поведение.
    Три уровня JPEG сжатия:
    Цветовая субдискретизация.
    Дискретное косинусное преобразование и дискретизация.
    Кодирование длин серий, дельта и Хаффмана
    Дабы вы могли представить себе масштабы сжатия, обратите внимание, что изображение, приведённое выше, представляет 79 819 чисел, то есть, около 79 Кб. Если бы мы хранили его без сжатия, для каждого пикселя потребовалось бы по три числа – для красной, зелёной и синей составляющей. Это составило бы 917 700 чисел, или ок. 917 Кб. В результате JPEG сжатия итоговый файл уменьшился больше чем в 10 раз!
    На самом деле, это изображение можно сжать гораздо сильнее. Снизу приведены два изображения рядом – фотка справа была ужата до 16 Кб, то есть в 57 раз меньше, чем несжатая версия!

    Если присмотреться, будет видно, что эти изображения не идентичны. Оба они – картинки с JPEG сжатием, однако правая гораздо меньше по объёму. Также она выглядит чуть похуже (посмотрите на квадраты цветов фона). Поэтому JPEG ещё называют сжатием с потерями; в процессе сжатия изображение меняется и теряет некоторые детали.

    1. Цветовая субдискретизация

    Вот изображение с применением только первого уровня сжатия.

    (Интерактивная версия – в оригинале статьи). Удаление одного числа рушит все цвета. Однако если удалить ровно шесть чисел, это практически не влияет на изображение.
    Теперь числа чуть проще расшифровать. Это почти что простой список цветов, у которого каждый байт изменяет ровно один пиксель, но при этом он уже в два раза меньше несжатого изображения (которое занимало бы ок. 300 Кб в таком уменьшенном размере). Догадаетесь, почему?
    Можно видеть, что эти числа не обозначают стандартные красную, зелёную и синюю компоненты, поскольку если заменить все числа нулями, мы получим зелёное изображение (а не белое).

    Это потому, что эти байты обозначают Y (яркость),

    Cb (относительная голубизна),

    и Cr (относительная краснота) картинки.

    Почему не использовать RGB? Ведь именно так работает большинство современных экранов. Ваш монитор может демонстрировать любой цвет, включая красный, зелёный и синий цвета с разной интенсивностью для каждого пикселя. Белый получается включением всех трёх на полную яркость, а чёрный – их отключением.

    Это также очень похоже на работу человеческого глаза. Цветовые рецепторы наших глаз называются “колбочки”, и делятся на три типа, каждый из которых более чувствителен либо к красному, либо к зелёному, либо к синему цветам [колбочки S-типа чувствительны в фиолетово-синей (S от англ. Short — коротковолновый спектр), M-типа — в зелено-желтой (M от англ. Medium — средневолновый), и L-типа — в желто-красной (L от англ. Long — длинноволновый) частях спектра. Наличие этих трёх видов колбочек (и палочек, чувствительных в изумрудно-зелёной части спектра) даёт человеку цветное зрение. / прим. перев.]. Палочки, другой тип фоторецепторов в наших глазах, способны улавливать только изменения в яркости, однако они гораздо более чувствительные. В наших глазах есть около 120 млн палочек и всего 6 млн колбочек.
    Поэтому наши глаза гораздо лучше замечают изменения в яркости, чем изменения в цвете. Если отделить цвет от яркости, можно убрать немного цвета, и никто ничего не заметит. Цветовая субдискретизация – это процесс представления цветовых компонентов изображения в меньшем разрешении по сравнению с компонентами яркости. В примере выше у каждого пикселя ровно один компонент Y, а у каждой отдельной группы из четырёх пикселей есть ровно одна компонента Cb и одна Cr. Поэтому изображение содержит в четыре раза меньше цветовой информации, чем было у оригинала.
    Цветовое пространство YCbCr используется не только в JPEG. Его изначально придумали в 1938 году для телепередач. Не у всех есть цветной телевизор, поэтому разделение цвета и яркости позволило всем получать один и тот же сигнал, а телевизоры без цвета просто использовали только компонент яркости.
    Поэтому удаление одного числа из редактора полностью рушит все цвета. Компоненты хранятся в виде Y Y Y Y Cb Cr (на самом деле, не обязательно в таком порядке – порядок хранения задаётся в заголовке файла). Удаление первого числа приведёт к тому, что первое значение Cb будет воспринято, как Y, Cr как Cb, и в целом получится эффект домино, переключающий все цвета картинки.
    Спецификация JPEG не обязывает вас использовать YCbCr. Но в большинстве файлов она используются, поскольку она даёт изображения лучшего качества после субдискретизации по сравнению с RGB. Но вам не обязательно верить мне на слово. Посмотрите сами в табличке ниже, как будет выглядеть субдискретизация каждого отдельного компонента как в RGB, так и в YCbCr.

    (Интерактивная версия – в оригинале статьи).
    Удаление синего не так заметно, как красного или зелёного. Всё потому, что из шести миллионов колбочек в ваших глазах около 64% чувствительны к красному, 32% к зелёному и 2% к синему.
    Субдискретизация компонента Y (слева внизу) видна лучше всего. Заметно даже небольшое изменение.
    Преобразование изображения из RGB в YCbCr не уменьшает размер файла, но облегчает поиск менее заметных деталей, которые можно удалить. Сжатие с потерями происходит на втором этапе. В её основе лежит идея представления данных в более сжимаемом виде.

    2. Дискретное косинусное преобразование и дискретизация

    Этот уровень сжатия по большей части и определяет суть JPEG. После преобразования цветов в YCbCr компоненты сжимаются по отдельности, поэтому далее мы можем сконцентрироваться только на компоненте Y. И вот как выглядят байты компонента Y после применения этого уровня.

    (Интерактивная версия – в оригинале статьи). В интерактивной версии клик на пикселе прокручивает редактор на строчку, которая его обозначает. Попробуйте поудалять числа с конца или добавить несколько нулей к определённому числу.
    На первый взгляд, выглядит, как очень плохое сжатие. В изображении 100 000 пикселей, и для обозначения их яркости (Y-компоненты) требуется 102 400 чисел — это хуже, чем если вообще ничего не сжимать!
    Однако обратите внимание на то, что большинство этих чисел равны нулю. Более того, все эти нули в конце строк можно удалять, не меняя изображение. Остаётся порядка 26 000 чисел, а это уже почти в 4 раза меньше!
    На этом уровне находится секрет шахматных узоров. В отличие от других эффектов, которые мы видели, появление этих узоров не является глюком. Они – строительные блоки всего изображения. В каждой строчке редактора содержится ровно 64 числа, коэффициенты дискретного косинусного преобразования (DCT), соответствующие интенсивностям 64-х уникальных узоров.
    Эти узоры формируются на основе графика косинуса. Вот, как выглядят некоторые из них:

    8 из 64 коэффициентов
    Ниже – изображение, демонстрирующее все 64 узора.

    (Интерактивная версия – в оригинале статьи).
    Эти узоры имеют особое значение, поскольку они формируют базис изображений размера 8х8. Если вы незнакомы с линейной алгеброй, то это означает, что любое изображение размера 8х8 можно получить из этих 64-х узоров. DCT – это процесс разбиения изображений на блоки 8х8 и преобразования каждого блока в комбинацию из этих 64 коэффициентов.
    То, что любое изображение можно составить из 64 определённых узоров, кажется волшебством. Однако это то же самое, что сказать, что любое место на Земле можно описать двумя числами – широтой и долготой [с указанием полушарий / прим. перев.]. Мы часто считаем поверхность Земли двумерной, поэтому нам требуются всего два числа. Изображение 8х8 имеет 64 измерения, поэтому нам требуются 64 числа.
    Пока непонятно, как это помогает нам в смысле сжатия. Если нам нужно 64 числа для представления изображения 8х8, почему этот способ будет лучше, чем просто хранить 64 компоненты яркости? Мы делаем это по той же причине, по которой мы превратили три числа RGB в три числа YCbCr: это позволяет нам удалить незаметные детали.
    Сложно увидеть, какие именно детали удаляются на этом этапе, поскольку JPEG применяет DCT к блокам 8х8. Однако никто не запрещает нам применить его к целой картинке. Вот, как выглядит DCT по компоненте Y в применении к целой картинке:

    С конца можно удалить более 60 000 чисел практически без заметных изменений на фотке.

    Однако отметьте, что если мы обнулим первые пять чисел, разница будет очевидной.

    Числа в начале обозначают изменения низкой частоты в изображении, и наши глаза улавливают их лучше всего. Числа ближе к концу обозначают изменения высоких частот, которые сложнее заметить. Чтобы «увидеть то, что не видно глазом», мы можем изолировать эти детали высокой частоты, обнулив первые 5000 чисел.

    Мы видим все области изображения, в которых происходит наибольшее изменение от пикселя к пикселю. Выделяются глаза кота, его усы, махровое одеяло и тени в нижнем левом углу. Можно пойти и дальше, обнулив первые 10 000 чисел:

    20 000:

    40 000:

    60 000:

    Эти высокочастотные детали JPEG и удаляет на этапе сжатия. Преобразование цветов в коэффициенты DCT не несёт потерь. Потери образуются на шаге дискретизации, где удаляются величины высокой частоты или близкие к нулю. Когда вы понижаете качество сохранения JPEG, программа увеличивает порог количества удаляемых значений, что даёт уменьшение размера файла, но делает картинку более пикселизированной. Поэтому изображение в первом разделе, которое было в 57 раз меньше, так выглядело. Каждый блок 8х8 представлялся гораздо меньшим количеством коэффициентов DCT по сравнению с более качественной версией.
    Можно сделать такой крутой эффект, как постепенная потоковая передача изображений. Можно вывести размытую картинку, которая становится всё более детализированной по мере скачивания всё большего количества коэффициентов.
    Вот, просто для интереса, что получится при использовании всего 24 000 чисел:

    Или всего 5000:

    Очень размыто, но как будто узнаваемо!

    3. Кодирование длин серий, дельта и Хаффмана

    Пока что все этапы сжатия шли с потерями. Последний этап, наоборот, идёт без потерь. Он не удаляет информацию, однако значительно уменьшает размер файла.
    Как можно сжать что-либо, не отбрасывая информацию? Представьте, как бы мы описали простой чёрный прямоугольник 700 х 437.
    JPEG использует для этого 5000 чисел, но можно достичь гораздо лучшего результата. Можете представить себе схему кодирования, которая бы описывала подобное изображение как можно меньшим количеством байт?
    Минимальная схема, которую смог придумать я, использует четыре: три для обозначения цвета, и четвёртый – сколько пикселей имеет такой цвет. Идея представления повторяющихся значений таким сжатым способом называется кодирование длин серий. Она не имеет потерь, поскольку мы можем восстановить закодированные данные в первозданном виде.
    Размер файла JPEG с чёрным прямоугольником гораздо больше 4 байт – вспомните, что на уровне DCT сжатие применяется к блокам 8х8 пикселей. Поэтому как минимум нам нужен один коэффициент DCT на каждые 64 пикселя. Один нам нужен потому, что вместо того, чтобы хранить один DCT-коэффициент, за которым идёт 63 нуля, кодирование длин серий позволяет нам хранить одно число и обозначить, что «все остальные – нули».
    Дельта-кодирование – это техника, при которой каждый байт содержит отличие от какого-то значения, а не абсолютную величину. Поэтому редактирование определённых байтов изменяет цвет всех остальных пикселей. К примеру, вместо того, чтобы хранить
    12 13 14 14 14 13 13 14
    Мы могли бы начать с 12, а потом просто обозначать, сколько надо прибавить или отнять, чтобы получить следующее число. И эта последовательность в дельта-кодировании приобретает вид:
    12 1 1 0 0 -1 0 1
    Преобразованные данные не получаются меньше исходных, но сжимать их уже легче. Применение дельта-кодирования перед кодированием длин серий может сильно помочь, оставаясь при этом сжатием без потерь.
    Дельта-кодирование – одна из немногих техник, применяемых вне блоков 8х8. Из 64 коэффициентов DCT один – просто постоянная волновая функция (сплошной цвет). Он представляет среднюю яркость каждого блока для компонент яркости, или среднюю голубизну для компонентов Cb, и так далее. Первое значение каждого DCT-блока называется DC-значением, и каждое DC-значение проходит дельта-кодирование по отношению к предыдущим. Поэтому изменение яркости первого блока повлияет на все блоки.
    Остаётся последняя загадка: как изменение единственного числа полностью портит всю картинку? Пока таких свойств у уровней сжатия не было. Ответ лежит в заголовке JPEG. Первые 500 байт содержат метаданные об изображении – ширину, высоту, и проч., и пока мы с ними не работали.
    Без заголовка практически невозможно (ну, или очень сложно) декодировать JPEG. Это будет выглядеть так, будто я пытаюсь описать вам картину, и начинаю изобретать слова для того, чтобы передать своё впечатление. Описание будет, вероятно, весьма сжатым, поскольку я могу изобретать слова именно с тем значением, которое я хочу передать, однако для всех остальных они не будут иметь смысла.
    Звучит глупо, но именно так это и происходит. Каждое изображение JPEG сжимается с кодами, специфичными именно для него. Словарь кодов хранится в заголовке. Эта техника называется «код Хаффмана», а словарь – таблицей Хаффмана. В заголовке таблица отмечена двумя байтами – 255 и потом 196. У каждого цветового компонента может быть своя таблица.
    Изменения таблиц радикально повлияют на любое изображение. Хороший пример – поменять на 15-й строке 1 на 12.

    Это происходит потому, что в таблицах указывается, как нужно читать отдельные биты. Пока что мы работали только с двоичными числами в десятичном виде. Но это скрывает от нас тот факт, что если вы хотите хранить число 1 в байте, то оно будет выглядеть, как 00000001, поскольку в каждом байте должно быть ровно восемь бит, даже если нужен из них всего один.
    Потенциально это большая трата места, если у вас есть много мелких чисел. Код Хаффмана – это техника, позволяющая нам ослабить это требование, по которому каждое число должно занимать восемь бит. Это значит, что если вы видите два байта:
    234 115
    То, в зависимости от таблицы Хаффмана, это могут быть три числа. Чтобы их извлечь, вам надо сначала разбить их на отдельные биты:
    11101010 01110011
    Затем обращаемся к таблице, чтобы понять, как их группировать. К примеру, это могут быть первые шесть битов, (111010), или 58 в десятичной системе, за которыми идут пять битов (10011), или 19, и наконец последние четыре бита (0011), или 3.
    Поэтому очень сложно разобраться в байтах на этом этапе сжатия. Байты не представляют то, что кажется. Не буду углубляться в детали работы с таблицей в данной статье, но материалов по этому вопросу в сети достаточно.
    Один из интересных трюков, которые можно проделать, зная это – отделить заголовок от JPEG и хранить его отдельно. По сути, получится, что файл сможете прочесть только вы. Facebook проделывает это, чтобы ещё сильнее уменьшать файлы.
    Что ещё можно сделать – совсем немного изменить таблицу Хаффмана. Для других это будет выглядеть, как испорченная картинка. И только вы будете знать волшебный вариант её исправления.
    Подведём итоги: так что же нужно для декодирования JPEG? Необходимо:
    Извлечь таблицу (таблицы) Хаффмана из заголовка и декодировать биты.
    Извлечь коэффициенты дискретного косинусного преобразования для каждого компонента цвета и яркости для каждого блока 8х8, проведя обратные преобразования кодирования длин серий и дельты.
    Скомбинировать косинусы на основе коэффициентов, чтобы получить значения пикселей для каждого блока 8х8.
    Масштабировать компоненты цветов, если проводилась субдискретизация (эта информация есть в заголовке).
    Преобразовать полученные значения YCbCr для каждого пикселя в RGB.
    Вывести изображение на экран!
    Серьёзная работа для простого просмотра фотки с котиком! Однако, что мне в этом нравится – видно, насколько технология JPEG человекоцентрична. Она основана на особенностях нашего восприятия, позволяющих достичь гораздо лучшего сжатия, чем обычные технологии. И теперь, понимая, как работает JPEG, можно представить, как эти технологии можно перенести в другие области. К примеру, дельта-кодирование в видео может дать серьёзное уменьшение размера файла, поскольку там часто есть целые области, не меняющиеся от кадра к кадру (к примеру, фон).
    Код, использованный в статье, открыт, и содержит инструкции по замене картинок на свои собственные.

  6. Tankist200668 Ответить


    Это тот факт, что существует и еще очень долго будет существовать, пока люди будут работать с изображениями и цифровыми фотографиями. Файлы нужно сжимать, сами фотографии нужно обрабатывать таким образом, чтобы и качество имели приличное, и можно было их без труда использовать в веб-дизайне, отправлять по e-mail. В нашем случае, то есть в веб-дизайне, особенно важен этот факт, поскольку, чем сильнее можно сжать файл и сохранить качество, тем больше красоты можно создать, большее количество изображений разместить и так далее.
    Поскольку формат JPEG – это основной формат для изображений, несмотря на существование PNG или WebP, в течение уже более двух десятков лет, сжатие его происходит уже при сохранении файла. Но и качество обычно страдает, хотя не всегда можно это заметить, особенно если смотреть на картинки на компьютере. Тем не менее, при попытке сохранить/распечатать/изменить размер такого изображения и проявляются все недостатки сжатия JPEG.
    Благодаря Photoshop и его одному очень редкому режиму смешивания, можно увидеть, насколько повлияет сжатие Jpeg и как этих самых ужасов можно избежать. Иными словами, мы не просто поговорим и рассмотрим детально, как можно сжимать Jpeg-изображения и как осознанно к этому подойти, мы также рассмотрим возможности Photoshop по предотвращению искажения.
    С учетом того, как много разных изображений и фотографий используется в веб-дизайне, такие возможности уж точно пригодятся творцам. Поскольку материал достаточно насыщенный – сразу и перейдем к делу.

    Режим смешивания

    Для того чтобы точно узнать и увидеть, что происходит с изображением при его уменьшении, мы используем режим наложения Photoshop – Разница. Мы немного о нем уже упоминали ранее. Напомним, что режим получил свое название от того, что он ищет различия между двумя слоями. Любые области на обоих слоях, что выглядят одинаково (например, черный цвет) и области, отличающиеся друг от друга (с проявлениями странных и чужеродных цветов). При работе со спецэффектами режим Разница обычно не используется и если читатели блога вспомнят наши практические материалы, то данного режима нигде и не было.
    Но при этом Разница проделывает огромную работу, демонстрируя пользователям, как много «мусора» мы добавляем к нашим изображениям, когда сжимаем их. Это совершенно не означает, что теперь нужно перестать сжимать файлы, использовать jpeg вообще и так далее. В реальном мире это попросту невозможно. Но это помогает понять нам, что происходит с картинкой и как можно избежать ухудшения. Тем более, если учесть то, что в веб-дизайне используются огромные по разрешению фотографии, а если их открыть на мониторах с разрешением более 1080р, то и «артефакты», и «мусор» будут явно видны и создастся негативное отношение и к самому сайту, и к работе дизайнера.

    У нас два изображения, одно из которых пережато на 60%. Но какое из них где? Проявления искажений могут быть обманчивыми, особенно на экране компьютера. Истина заключается в том, что это два совершенно разных изображения. Слева – оригинал, справа – сжатое на 60%. В это сложно поверить на слово, но если действительно увеличить их и сравнить, то можно увидеть лишние элементы, размытость или отсутствие пикселей. Если их не нужно печатать, то можно использовать в веб-дизайне и в таком виде, но иметь в виду, что в дальнейшем при любом изменении сжатого варианта, «огрехи» будут все явнее и четче.
    Обратимся к режиму Разница, который ищет различия между двумя слоями. Давайте испытаем его в действии. Открываем наш оригинал и создаем копию Ctrl+J. Ничего переименовывать не будем. Выбираем Слой 1 и в списке режимов наложения выбираем Разница.


    Все покрыто черным цветом и это говорит о том, что оба слоя идентичны друг другу. То есть никаких изменений режим не обнаружил.
    Но давайте попробуем удостовериться, что изменений действительно нет и черный цвет полностью однороден. Добавим к Слой 1 корректирующий слой Уровни.

    В появившемся диалоговом окне появится гистограмма. Если каждый пиксель в изображении отображает чистый черный цвет, который должен быть в данном случае (при одинаковых слоях), то все, что мы увидим на гистограмме – одна вертикальная полоска по левому краю. Таким образом, в нашем изображении нет никаких лишних цветовых пикселей, нет артефактов и нет мусора. Оно идеально. И так всегда, если мы создаем копию оригинального изображения, она есть 100% копия и никак иначе.
    Но идем дальше…
    Оставим только наш фоновый слой-изображение и удалим Слой 1 и Уровни. Вернемся к самому началу, иными словами. Но теперь сравним наш оригинал с изображением, которое подвергается маломальскому сжатию или обработке. У нас два документа открыты в окнах, и выбрав инструмент Перемещение, мы сжатый вариант перемещаем на окно оригинала (клик по нужному документу, зажимаем, «тащим» на другой и отпускаем). Таким образом, второй файл открывается у нас, как новый слой.

    Важно: когда будете перемещать, то вокруг оригинального изображения появится белая рамка, сообщающая о том, что в эту область создается перемещение.
    Поскольку мы перетаскивали наше сжатое изображение, то и отображаться оно будет в слегка сдвинутом виде. Поправим его, зажав Shift или по направляющим.


    Таким образом, у нас снова появилось два слоя, но один из них имеет «в себе» изображение, пережатое на 60%. Применим к Слой 1 режим смешивания Разница. И если разницы между двумя вариантами нет, то мы должны видеть снова чистый черный цвет. Вы можете видеть чисто черный или небольшие артефакты, но мы видим явные примеси (мы ближе к монитору).

    Добавим корректирующий слой Уровни. И если ранее у нас была одна тонкая полоска слева по вертикали, то теперь она более широкая и форма у нее иная. И она явно демонстрирует то, что нечто чужеродное в изображении есть. В чисто черном цвете есть что-то еще, а это означает, что два изображения совершенно не идентичны друг другу, хотя изначально именно так и может показаться.
    Что же в них не так? Мусор. Сжимая одну версию, мы по факту использовали чистую, нетронутую информацию изображения и добавили к ней целую кучу мусора. Шум, мусор, артефакты – называйте это, как вам нравится. Суть заключается в том, что мы повредили оригинал. Сколько мусора добавляет JPEG сжатие? Это сложно увидеть даже через режим смешивания или гистограмму Уровней. Но можно сдвинуть все ползунки Уровней влево. Не будем долго вдаваться в рассуждения, просто отметим, что таким образом слабый шум на изображении сделается гораздо ярче и его станет лучше видно.

    При этом стоит помнить, что все странные места непонятных цветов (красные, желтые и др.) это как раз и есть те самые области, что отличаются от оригинала и которые повредились при сжатии. Не очень красиво выглядит, но это как раз есть то, что называется «артефакты сжатия». Таким нехитрым способом можно очень хорошо узнать, как сильно повреждено изображение при пересохранении и в каких местах.
    По возможности в этих места веб-дизайнер можно поместить надписи, блоки (если изображение используется как фоновое) и так далее. То есть, «прикрыть» их.

    Настройки сжатия jpeg

    Хорошо, мы знаем, что при сжатии на 60% наше изображение было повреждено достаточно сильно. Как же теперь выбрать оптимальное сжатие, которое и не очень повредит, и сделает размер файла небольшого размера? В Photoshop существует шкала сжатия от 0 до 12, где последнее – наилучшее качество. И если логичным было бы от 0 до 10, где 10 соответствовало бы 100%, то у Adobe все совершенно иначе.

    Если после многих сравнений посмотреть на таблицу, то становится видно, что некоторые параметры шкалы попросту не имеют смысла. Сравните 80%, 77% и 84%. По факту, это соответствует 10 и 11 по шкале Adobe. Но на деле ничего не меняется. Если вы сравните результат сжатия 11 и 9, то разница будет очевидна. Аналогично отсутствует видимая разница в качестве сжатия между 12 и 11.
    Мы сохранили наше изображение со сжатием в 11 и провели анализ мусора. Как видите, его… нет, даже на гистограмме Уровней.


    А вот результат сжатия 10 дает более утолщенную линию на Гистограмме Уровней, хотя кажется, что черный цвет полностью однороден.

    Из чего следует, что иногда смело можно сжимать на много единиц сразу и тогда уже начинать сравнение и смотреть, проявились ли «артефакты» или нет.

    Сохранение для Web

    В новейших версиях Photoshop до сих пор осталась функция Сохранения для Web, хотя она и получила приписку «Старая версия». Она прячется в Экспортировании. Здесь сжатие происходит по другому алгоритму. Да, это еще один вариант. В данном случае уже можно увидеть процентное сжатие от 0 до 100, множественные дополнительные настройки, а размер файла при этом может очень уменьшаться без потери качества.



    Дело в том, что Adobe решили намеренно создать алгоритм, идеально подходящий для интернета, в отличие от иных методов. Мы сохранили наше изображение при максимальных настройках сжатия (100%), получили в разы уменьшенный размер файла, но и искажений нет ни при режиме смешивания, ни на гистограмме Уровней.
    И еще вариант.

    Завершение

    Для многих фотографий даже 77% (10 по шкале) бывает очень малым сжатием, что создает и большой файл, но и при малом искажении. Если же выбрать хотя бы 9, то можно увидеть и малое искажение оригинала, и небольшой размер файла, что уже более приемлемо для большинства случаев. Бывают варианты изображений, когда получается и на 62% – 54% сделать отличный вариант, который и распечатать не стыдно.
    Иными совами, конкретно выбор уровня, метода и параметров сжатия в формат jpeg зависят от самого оригинала. Но так или иначе, все это может очень пригодиться в веб-дизайне, особенно, если изображений много, а уменьшенные варианты нужно размещать на сайте и сервере и для экономии, и для ускорения загрузки, и так далее. Чтобы выиграть сражение с пытливыми пользователями и заказчиками, никогда не будет лишним удостовериться, что вы не просто сжали изображения, но еще и почти максимально сохранили их качество, не перенасытили мусором и шумом, размытием по краям и так далее.
    А это, в свою очередь, положительно скажется не только на веб-проекте в целом, но и на отношении к веб-дизайнеру, на его профессиональном уровне.

  7. Uhanovaelena0@gmail.com Ответить

    Эффекты
    ФотоМАСТЕР очень хорош еще и тем, что кроме кадрирования и изменения ширины/высоты изображения, можно существенно улучшить его цветопередачу, добавить интересных эффектов, чтобы фото заиграло новыми красками.
    Все эффекты собраны в разделе “Эффекты”: достаточно в меню справа выбрать один из вариантов, как он тут же будет применен к фото. В превью вы увидите, как изменится фото: удобно в том плане, что можно сразу же заценить подойдет ли такой эффект, еще до сохранения.
    Кроме этого, рекомендую использовать вкладку “Улучшения”, в ней также есть множество полезных фишек…
    Выбор эффектов
    Например, после 20-30 сек. экспериментов с фото, удалось существенно улучшить его яркость и цветопередачу. Обратите внимание на скрин ниже: что было “до” и что стало с фото “после” применения эффектов. Разница, на мой взгляд, на лицо!
    До применения эффектов и после
    Итоги:
    ФотоМАСТЕР – очень простой и эффективный инструмент (с ним быстро разберутся даже те люди, которые только-только начали знакомится с ПК);
    размер файла можно уменьшить в десятки раз!
    в программе есть инструменты для улучшения фото: можно прибавить яркость, улучшить фон, добавить надписи, да и вообще – оживить фото, чтобы оно заиграло новыми красками!

    Photoshop

    Официальный сайт: https://www.adobe.com/ru/products/photoshop.html
    Photoshop (лого программы)
    Профессиональный и один из самых мощных графических редакторов. Позволяет выполнить практически “любые” редактирования и манипуляции с фото/картинками.
    Правда, стоит отметить, что работа с этой программой достаточно “сложна” (особенно для начинающих). Даже выполнение каких-то простых функций – требуется некоторая сноровка. Ниже я рассмотрю несколько инструментов в Photoshop для решения нашей текущей задачи (т.е. снижения веса JPG).
    Изменение ширины, высоты картинки
    И так, для изменения разрешения картинки в Photoshop выберите инструмент “Image / Image Size” (можно просто нажать сочетание клавиш Alt+Ctrl+I).
    Image Size – изменить размер файла
    Далее указываете желаемые размеры в пикселях (кстати, можно задать и в сантиметрах или дюймах) и нажимаете OK.
    Width, Height – ширина, высота
    Подрезка краев
    Обратите внимание на инструменты, представленные слева на боковой панельке. Выберите значок обрезки . Далее вы сможете передвинуть рамочку с любого края картинки (после нажатия на клавишу Enter – картинка будет обрезана). Пример представлен ниже.
    Подрезка краев
    По поводу сохранения
    В Photoshop есть несколько вариантов сохранения картинки. Рекомендую обратить внимание на вариант “Save for Web” (сохранить для сети).
    Сохраняем картинку для размещения в сети
    Далее с помощью бокового меню вы можете настраивать параметры, напрямую влияющие на степень сжатия картинки (можете выбрать качество в процентах, кол-во цветов и пр.). Кстати, в превью вы сразу можете оценить степень сжатия и размер получаемого файла (см. скрин ниже).

  8. VideoAnswer Ответить

Добавить комментарий для VideoAnswer Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *