Как веб-дизайнер вы могли бы быть уже знакомы с форматом PNG изображение, которое предлагает полнофункциональные прозрачности.
It’ SA потерь, надежный, очень хорошая замена изображений формата GIF старший.В Photoshop (или любой другой графический редактор) пользователь вы думаете, что есть не так много вариантов для оптимизации PNG, особенно для полноцветных PNG’ S (PNG-24 в Photoshop), который doesn’ т есть.Некоторые из вас могут даже подумать, что этот формат “ unoptimizable”.Ну, в этой должности we’ постараемся развенчать эту myth.
Это сообщение описывает некоторые методов, которые могут помочь вам оптимизировать свой PNG-images.Эти методы являются производными от трудоемкой часов, потраченных на изучение, как именно PNG датчик сохраняет данные.We’ начнем с некоторых необходимое о формате PNG и затем перейти к расширенному оптимизации techniques.
Вы можете взглянуть на следующие статьи:
скучно part
Прежде чем мы углубимся в методы оптимизации изображений, мы должны узнать некоторые технические подробности о формате PNG.Каждый графический формат имеет свои преимущества и недостатки, зная, что они позволят вам Изменить оригинального изображения для лучшего визуального качества и compression.Это ключевая концепция профессионального имиджа optimization.
PNG был разработан в качестве открытым исходным кодом, замена собственности GIF format.У них есть некоторые общие черты (например, индексированные палитры цветов), но PNG гораздо лучше, чем GIF в каждом аспекте.Он представил некоторые интересные функции для упаковки и сжатия изображения, но для нас — веб-дизайнеров и разработчиков — наиболее важным является Scanline filtering (также известный как ‘ дельты filters’)
.
Scanline filtering
Вот как это работает.Например, у нас есть 5 × 5 пикселей изображение с горизонтальным градиентом.Вот схематическое изображение этого образа (каждый номер представляет собой уникальный цвет):
Как вы можете видеть, все одинаковые цвета распространяется вертикально, а не горизонтально.Такие изображения будут иметь очень плохой сжатия в GIF, так как он сжимает цвета, которые распространились по горизонтали.Let’ посмотрим, как это изображение данных могут быть packed по Scanline фильтрации:
Номер 2 перед каждой линией применяются фильтры, которые “ Up” в этом случае.“ Up” Фильтр отправляет сообщение PNG декодер: “За текущий пиксель принимает значениеиз вышеуказанных точек и добавить его к текущему значению. «У нас есть значение 0 для линий 2-5, потому что все пиксели в каждой вертикальной линии имеют тот же цвет.И такие данные будут сжаты лучше, если бы изображение было относительно большим.Например, 15 пикселей значение 0 можно записать в виде 0 (15) и это намного короче, чем пятнадцать 0′ S-это как сжатие работает в common.
Я написал “ могут быть packed” потому, что в этом идеальном случае тест “ Sub” фильтр (номер 1 перед каждой строкой) даст гораздо лучший результат:
Фильтр “ Sub” отправляет сообщение на декодер: “. Возьмем значение левого пикселя и добавить его к текущему значению” В данном случае, это 1.Как вы уже догадались, такие данные будут сжаты очень effectively.
Scanline фильтрации важна для нас, потому что мы можем использовать их: в частности, мы можем сделать некоторые обработки изображений, чтобы сделать фильтрацию лучше.Есть пять фильтры: Нет (без фильтрации), Sub (вычесть значение левого пикселя от текущего значения), Up (вычесть выше значение пикселя), средний (вычесть среднюю левого и верхнего пикселей) и Пэт (заменитьверхний, левый или верхний левый пиксель, названный в честь Алана Paeth)
И here’ ы, как эти фильтры влияют на размер изображения в сравнении с хорошей ol’ GIF:
GIF, 2568 bytes
PNG, 372 bytes
Как вы можете видеть, GIF изображений в 7 раз больше, чем за аналогичный PNG-image.
Изображение type
Еще одна важная вещь, чтобы знать о PNG является изображение type, мета-данных, хранящихся в файле.Как пользователь Photoshop, вы знакомы с PNG-8 (индексированные изображения) и PNG-24 (полноцветное изображение).Как пользователь Fireworks, вы знаете, PNG-32 (полноцветный с прозрачностью), что довольно странно, потому что Photoshop’ с PNG-24 также может хранить полноцветные с прозрачностью.Ну, it’ S стоит знать, что эти названия не являются официальными, и вы won’ т найти их в функции PNG.Для Вашего удобства we’ будем использовать Photoshop’ S именования PNG типы изображений в этой article.
Есть 5 доступных типов изображений в PNG: оттенки серого, Truecolor, индексированных цветов, градаций серого с альфа-и Truecolor с альфа.Есть также два подтипа индексированных цветов типа (неофициальные тоже): немного transparency (каждый пиксель может быть полностью прозрачным или полностью непрозрачный) и палитру transparency (каждый пиксель может быть полупрозрачным).Во втором случае каждый цвет сохраняетсяВ палитре с альфа-значение.Таким образом, непрозрачный красный и 50%-прозрачный красный два разных цвета, и они принимают 2 клетки внутри palette.
Самое страшное, что Photoshop может сохранять PNG и только 3 из этих типов: индексированных цветов с битом прозрачности, Truecolor и Truecolor с прозрачностью.That’ поэтому вы можете найти много мнений, что Adobe Fireworks является лучшим инструментом для оптимизации PNG.Лично я don’ T с ними согласен: Фейерверк doesn’ т есть достаточно инструментов для работы с изображениями, it’ S есть только немного больше возможностей для сохранения PNG изображение, но it’ SA тема для другого discussion.
Это где такие утилиты, как OptiPNG __ или 6 | pngcrush пригодятся.По существу, эти средства сделать следующее:
- Возьмите лучший тип изображения для изображения (например, полноцветные могут быть преобразованы в индексированных цветов, если есть aren’ T Слишком много цветов в изображении).
- Возьмите лучшее дельты filters.
- Возьмите лучшее сжатие стратегию и, возможно, уменьшить цвета depth.
Все эти операции не влияют на качество изображения на всех, но делать уменьшить размер файла PNG-изображений, поэтому я настоятельно рекомендую вам использовать такие инструменты, каждый раз, когда вы сохраняете PNG image.
Сейчас достаточно с скучная часть, let’ S сделать некоторые магии
1.Posterization
Это хорошо известный метод оптимизации изображения TrueColor.Откройте пример изображений в Photoshop, нажмите на иконку в палитре слоев и выберите Posterize:
Выберите наименьшее возможное количество уровней (обычно 40 достаточно) и сохранить изображение:
Оригинал, 84 KB
постеризации, 53 KB
Вот как это работает: постеризации просто уменьшает количество цветов, преобразование похожие цвета в одну, создавая, таким образом постеризации регионов.Это позволяет выполнять фильтрацию лучше Scanline и достижения лучшего сжатия.Недостатком этого метода является чередование цветов, что особенно видно, если вы пытаетесь изображение стежка с HTML фона:
Оригинал image
Постеризации image
2.Грязные Transparency
Взгляните на следующие изображения:
75 KB
30 KB
Оба они были сохранены в Photoshop без какой-либо оптимизации.Даже если вы на пиксель сравнении этих образов, вы won’ T заметите никакой разницы.Но почему первое изображение в 2,5 раза больше, чем второй
Вы нуждаетесь в специальный плагин для Photoshop, чтобы увидеть скрытые детали.It’ Называется Удалить Transparency и доступна для свободного скачивания на PhotoFreebies плагин suite.Вы должны установить его, прежде чем переходить к следующему step.
Открыть оба изображения образуют приведенном выше примере в Photoshop и выберите Filer?Фото Wiz?Удалить Transparency.Теперь вы можете видеть фактические данные пикселя, который был сохранен на картинке:
What’ происходит?Как это возможно, чтобы показать данные с исходного изображения из однослойного изображения PNG?Ну, it’ с довольно простым.Каждый пиксель в полноцветных изображений с поддержкой альфа описывается четыре байта: RGBA.Последний является Alpha, которая контролирует прозрачность пикселя: Значение 0 означает полностью прозрачный пиксель и 255 означает полную непрозрачность.А это значит, что каждый пиксель (с любым значением RGB) могут быть скрыты только с Альфа-байт установлен в 0.Но это RGB данные по-прежнему существует и, более того, он предотвращает PNG кодер от эффективной упаковки и кодирования потока данных.Таким образом, мы должны удалить это скрытые данные (заполните его черным цветом, например) перед сохранением изображения.Вот быстрый способ, как это сделать:
- Открытое Первое изображение на примере above в Photoshop.
- Ctrl клик (?, Или нажмите на Mac) на уменьшенное изображение в палитре слоев, чтобы создать выделение, затем инвертировать его: Select?Inverse.
- Перейти в режим быстрой маски нажатием Q ключ:
- Мы создали маску для полупрозрачное изображение, но мы должны оставить полностью прозрачной пикселей.Выберите изображение?Корректировки?Threshold и переместите ползунок уровня порога на правом, в результате чего полностью прозрачные пиксели выбор:
- Оставить режим быстрой маски (Q прессе еще раз) и заполните выделение черным цветом:
- Обратить seleciton раз ( Select Inverse?) И нажмите на иконку в палитре слоев, чтобы добавить mask.
That’ и все, теперь вы можете сохранять изображения в формате PNG-24 и убедиться, …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров