что такое дизеринг gif
Как уменьшить объём файла анимации GIF в Photoshop
Продолжение советов по оптимизации и уменьшению объёма анимированного файла GIF, начало смотрите здесь.
1. Подбор оптимальной модели редукции цвета
Справка: Безопасные веб-цвета рекомендуются для экранного дизайна. Они всегда неизменны при переходе от одного браузера к другому, от одного монитора к другому, или от одной платформы к другой, с их различными разрешениями и возможностями цветопередачи.
Если ваше изображение имеет меньше, чем 216 цветов, неиспользуемые цвета удаляются из таблицы.
Ели говорить откровенно, то я всегда подбираю эти модели методом научного тыка.
2. Замена цветов анимации на Web-цвета
Выше мы рассмотрели модели редукции цвета, последней из которых является «Селективная», меняющая ве цвета изображения на Web-безопасные. Это уменьшает объём файла, но и почти всегда ухудшает качество изображения.
Чем больше значение процентов, тем меньше размер выходного файла, но и хуже качество. Вё зависит от исходных цветов, а, самое главное, переходов между цветами и светами изображения. Так что опять-таки, значение опции определяется эмпирически, в зависимости от каждого конкретного изображения.
3. Дизеринг (сглаживание, Dithering)
Рассмотрим алгоритмы подробнее (надеюсь, с режимом «Без дизеринга» всё понятно).
Используя алгоритм «Случайное» (Diffusion), мы, можем регулировать количество сглаживания.
В алгоритмах «Регулярный» (Pattern) и «Шум» (Noise) настройки отсутствуют, Photoshop всё делает автоматически.
Для некоторых изображений «Дизеринг» просто необходим, но следует помнить, что чем больше его значение, тем больше размер файла, т.к. он добавляет разноцветные пиксели в непосредственной близости друг от друга, для имитации вторичных цветов или гладких цветовых градаций.
4. Другие настройки
5. Сравнение исходной и оптимизированной версий
После того, как Вы добавили свои настройки в диалоговое окно сохранения для Web, с оптимизированной версией произошли изменения, и, почти всегда, в сторону ухудшения качества. Тщательно проверьте полученный результат, сравните его с исходником:
6. Подогнать оптимизацию анимации под указанный объём файла
Такая опция тоже имеется при сохранении анимации в Photoshop. Вы можете задать размер выходного файла, и исходя из этого Photoshop сам произведёт оптимизацию, подогнав размер файла под указанный Вами.
Нажимаем на кнопку в правом верхнем углу и выбираем строку «Оптимизировать по размеру файла» (Optimize to File Size)
7. Предварительный просмотр анимации в браузере, сохранение параметров оптимизации
После того, как Вы подобрали нужные настройки, сохраните их в наборе. Кликните по значку в правом верхнем углу окна сохранения для Web и нажмите на строку «Сохранить настройки»:
Анимацию с нашими настройками мы можем предварительно просмотреть в браузере, нажав на кнопку в левом нижнем углу окна:
Если всё нравится, то сохраняем файл. Для этого нажимаем кнопку «Сохранить» в правом нижнем углу диалогового окна. Открывается новое окно, где выбираем путь, ставим настройки, как показано на рисунке (это настройки по умолчанию), нажимаем кнопку «Сохранить»:
Анимация будет сохранена. Если сё-таки что-то не понравится, то можно будет произвести оптимизацию заново, используя сохранённый набор настроек.
Параметры оптимизации для изображений и анимированных файлов GIF
В этом разделе рассматриваются различные параметры экспорта изображений и анимированных файлов GIF.
Форматы веб-графики могут быть битовыми (растровыми) или векторными. К битовым форматам относятся GIF, JPEG и PNG, которые зависят от разрешения, то есть от размеров растрового изображения. Использование различных разрешений экрана монитора может привести к изменению качества. К векторным форматам относятся SVG и SWF, которые не зависят от разрешения и поддерживают масштабирование без потери качества изображения. Векторные форматы могут также содержать растровые данные.
Формат JPEG является стандартом сжатия нерастрированных изображений, например фотографий. Оптимизация изображения в формате JPEG основана на сжатии с потерями вследствие выборочного удаления данных.
Определяет уровень сжатия. Чем выше значение параметра «Качество», тем больший уровень детализации сохраняется при сжатии. Однако чем выше значение параметра «Качество», тем больше размер файла. Чтобы определить наилучшее соотношение качества и размера файла, рекомендуется просмотреть оптимизированное изображение с различными настройками качества.
Создается улучшенный файл JPEG с незначительно меньшим размером файла. Формат «Оптимизированный JPEG» рекомендуется для максимального сжатия. Однако некоторые браузеры старых версий могут не поддерживать эту функцию.
Изображение в веб-браузере отображается прогрессивно. Изображение выводится как последовательность наложений, что позволяет отобразить изображение с низким разрешением до полной его загрузки. Для параметра «Прогрессивный» необходимо использование формата Оптимизированный JPEG.
Отображение формата «Прогрессивный JPEG» требует большего объема оперативной памяти, этот формат поддерживается не всеми браузерами.
Задает степень размытия изображения. При выборе этого параметра создается эффект, аналогичный фильтру «Размытие по Гауссу», и обеспечивается дополнительное сжатие, что уменьшает размер файла. Рекомендуется использовать значение от 0,1 до 0,5.
Встроенный профиль (Photoshop) или ICC-профиль (Illustrator)
Сохраняет цветовые профили в оптимизированном файле. В некоторых браузерах для цветокоррекции применяются цветовые профили.
Задается цвет заливки для пикселей, которые в исходном изображении были прозрачными. Чтобы выбрать цвет в палитре цветов, щелкните «Образец цвета подложки» или укажите параметр в меню «Подложка»: «Цвет пипетки» (для использования цвета в поле образцов пипетки), «Основной цвет», «Цвет фона», «Белый», «Черный» или «Другой» (для использования палитры цветов).
Полностью прозрачные пиксели исходного изображения заполняются выделенным цветом. Частично прозрачные пиксели исходного изображения смешиваются с выбранным цветом.
Параметры оптимизации для форматов GIF и PNG‑8
Формат GIF является стандартом сжатия для изображений с цветами смесевых красок и четкой детализацией, например, для штриховых рисунков, логотипов или иллюстраций с текстом. Аналогично GIF, формат PNG‑8 эффективно сжимает сплошные области цвета с сохранением четкости деталей.
Файлы PNG‑8 и GIF поддерживают 8-разрядную глубину цвета, то есть до 256 цветов. Процесс определения используемых цветов называется индексированием, поэтому изображения в форматах GIF и PNG‑8 иногда называют изображениями индексированных цветов. Чтобы преобразовать изображение в индексированные цвета, для хранения и индексации цветов в изображении используется таблица цветов изображения. Если в таблице цветов исходного изображения отсутствует нужный цвет, то приложение подбирает ближайший цвет из таблицы или имитирует цвет с помощью сочетания доступных цветов.
Кроме приведенных ниже параметров, можно задать количество цветов в таблице цветов изображения. См. Настройка таблицы цветов для изображений GIF и PNG‑8.
Уменьшение размера файла путем выборочного удаления данных. Чем выше значение параметра «Потери», тем больший объем данных удаляется. Обычно сохранить качество изображения позволяет установка для параметра «Потери» значения в диапазоне от 5 до 10, иногда до 50. Изменение значения параметра «Потери» может привести к уменьшению размеры файла на 5 — 40%.
Параметр «Потери» нельзя использовать одновременно с параметром «Чересстрочно», алгоритмами «Дизеринг шума» или «Регулярный дизеринг».
Цвета и метод редукции цвета
Определяет метод создания таблицы цветов изображения и необходимое количество цветов в таблице. Доступны следующие методы редукции цвета.
Перцепционная Создает пользовательскую таблицу цветов, отдавая предпочтение цветам, к которым человеческий глаз наиболее чувствителен.
Селективная Создает таблицу цветов, аналогичную таблице «Перцепционная», но отдавая предпочтение областям большого размера и сохранению веб-цветов. Обычно при использовании этой таблицы получаются изображения с наибольшей достоверностью цветов. Значение «Селективная» задано по умолчанию.
Адаптивная Создает таблицу путем выборки цветов из преобладающего спектра в изображении. Например, для изображения, в котором есть только зеленый и синий цвета, таблица цветов будет состоять в основном из оттенков синего и зеленого. В большинстве изображений цвета сосредоточены в определенных областях спектра.
Ограниченная (Web) Используется стандартная таблица из 216 цветов, применяемая в Windows и Mac OS в палитрах с 8-разрядной глубиной цвета (256 цветов). При выборе этого параметра дизеринг в браузере не применяется при отображении с 8-разрядной глубиной цвета (такая палитра также называется «безопасной палитрой Web»). Использование палитры Web может приводить к увеличению размера файла, и рекомендуется только в тех случаях, когда крайне важно исключить дизеринг в браузере.
Заказная Применяется палитра цветов, созданная или измененная пользователем. При открытии существующего файла GIF или PNG‑8 в нем будет пользовательская палитра цветов.
Таблица цветов изображения настраивается с помощью палитры Таблица цветов в диалоговом окне «Сохранить для Web и устройств».
«Черно-белый», «Оттенки серого», Mac OS, Windows Используется заданная палитра цветов.
Определяет метод и степень дизеринга. Дизеринг позволяет имитировать цвета, которые отсутствуют в системе цветного изображения компьютера. Более высокий процент дизеринга позволяет передавать больше цветов и деталей, но также приводит к увеличению размера файла. Для оптимального сжатия рекомендуется использовать наименьший процент дизеринга, обеспечивающий необходимую детализацию цвета. К изображениям, состоящим преимущественно из сплошных тонов, дизеринг можно не применять. В изображениях с непрерывными оттенками (особенно градиентами) дизеринг может быть нужен для того, чтобы избежать полошения цветов.
Доступны следующие методы дизеринга.
Диффузия Применяется случайный узор, менее заметный, чем в режиме «Регулярный дизеринг». Эффекты дизеринга распространяются на смежные пиксели.
Узор Для имитации цветов, отсутствующих в таблице цветов, применяется квадратный узор наподобие полутонового.
Шум Применяется случайный узор, подобный методу дизеринга «Случайный», но без распространения на смежные пиксели. При использовании метода дизеринга «Шум» швы не возникают.
«Прозрачность» и «Подложка»
Определяет способ оптимизации прозрачных пикселей в изображении.
Чтобы сделать полностью прозрачные пиксели прозрачными и смешать частично прозрачные пиксели с цветом, выберите «Прозрачность» и укажите цвет подложки.
Чтобы заполнить полностью прозрачные пиксели цветом и наложить их на частично прозрачные пиксели того же цвета, выберите цвет подложки и отмените выбор параметра «Прозрачность».
Для выбора цвета подложки щелкните стрелку рядом с образцом цвета «Подложка» и выберите требуемый цвет в палитре цветов. Второй способ: выберите параметр в меню «Подложка»: Цвет пипетки (для использования цвета в поле образцов пипетки), Основной цвет, Цвет фона, «Белый», «Черный» или «Другой» (для использования палитры цветов).
Параметры «Основной цвет» и «Цвет фона» доступны только в Photoshop.
Что такое дизеринг в обработке изображений?
Узнайте, как это относится к градиентам цвета
Независимо от того, являетесь ли вы веб-дизайнером, художником-графиком или даже электронным музыкантом, сглаживание играет жизненно важную роль в творческом процессе. Дизеринг при обработке изображений – это метод, используемый для имитации цветов или затенения. Основной концепцией дизеринга является добавление шума или дополнительных пикселей в цифровой файл. В графике сглаживание добавляет случайные структуры пикселей для улучшения качества изображения, избегая полосатости.
История дизеринга
В основном забытое, одно из самых ранних применений дизеринга было во Второй мировой войне для траекторий бомбардировок и навигации. Это использование сильно отличается от размывания, как мы его знаем сегодня. Широко использовавшийся в печатном прессе как для газет, так и для комиксов, с появлением Всемирной паутины возникло сглаживание. Мы знаем, что до того, как интернет стал блестящим глазным леденцом, почти все сайты были текстовыми. Скорость набора номера в режиме улитки позволяла загружать графику только на ужасно медленных скоростях. Однако, когда вычисления расширились до 8-битного цвета с мониторами, графика и сглаживание вышли на передний план для Интернета.
Как использовался дизеринг в прошлом
При более раннем использовании в газетах, комиксах и других печатных СМИ к изображениям применялось сглаживание для создания уровней имитации серой шкалы путем стратегического размещения черных точек. Использование процесса сглаживания даст гладкое изображение с серыми оттенками, даже если печатные машины поддерживают только черные чернила. Комиксы и другая цветная печать работали аналогично, но имитировали больше оттенков цвета, чем печатные машины с ограниченной палитрой. Ниже приведен пример того, как печатные машины обрабатывают высококачественные изображения в размытое изображение. Обратите внимание, что вы по-прежнему можете видеть различные цвета и тени, но изображение гораздо более пиксельное.
В последнее время дизеринг стал популярным в веб-графике. Несмотря на то, что большая часть населения имеет доступ к высокоскоростному Интернету, все еще остается скромный процент пользователей Интернета, которые зависят от коммутируемого доступа. Использование сглаживания в обработке изображений не только уменьшает полосу цветов и затенение, что создает более гладкое законченное изображение, но также уменьшает размер файла. Первое изображение является полосатым изображением. Вы можете ясно видеть переходы в цвете.
Второе изображение представляет собой плавный градиент, в котором применено сглаживание. Полоски больше не видны и создают более плавное изображение.
Одним из ключевых применений для сглаживания было предотвращение появления полос любого цвета или градиента оттенка. Смешивая оттенки из ограниченной палитры для имитации исходного цвета, вы уменьшаете файл, создавая файл, который может быстрее загружаться на ваш экран и \ или компьютер. GIF-файлы являются отличным примером сглаживания изображений. Меньшие файлы требуют меньшей пропускной способности, что обеспечивает более быструю передачу. В первые дни Интернета дизеринг был лучшим другом веб-дизайнера. Они могли бы создавать более визуально привлекательные веб-сайты, в то же время поддерживая более медленные соединения для передачи данных.
Дизеринг в печати
Хотя ограничения старых 8-битных и 16-битных мониторов больше не являются проблемой, а технологические усовершенствования намного превзошли необходимость сглаживания, сегодня они все еще пользуются популярностью. Многие модели домашних принтеров используют дизеринг. Главным образом это снижает стоимость эксплуатации принтера и снижает стоимость самого принтера. Струйные принтеры специально распыляют микроскопические точки на бумаге, производя различные цвета и оттенки. Даже монохромные принтеры переведут цветную фотографию в размытое черное изображение, чтобы создать черно-белую копию изображения.
Дизеринг в фотошопе
Вот оригинальное черно-белое фото. В то время как хорошая фотография, добавив некоторые текстуры и цветовые заливки, Photoshop может преобразовать это изображение в художественно размытое изображение, как показано ниже:
Наложение рисунка из бумаги Pastel Paper с заливкой цветом имитируемого оттенка сепии в Photoshop резко меняет внешний вид фотографии.
Что такое дизеринг в компьютерной графике
Цифровая фотография и обработка изображений
В компьютерной графике дизеринг используется для создания иллюзии глубины цвета для изображений с относительно небольшим количеством цветов в палитре. Отсутствующие цвета составляются из имеющихся путем их «перемешивания» (например, если необходимо получить отсутствующий в палитре фиолетовый цвет, его можно получить, разместив красные и синие пиксели в шахматном порядке).
При оптимизации изображений путем уменьшения количества цветов, применение дизеринга приводит к визуальному улучшению изображения, однако для отдельных сжатых форматов (например, PNG), увеличивает его размер.
На 2008 год в большинстве настольных мониторов на основе TN- (и некоторых *VA) матриц, а также во всех дисплеях ноутбуков используются матрицы с 18-битным цветом (6 бит на каждый RGB-канал), 24-битность эмулируется мерцанием с дизерингом.
Дискретизация синусоиды
Ложка дёгтя
В наши дни самым наглядным форматом представления своего продукта является видео. И вот тут беда пришла откуда не ждали: современные видеокодеки совершенно не рассчитаны на кодирование пикселизированной графики. В результате после загрузки на YouTube мы получаем вот это.
Пришлось добавить альтернативный режим, в котором «кляксы» паттерна остаются жирными и сглаженными. Из-за этого потерялся шарм и аутентичность, так что включать данный режим есть смысл только для стриминга и записи видео с экрана.
Бороться приходится и с сайтами, автоматически конвертирующими изображения в JPEG. Все скриншоты для этой статьи пришлось вдвое увеличивать без интерполяции, чтобы последующая перекодировка в JPEG не сильно портила картинку.
Дискретизация дизерингом постоянного сигнала
Рендерим пиксели
Поскольку спроецированный размер текстуры меняется при приближении или отдалении, встал вопрос, как сохранить плотность пикселей для сохранения нужного оттенка. Изначально я хотел сгенерировать текстуру со сложным распределением пикселей и маской, «зажигающей» пиксели в правильном порядке, но оказалось, что это лишнее — с задачей прекрасно справляется обычный механизм мипмаппинга, нужно только сгенерировать текстуры для мип-уровней самостоятельно. Для этого был написан скрипт на Python.
Из-за меняющегося масштаба, точки, очевидно, не могут быть отдельными пикселями. В текстуре они сохраняются в виде квадрата 2х2 пикселя (экспериментировал с градиентными кружками разных размеров, результат неудовлетворительный), а получившаяся «клякса» превращается ровно в один пиксель с помощью несложного шейдера.
Сразу видна проблема — чёткая граница мип-уровней, пиксели на которой еще и мелькают. Игры с ручным выбором мип-уровня по маске ни к чему хорошему не привели, поэтому я снова доверил всё автоматике — 4 выборки из текстуры с небольшим изменением масштаба, в итоге мип-уровень выбирается сам.
Вы могли заметить, что на последней гифке плотность пикселей возросла. Этого удалось достичь, размножив паттерн на 6 каналов двух RGB-текстур. Это нужно и для рисования полутонов. В зависимости от яркости, выбирается соответствующее количество каналов, в результате текстура становится более или менее плотной.
К сожалению, граница перехода от светлых пикселей на тёмном фоне к тёмным пикселям на светлом фоне получилась достаточно резкой.
У меня были сомнения, достаточно ли такого набора полутонов. Но все сомнения развеялись, как только я применил технологию к реальной картинке.
Позже я даже снизил число каналов до четырёх (одна RGBA-текстура) без заметного ухудшения качества картинки.
Купить рекламу Отключить
Дизеринг как стилистический выбор
В то время как современные интернет-соединения уменьшили потребность в таких методах, как дизеринг, внешний вид часто желателен из-за его ретро-эстетики. Известные примеры того, что стало известно как «Dither-punk», включают Return of the Obra Dinn и Rogue Invader.
Web-дизайн. Статьи.
Оптимизация изображений в формате GIF
Формат GIF сильно отличается от JPG и использует совершенно другие методы оптимизации. Он предназначен для хранения изображений с количеством цветов не более 256, поддерживает палитру и использует сжатие без потерь по методу LZW.
Теперь разберемся по порядку с этими методами и приемами оптимизации.
Уменьшение количества цветов
Оптимизация палитры изображения
Во втором случае, когда используется оптимизированная палитра, графический редактор вначале анализирует рисунок и составляет список всех используемых в изображении цветов. Далее, на основании частоты появления цветов, составляется палитра, которая называется оптимизированной. После этого, уже обычным способом, просматривается рисунок, и цвет пикселя изменяется на ближайший из палитры. Этот способ дает гораздо лучшие результаты (см. рисунок выше), и именно его следует применять, если у Вас нет иных причин для использования фиксированной палитры.
Стилизация изображения
Для уменьшения количества используемых цветов в изображениях, содержащих фотографические сюжеты, возможно применение стилизации фотографии. Для этого можно воспользоваться такими приемами, как тонирование изображения и применение художественных фильтров, имитирующих рисунки. Фотографии, обработанные таким способом, будут сжиматься лучше и требовать палитру, содержащую менее 256 цветов.
Искажение размеров изображения
Следующий метод оптимизации основан на искажении размеров рисунка. Его нельзя применять к обычным рисункам, но он очень хорошо подходит для рисунков, состоящих из элементов типа линий и однородных областей. Допустим, нам понадобился рисунок, представляющий из себя черный квадрат (Малевича 😉 размером 100×100 пикселей. Для уменьшения размера файла сделаем т.н. однопиксельный (т.е. размером 1×1 пиксель) GIF черного цвета. Как обычно, вставим его в HTML-файл, но размеры картинки укажем те, что нужны нам (100×100). Броузер сам растянет наш пиксель до нужных размеров, а мы получим большую экономию :). Подобным же образом можно использовать однопиксельные GIFы других цветов, но наибольшую пользу может принести прозрачный однопиксельный GIF. При помощи него удобно задавать пустышки на страницах, абзацные отступы, фиксировать минимальную ширину (высоту) таблицы и делать другие полезные вещи.
Методом искажения очень удобно создавать графические разделительные линии. Достаточно нарисовать ее сечение шириной (высотой) в один пиксель, а в HTML-документе указать нужную ширину линии (или высоту, если линия вертикальная). Линия, расположенная под абзацем, сделана именно таким способом.
Фрагментарная оптимизация
Фрагментарная оптимизация применяется в случае, если у нас есть некоторое большое изображение, содержащее сильно отличающиеся по количеству цветов области. В этом случае изображение можно разрезать на фрагменты и поместить их в таблицу, тогда в броузере оно будет выглядеть как единое целое. Теперь каждый фрагмент исходного рисунка мы оптимизируем отдельно. Для фрагментов, содержащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можно использовать полную палитру в 256 цветов или сохранить в формате JPG. Этот способ позволяет уменьшить объем, занимаемый исходным файлом, примерно раза в 2-3 (в зависимости от конкретного изображения); кроме того, изображение будет загружаться более равномерно, т.к. все фрагменты будут качаться параллельно. Хотя, если количество фрагментов превысит 10, то возможного выигрыша и не получится, т.к. каждый фрагмент должен будет хранить свою копию палитры и служебной информации.