Оптимизация PNG и JPEG без потери качества. Часть 1
Введение
И так, как же происходит оптимизация? Давайте разберемся по порядку, в основном это происходит из-за нескольких причин, и сейчас мы их рассмотрим.
Non-interlaced или Interlaced
ColorType и BitDepth
PNG RGB + alpha — 17 853 байт
PNG Palette — 13 446 байт
Разница в размере — 4407 байт (24%), при этом визуально картинки не изменились. Если Вы видите разные изображение, то это оптический обман.
PNG 4-bit — 6 253 байт
PNG 8-bit — 5 921 байт
Разница в размере — 332 байт (5,3%), при этом визуально картинки не изменились. Если Вы видите разные изображение, то это оптический обман.
Обе технологии поддерживают почти все редакторы изображений, которые умеют сохранять в PNG, но об этом знают мало людей, и по этому разработчикам программ-оптимизаторов PNG приходится об этом заботиться.
Chunks
Если кто в танке не в курсе, PNG состоит из Chunks. Писать, что это такое Chunks не буду, можете сами прочитать. Лучше я покажу, для этого есть программа — TweakPNG, возьмите любое изображение формата PNG и откройте через данную программу и увидите всю структуру PNG.
Есть еще программы наподобие TweakPNG, но она лучшая и удобная. Об остальных программах расскажу в заключении.
Оптимизация палитры
Может быть реализована только в PNG Palette, технология основана на оптимизации chunks PLTE, может уменьшить размер изображения, хотя и не намного. На мой взгляд лучше все это технология реализована в Color Quantizer, один из его алгоритмов был реализован и в TruePNG.
Оптимизация альфа-канала
Оригинальное изображение. Размер — 214 903 байт.
Алгоритм сжатия Deflate + Фильтрация строк
Как мы же говорили, PNG состоит из Chunks, в данном случае, нас интересует Chunks — IDAT. Для его сжатия в основном играют два фактора, фильтрация строк и алгоритм сжатия Deflate. Давайте об этом поговорим поподробнее.
Фильтрация строк
Алгоритм сжатия Deflate
На сегодняшний день есть несколько библиотек, основанных на алгоритме сжатия Deflate:
| Библиотека Deflate | Скорость работы | Степень сжатия | Программы | Примечание |
| Zlib | Высокая | Низкая | TruePNG OptiPNG PNGWolf | Благодаря высокой скорости работы может быстро перебрать большое количество значение параметров и выбрать оптимальные. |
| 7-zip | Средняя | Средняя | AdfDef PNGWolf | Не всегда выбранные значения параметров в Zlib являются для них оптимальными (близки к оптимальным). Перебор значений параметров будет занимать большое количество времени и почти всегда затраченное время не оправдывает полученный результат. |
| Kzip | Низкая | Высокая | PNGOut |
PNGWolf использет одновременно и Zlib, и 7-zip.
Важно: все эти программы дополняют друг друга, и они сильны, когда едины. Это самое большая проблема, когда их используют отдельно, а потом сравнивают полученные результаты. В первую очередь надо использовать Zlib, а потом уже 7-zip и/или Kzip.
В следующей части мы поговорим об этих программах поподробнее, а также построим три алгоритма оптимизации PNG (с учетом оптимизации альфа-канала) по степени сжатия и затраченного времени. Ниже приведен условный график зависимости степени сжатия от затраченного времени на оптимизацию Chunks IDAT.
Как видно из графика, чем больше степень сжатия, тем больше времени требуется.
И еще немного.
Итак мы переходим к JPEG, здесь все гораздо проще, и так продолжим. Но перед этим скажу, что JPEG нельзя пересохранить не потеряв качество, даже со степенью качеством 100 (это не максимальное качество, а математический предел оптимизации). Рассмотрим следующий пример (чтобы было честно, изображения были оптимизированы по одному и тому же алгоритму).
Оригинальное изображение — 52 917 байт.
Новое изображение (сохранен через Adobe Photoshop CS5, Save for Web 100) — 53 767 байт
Строим diff-разницу изображений.
Вот так вот сильно изменилась картинки, да, визуально ничего не заметно. Как видно размер картинки увеличился. Это из-за специфики библиотеки, которая создает JPEG, о библиотеках поговорим чуть позже.
Есть только одна программа, которая позволяет пересохранить изображения в JPEG не потеряв качество — BetterJPEG (есть плагин к Adobe Photoshop). Если не ошибаюсь, для жителей стран СНГ для некоммерческого использования программа бесплатная. Лично я использую BetterJPEG, когда нет исходника и требуется незначительное редактирование изображения. Рассмотрим пример работы BetterJPEG.
Оригинальное изображение. 
Новое изображение (усложняем ситуацию, добавляем надпись «HTML»). 
Строим diff-разницу изображений.
Markers
JPEG в отличие от PNG состоит из маркеров. Рекомендую прочитать статью «Структура файла, маркеры», также рекомендую вообще посмотреть сам сайт. Самая мощная программа по изучению структуры JPEG — JPEGsnoop. Есть еще программы, но о них расскажу в заключении. Для изучения структуры JPEG рекомендую следующее изображение — PhotoME.
Удаления некоторых маркеров (APP0-APP15, COM), может существенно уменьшить размер изображения. Мне больше всего для этого нравится программа — Jhead, наиболее простая и удобная.
Progressive и Optimized
Библиотека создания JPEG
Сказать какая из двух библиотек оптимизирует лучше, вопрос очень сложный и не однозначный, но из-за очень высокой скорости работы JPEGTran, Вы просто не замечаете его работу, только не забывайте проверять размер изображения, увеличился или нет, Все это можно сделать и через bat. Помните, JPEGTran может переводить JPEG из Progressive в Optimized и наоборот, не изменяя саму картинку.
Заключение
Это конечно все причины, но наиболее существенные. Почти со всеми авторами приведенных программа я общался, и все они очень талантливые люди. Хотел отдельно поблагодарить x128 за огромную помощь в изучении оптимизации изображений.
Video rip. Часть 2-1. Что такое interlace и с чем его едят
Содержание
В этой статье мы узнаем что такое interlace, deinterlace, telecine, pulldown, ivtc и как всё это вместе нам усложняет жизнь.
Все видео-сигналы можно разделить на две категории: interlaced и progressive.
Interlace, по нашему чересстрочная развёртка, как метод, была придумана Львом Сергеевичем Терменом в 1927 году. Суть её заключается в том, что ТВ кадр состоит из нескольких сотен строк. Строки отображаются на экране не одна за другой, а через одну, таким образом разделяя кадр на два полукадра. Таким образом изображение на телевизоре обновляется со скоростью 50 (PAL) или 60 (NTSC) полукадров в секунду. Поле, которое начинается с нечётной строки называется нечётным или верхним, соответственно, другое, чётным или нижним. Благодаря этому методу мы получаем на экране телевизора изображение хорошего качества без увеличения полосы пропускания (а также проблемы при рипе).
Progressive это видео без чересстрочности. Его мы обсуждать не будем потому, что никаких необходимых преобразований над ним проводить не требуется.
Избавление от чересстрочности называют deinterlace. Делать это надо потому, что на экране компьютера, например, видео с чересстрочностью будет восприниматься как видео с помехами, с такой неприятной взгляду «гребёнкой».
Существует два фактора которые могут нам помешать от неё избавиться.
Во первых, если видео записывается камерой сразу в PAL или NTSC стандартах вещания, то два полукадра идущие друг за другом вместе не представляют собой один кадр. Промежуток между двумя полукадрами составляет 1/50 (PAL) или 1/60(NTSC) секунды. Это означает, что просто так их нам не соединить.
Во вторых, нам будет мешать процедура telecine. Она применяется для преобразования из 24 FPS (стандартное количество кадров в секунду для фильмов снятых на плёнке) в PAL или NTSC. Telecine состоит из двух слов television и cinema. Вообще говоря обычно под telecine подразумевают дублирование некоторых кадров или т.н. pulldown.
Итоги
Видео бывает изначально чересстрочное и подвергнутое telecine. Также стоит помнить, что помимо описанных методов telecine встречаются разные другие, встречаются битые файлы и вообще много чего встречается. В таких случаях сложно дать однозначный совет, надо применять смекалку. Я надеюсь что все те приёмы и инструменты, о которых пойдёт речь в дальнейшем, вам в этом помогут.
Оптимизация изображений в Adobe Illustrator
На этой странице будет описан процесс оптимизации графики для интернета в Adobe Illustrator. Оптимизация — это процесс, при котором из файла удаляется определенная информация и за счет этого происходит существенное уменьшение размера файла. В web-дизайне используются три формата оптимизированной пиксельной графики — JPEG, GIF и PNG. Какой использовать? Естественно тот, в котором файл займет меньший размер при одинаковом визуальном качестве. Считается, что для полноцветных и фотореалистичных изображений следует применять JPEG, а для простых, особенно с большими площадями однотонных заливок лучше применять GIF. Неплохо они сжимаются и форматом PNG-8. Эти особенности объясняются различными принципами оптимизации в разных форматах.
Формат GIF (Graphics Interchange Format) позволяет сохранить изображение с использованием палитры индексированных цветов — до 256. Другими словами, GIF использует оптимизацию за счет уменьшения количества цветов — любое изображение он представит в цветах, выбранных из 16 миллионов, но количество которых может быть от 2 до 256. Естественно, не каждое изображение можно безболезненно «втиснуть» в 256 цветов. Отсюда вывод — использовать формат для немногоцветных картинок с резкими границами между цветами. Формат GIF поддерживает прозрачность и использует сжатие без потери информации.
Формат JPEG (Joint Photographic Experts Group) пригоден для сохранения полноцветных изображений с цветовой глубиной 24bpp (TrueColor) и использует сжатие с потерей информации. Прозрачность этим форматом не поддерживается и при сильной степени сжатия появляется различные артефакты (искажения, посторонние пятна и т.д.).
PNG (Portable Network Graphics) — самый новый из форматов, спроектирован для замены устаревшего и более простого формата GIF. Существует 2 вида формата. PNG-8 — 8-битный, использующий индексированные цвета и поддерживающий градиентную прозрачность. Использует сжатие без потерь. PNG-24 — 24-битный, используется для хранений полноцветных изображений. Степень сжатия PNG24 меньше, чем у JPEG, но он использует алгоритм сжатия без потерь.
В Adobe Illustrator окно оптимизации Save for Web & Devices вызывается комбинацией клавиш (Alt+Ctrl+Shift+S) либо в меню File > Save for Web & Devices. С правой стороны окна расположена панель с настройками, которая в зависимости от выбранного формата принимает разный вид. На рисунке показано, как будет выглядеть панель при выборе GIF.
Optimized file format (выбор формата)
Color reduction algorithm (алгоритм сокращения цветов)
Dithering algorithm (алгоритм имитации)
Interlaced (черезстрочная развертка)
Color reduction algorithm — алгоритм сокращения цветов (по-другому называется выбором палитры) определяет, как Illustrator сделает из полноцветного изображения индексированное. Из всех вариантов нас интересуют следующие:
Perceptual (палитра на восприятие) — вид адаптивной палитры с учетом чувствительности и восприятия человеческого глаза;
Selective (выборочная палитра) — с предпочтением цветов web-безопасной палитры (принята по умолчанию, довольно близко сохраняет исходные цвета);
Adaptive (адаптивная палитра) — создаст цветовую таблицу из цветов, наиболее часто встречающихся в исходном изображении. Одна из наиболее важных палитр;
Restrictive (Web-палитра) — преобразует изображение в стандартную таблицу из 216 web-безопасных цветов.
Custom (заказная) — сформировывает палитру из выбранных пользователем цветов.
Dithering algorithm — алгоритм перемешивания пикселей (еще называют дизеринг, рассеивание, имитация) позволит выбрать способ имитации дополнительных цветов путем перемешивания существующих пикселей. Варианты выбора: No dither — без перемешивания, Diffusion — диффузный алгоритм, Pattern — алгоритм на основе заданного образца и Noise — алгоритм на основе шума. При оптимизации всегда стоит попробовать все варианты. Включение этой опции приводит к увеличению размера файла, но это стоит того. Связанный со списком движок Dither регулирует интенсивность перемешивания.
Transparency (прозрачность) — включение прозрачности, рассматривается тут.
Interlaced — черезстрочная развертка. Обеспечит постепенное улучшение (прорисовку) изображения в процессе загрузки.
Оптимизация формата PNG-8 ничем не отличается от GIF ( в Optimized file format выбираем PNG8 ). Как уже говорилось, PNG8 следует использовать для хранения изображений больших размеров — именно в этом случае будет преимущество перед JPEG и GIF.
Перейдем к формату JPEG.
 |
Здесь все несколько проще. Compression quality (качество сжатия) — выпадающий список с шаблонными значениями качества изображения:
Low — низкое (максимальный уровень компрессии)
Medium — среднее (средний уровень компрессии)
High — высокое (небольшой уровень компрессии)
Maximum — максимальное (минимальный уровень компрессии).
В соответствии с выбором будет меняться значение поля Quality от 0 (самое низкое) до 100 (самое высокое). Более плавно качество можно настроить непосредственно в самом поле, либо в появляющемся под ним движке. В поле Blur (размытие) устанавливается степень размытия картинки, при небольших значениях размытие скроет мелкие дефекты сжатия. Включение флажка Progressive позволит сделать загрузку картинки более удобной для восприятия — изображение будет отображаться еще до полной загрузки. При этом увеличится размер файла.
Остается добавить, что из выпадающего меню Preset можно выбрать готовые предустановки для каждого формата. Нажатие клавиши Alt приведет к очередному изменению кнопок меню (на рисунке). Reset приведет к сбросу всех настроек, а Remember — к запоминанию.
С левой верхней стороны расположены четыре вкладки, облегчающие процесс оптимизации.
Вкладка Original позволит, как ясно из названия, просмотреть оригинал изображения, Optimized — оптимизированный вариант. А вкладки 2-Up и 4-Up — двух и четырехблочный варианты просмотра соответственно, где будет и оригинал, и оптимизированные варианты. Причем для каждого варианта можно применять различные настройки.
Ссылка на статью при перепечатке обязательна.
Главное — скорость. Новый графический формат QOI в 20−50 раз быстрее PNG
Современные форматы кодирования изображений — это настоящая магия, в которой не разобраться без нескольких лет погружения в специфические алгоритмы. Даже опенсорсные форматы содержат настоящее спагетти навороченных и хитроумных методов типа алгоритма Хаффмана и дискретно-косинусного преобразования — результат нескольких десятилетий развития компьютерной науки.
Поскольку польский разработчик Доминик Шаблевски вообще не разбирается в кодировании изображений, то он написал примитивный метод сжатия изображений без потери качества всего в 300 строчек кода, на базовой математике. Результат его очень удивил.
Оказалось, что этот простой метод по скорости на порядок превосходит популярные кодеки libpng и stbi.
Доминик Шаблевски назвал формат Quite OK (Quite OK Image), то есть «вполне достаточное» качество и размер. Другими словами, он конкретно заточен именно на скорость. Во многих случаях — при пакетной обработке большого количества файлов, в автоматических конвейерах — скорость является ключевым фактором.
Автор считает свой алгоритм до глупости простым. Он берёт изображения RGB и RGBA — и кодирует их в формат QOI размером с обычный PNG, но гораздо быстрее. Всё в один поток, без SIMD.
В своём блоге Доминик описывает нехитрую технику сжатия. Изображение кодируется в один проход, каждый пиксель считывается только один раз и кодируется одним из четырёх методов, по порядку:
Для сравнения, ниже результаты сжатия скриншотов нескольких сайтов. Использовались библиотеки libpng, stbi и qoi. Указан размер каждого скриншота, время кодирования, время декодирования, скорость кодирования/декодирования в мегапикселях в секунду и размеры итоговых файлов. Тесты проводились на процессоре Intel i7-6700K.
Как видим, размер итоговых файлов QOI обычно между libpng и stbi, а скорость намного выше. Разница в сжатии составляет 20−50 раз, в декомпрессии — 3−4 раза.
В среднем по всем скриншотам:
Результаты остальных бенчмарков см. здесь. Набор тестовых изображений для проверки: images.tar,
Разумеется, QOI можно рекомендовать только для внутреннего использования во внутренних конвейерах обработки изображений, потому что никакие браузеры, да и вообще никто его ещё не поддерживает. Но он отлично подходит для внутреннего хранения картинок без потери качества, если главным фактором является скорость.
Доминик Шаблевски считает, что разработчики форматов сжатия в основном думают об уровне сжатия, размере файлов. Мало кто ставит на первое место именно скорость и простоту кодека. Поэтому в сообществе есть некоторая потребность в суперпростом и быстром кодеке. Может, он кому-то пригодится.
Теоретически, кодек можно приспособить для супербыстрого сжатия видео (без потерь) на примитивных микросхемах.
Interlaced PNG и векторы
beam green colorful interlaced
interlaced lace cartoon illustration lace illustration lace dress
розовые цветы переплетаются с модой женский день 8 символьные визуальные элементы
деревья в лесу плотные и переплетены
Переплетенная геометрическая золотая рамка с растениями
Переплетенная бизнес геометрическая граница
Синяя чересщенная бизнес геометрическая граница
Переплетенная золотая проволочная водная каркасная граница
Торжественное открытие чересстрочной золотой стиль
переплетенные листья растений
Разноцветная абстрактная геометрическая граница с чересстрочной разверткой
Затенение градиентных чересстрочных линий
несколько желтых листьев переплетены
branches trees interlaced branch
yellow dot e commerce geometry
interlaced sawtooth cartoon illustration chart illustration intro chart
переплетение черный колючий
Красный фон переплетенных геометрических линий
Переплетенная геометрическая граница бизнеса
hand painted clouds 3d clouds vertical stripes
black creative polygon data
Три коричневых вафельных печенья с переплетением
green leaves leaves fallen leaves spring
black creative texture flattening
пурпурные цветы пересекли весной
Переплетенная цветная линия абстрактный бизнес граница
Золотые световые звезды звезды двойной рисунков диаграммы неправильной круглой границы
Коричневые чересстрочные корни деревьев картинки
Трехмерная чересстрочная квадратная граница геометрической формы
абстрактный светокопировальный эффект
Коричневые чересстрочные корни деревьев картинки
Розовый ламинированный чересстрочный эффект света
Скотч стикер цвет чересстрочный узор линии
Кофе цвет чересстрочные корни деревьев картинки
Переплетенная линия градации стека Абстрактная 3d волна
Цветы и листья лоскутное одеяло цветы Роза Переплетение ветвей и листьев
Черно белые чередующиеся звезды каракули картинки
Переплетенные золотые ребра толстая молочная вода цветная граница
маленькие прозрачные цветы и листья переплетение украшения векторная иллюстрация
Медицинский стетоскоп Чересстрочный стетоскоп Ручной обращается стетоскоп Мультфильм стетоскоп
cambodian khmer Новый год переплетенный цветной флаг треугольника
Переплетенное выравнивание точечное золото порошок света
женский день цветы переплетенные мода 8 персонажей визуальные элементы
Череспущенные ношения частицы золотой порошок светового эффекта границы
флэш планета темное создание светло пурпурный градиент благородный флэш блок чересстрочная вспышка планета темное создание
цветы переплетаются мода женский день 8 символьные визуальные элементы
2021 стиль чересстрочного текста
2019 пересекающихся стиль текста эффект
цветы пересекли моды
Международный женский день цветы переплетены
РОЖДЕСТВО БОЛЬШАЯ ПРОДАЖА! Последний день-срок службы скидка до 85%!
Pngtree предлагает более 54 interlaced png и векторных изображений а также прозрачные фоновые interlaced картинки и psd файлы. Загрузите бесплатные графические ресурсы в виде png eps ai или psd.
Присоединяйтесь к команде проектантов pngtree
Загрузите свой первый дизайн, защищенный авторским правом. Получите дизайнерские купоны на 5 долларов
