Про PNG. Часть четвертая
HTML и CSSXSLTJavaScriptИзображенияСофтEtc
| Задача. | Научиться работать с PNG. | ||
Завершая серию статей про PNG, хочу показать несколько практических приемов, которыми пользуюсь ежедневно в своей работе.
- Заметил, что многие ребята используют полноцветный PNG (PNG-24 в фотошопе)
только для полупрозрачных картинок, а индексированный PNG (PNG-8) — только для
картинок с малым количеством цветов. На самом деле, для последнего случая
довольно часто бывает более эффективным именно PNG-24:
PNG-8 (833 байта) PNG-24 (369 байт) Если объяснять коротко, то для описания одного пикселя в PNG-24 используется 3 байта, а в PNG-8 — 4 байта (3 байта на цвет + 1 байт для элемента палитры).
- PNG — довольно гибкий формат, способы хранения графической информации в нем
не ограничиваются фотошоповскими PNG-8 и PNG-24. Например, можно сохранить
изображение с 16 битами на канал (только это совсем не нужно для веба). Одна из
возможностей этого формата, о которой мало кто знает, — это сохранение
информации о прозрачности в индексированной палитре. Такой PNG-8 с честной
полупрозрачностью. Весить такое изображение будет гораздо меньше, чем аналог в
PNG-24. В этом случае каждый элемент палитры описывается не тремя
(RGB), а четырьмя (RGBA) байтами, что означает, к примеру, что непрозрачный
черный и прозрачный на 50% черный — это два разных цвета в палитре.
Однако есть несколько нюансов. Во-первых, фотошоп не умеет сохранять PNG с RGBA-палитрой (более того, он до сих пор не умеет нормально их открывать). Умеет сохранять в таком формате, например, Adobe Fireworks. Во-вторых, своеобразное отображение таких изображений в IE6:
PNG-8 с полупрозрачностью в IE6 …во всех остальных браузерах Отобразились только абсолютно непрозрачные пиксели, все полупрозрачные стали полностью прозрачными. Причем фильтр AlphaImageLoader не использовался: картинка накладывалась как обычный фон. Это гораздо лучше, чем серый цвет, заполняющий прозрачные области.
- В третьей части я рекомендовал совершать ряд действий перед сохранением
полупрозрачных PNG. Связано это было с тем, что фотошоп часто оставляет
фрагменты изображения в полностью прозрачных областях, и эти фрагменты могут
сильно увеличить объем файла. Сделав несколько тестов, я пришел к выводу, что эти
действия совершать нужно далеко не всегда, так как объем может, наоборот,
увеличиться:
До оптимизации: 5 537 байт После оптимизации: 6 449 байт Вот как выглядят цветовые слои этих изображений:
Несмотря на то, что в первом случае больше цветовой информации, именно для первого изображения PNG-упаковщик смог оптимизировать данные с помощью дельта-фильтров.
Для второго изображения фильтрация не была применена вообще, так как любой фильтр только увеличивал объем изображения.Поэтому теперь я рекомендую делать две версии файла — с оптимизацией и без — и выбирать из них тот, который меньше весит.
- Не забывайте пользоваться утилитами для оптимизации PNG-изображений, в
некоторых случаях они позволят вам значительно сократить объем файла. Вот
наиболее популярные из них:
— PMT (PNG and MNG Tools) — набор утилит для работы с PNG и MNG (анимированный PNG), в состав которых входит pngcrush, позволяющая, помимо оптимизации упаковки данных, удалять gAMA chunk. Именно из-за этого фрагмента PNG-файлы, сохраненные в фотошопе (до версии CS3), выглядели темнее в IE и Safari.
— OptiPNG — утилита, созданная на базе pngcrush. Умеет автоматически понижать глубину цвета, если это возможно (к примеру, может перевести из RGB в greyscale, если в изображении используются только оттенки белого), и перебирать дельта- фильтры для наилучшего сжатия.
— PNGout — примечательна тем, что использует собственный deflate-компрессор, написанный Кеном Сильверманом (автор этой утилиты), который способен сжать файл в среднем на 5-10% лучше, чем pngcrush и PNGout. К сожалению, она не умеет автоматически перебирать параметры фильтрации и сжатия файла, их придется указывать вручную (PNGoutWin умеет, но стоит денег). Если хочется выжать все соки из компрессии файла, рекомендую сначала пропускать его через OptiPNG (для подбора оптимальной фильтрации), а затем через PNGout.
— TweakPNG — позволяет увидеть структуру PNG-файла и удалить оттуда ненужные фрагменты (например, gAMA). Актуально, если вы пользуетесь фотошопом до версии CS3.
Для наилучшей оптимизации изображений недостаточно просто подергать ползунок «Качество» или запустить волшебную утилитку в надежде, что она сама все сделает.
Очень важно знать особенности хранения данных в формате, в котором сохраняется изображение. Эти знания помогут правильно модифицировать картинку, чтобы она была упакована наилучшим образом. Я записал скринкаст, демонстрирующий несколько приемов оптимизации, которыми я постоянно пользуюсь, и достигаемый с их помощью результат.
Скринкаст лекции, 45 МБ
Более подробных комментариев не будет: те, кто хорошо изучил особенности записи информации в PNG, и так поймут, что к чему. А остальным банальное запоминание последовательности действий все равно не позволит добиться каких-либо значимых результатов, потому что для каждой картинки нужна своя стратегия оптимизации. Подобный результат можно получить с помощью Image → Adjustments → Posterize, только картинка станет темнее, тяжелее и не такой удобной для оптимизации через OptiPNG.
Для желающих потренироваться:
— Исходник (Фотошоп, 3 МБ)
— Результат.
Тут над файлом я поработал чуть дольше, поэтому весит он меньше и выглядит лучше
— Скринкаст (Квиктайм, 45 МБ)
Музыка: Amarok @ Art. Lebedev Studio
| 1 | 2 | 3 | 4 |
JPEG и PNG — в чём разница форматов?
JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG.
Формат JPEG
JPEG (он же JPG) — это формат изображений, который использует сжатие с потерями и не поддерживает прозрачность. Позволяет настраивать уровень качества сохраняемого изображения — при его снижении удаляются детали и добавляются шумы на изображение, однако размер становится более компактным. JPG в зависимости от настроек может обеспечить сжатие как 2:1, так и 100:1 — но качество прямо пропорционально коэффициенту сжатия.
Название формата — аббревиатура от Joint Photographic Experts Group.
JPEG поддерживает цветовые пространства 24-bit RGB и CMYK, а также 8-bit Grayscale. CMYK и Grayscale используются достаточно редко и их поддержка вызывает нарекания.
Также JPEG имеет интегрированную поддержку EXIF, позволяющую хранить метаданные, например: производитель и модель использованной камеры, используемая для съёмки выдержка, диафрагма и светочувствительность, разрешение кадра, настройки баланса белого, фокусное расстояние (в т.ч. эквивалентное), использование вспышки, размер матрицы, дата и время съёмки, географические координаты и адрес места съёмки.
Используемые расширения для файлов — .jpg and .jpeg (работают идентично).
С прикладной точки зрения JPEG оптимален для изображений с большим количеством цветов, например, для фотографий.
Формат PNG
PNG 24 — это формат изображений, который работает с полноцветными изображениями, использует сжатие без потерь и позволяет сохранять прозрачность.
Настроить качество сохранения в PNG 24 невозможно, однако, можно адаптировать сохраняемое изображение для достижения минимального размера файла: для этого можно снизить количество цветов в изображении. Название формата — акроним от Portable Network Graphics.
Существует также формат PNG 8 — он более компактный, чем PNG 24, но применим только для изображений с очень ограниченных количеством цветов: 256 — это максимум. В случае использования PNG 8 для изображений с большим количеством цветов сжатие будет с потерями и с эффектом постеризации.
PNG до 2017 года не поддерживал EXIF, но затем его поддержка была реализована в стандарте. В фотографии PNG используется редко — для компактного хранения файлов больше подходит JPEG, а для профессиональной работы лучше подходят RAW-форматы DNG или TIFF.
PNG 24 и PNG 8 используют расширения для файлов .png, используемая битность записывается в метаданные файла и по расширению не определяется.
С прикладной точки зрения PNG 24 оптимален для изображений с небольшим количеством цветов, например, для иконок, схем, рисунков и скриншотов.
Если же цветов в изображении меньше 256, то еще более эффективное сжатие возможно в PNG 8.
Резюме. JPEG и PNG — какой формат оптимальнее использовать?
Фотографии и изображения с большим количеством цветов лучше всего сохранять в JPEG. Но стоит помнить, что алгорим компрессии JPEG сжимает изображения с потерей качества.
Иконки, схемы, картинки с большим количеством текста и изображения с прозрачностью оптимальнее сохранять в PNG 24. Алгорим компрессии PNG 24 сжимает изображения без потери качества.
PNG 8 Против. PNG 24: Полное руководство
При разработке логотипов вы столкнетесь с различными файлами PNG. Но что такое файл PNG?
Что такое PNG-файл?
Файл переносимой сетевой графики (PNG) — это тип формата изображения, используемый для хранения изображений, которые необходимо передавать по сети. Файлы PNG в основном используются в дизайне логотипов, поскольку вы можете легко разместить изображение поверх узора, цветового блока или фона изображения.
Они относительно меньше форматов файлов, используемых в печати, и идеально подходят для электронного просмотра.
PNG 8 по сравнению с PNG 24
В основном числа, прикрепленные к термину PNG, относятся к битовому уровню, поддерживаемому компьютерами. Таким образом, PNG 8 поддерживает 8-битные цвета, а PNG 24 поддерживает 24-битные цвета. Обратите внимание: поддержка более высокого бита не означает, что формат файла имеет более высокое качество, чем поддержка более низкого бита. В некоторых ситуациях может потребоваться использование файлов с более низким разрядом.
Что касается детализации цвета, PNG 8 может поддерживать не более 256 цветов. PNG 24, с другой стороны, может использовать более 16 миллионов доступных цветов. В результате PNG 8 лучше всего использовать в небольшой графике, не требующей много цветовой детализации, такой как компьютерные значки и простые графические изображения. Формат PNG 24 лучше всего подходит для веб-фотографий и более подробных изображений.
Когда использовать PNG 8 против PNG 24
Если вы хотите эффективно хранить данные изображения, вы можете подумать об их сжатии. Здесь вам придется согласиться на PNG 24 или PNG 8, в зависимости от ваших потребностей. Благодаря широкой цветовой доступности PNG 24 имеет возможность сжатия без потерь. Он сжимает изображение без существенного изменения его общего вида. С другой стороны, PNG 8 поддерживает сжатие с потерями, что приводит к некоторым искажениям или артефактам изображения. Вы можете использовать первое на любом естественном изображении, таком как типичные фотографии, а второе — это, среди прочего, высокотехнологичные рисунки, комиксы и медицинские изображения.
Что касается прозрачности PNG 8 и PNG 24, вы можете использовать PNG 8, если ваша цель — поддерживать однобитный канал прозрачности. Результатом будут непрозрачные и прозрачные края областей, несколько жесткие и лишенные полупрозрачных эффектов. PNG 24 поддерживает переход от непрозрачного к полностью прозрачному; поэтому это реальная сделка, если вы хотите получить эффект полупрозрачного альфа-перехода.
Если вы хотите преобразовать изображения со сложными цветами в более простой набор цветов, вы можете использовать PNG 8. Однако это приведет к значительной потере цвета изображения. При работе с изображениями с меньшим количеством битов — 2 или 4 бита — вы можете включить их в категорию PNG 8. Лучше всего он работает с изображениями с небольшими цветовыми различиями до 256 цветов, такими как знаки отличия и значки. Если вы работаете с файлами с большим разнообразием цветов и дополнительными деталями, такими как водяной знак и логотип, используйте PNG 24. Он хранит до 16 миллионов цветов.
Заключение
Из-за возможности сетевой передачи дизайнеры часто используют PNG 8 или PNG 24 для веб-дизайна. Он поддерживает сжатие без потерь, полупрозрачность альфа-канала и прекрасно сохраняет логотипы, диаграммы и шаблоны, среди прочего, в небольших файлах и с четкими эффектами.
Файлы PNG можно открывать с помощью нескольких программ редактирования. У вас не будет проблем с совместимостью с CorelDRAW при открытии и просмотре файлов PNG.
Убедитесь, что вы используете файлы PNG, если вы фотограф или работаете с программным обеспечением для цифровой графики, для сохранения разрешения и качества изображения.
Нужно скачать CorelDRAW?
Загрузите бесплатную 15-дневную пробную версию прямо сейчас!
изображений — какой формат png мне использовать?
спросил
Изменено 10 лет, 3 месяца назад
Просмотрено 1к раз
Какой формат PNG следует использовать: PNG 8 или PNG 24? Какой из них лучше для сайта. Я смущен этим. В чем основное различие между PNG 8 и PNG 2?
- изображение
- png
PNG-24. Png-24 имеет альфа-прозрачность (где Png-8 имеет только вкл/выкл прозрачность).
Png-8 проиндексирован.
Png-24 без потерь.
Png-24 лучше практически во всех отношениях.
http://www.elated.com/articles/understanding-image-formats/
1
PNG имеет несколько режимов, которые можно использовать. Он может содержать:
- Оттенки серого
- Индексированный цвет, обычно означающий PNG-8
- Оттенки серого с альфа-каналом
- Истинный цвет (RGB)
- Truecolour с альфа-каналом (RGBA), обычно означает PNG-24
Индексированный цвет отличается от других тем, что представляет собой палитру максимум из 256 цветов, из которых индексы используются для обозначения цвета конкретных пикселей. Он может содержать прозрачность через вспомогательный блок. Таким образом, каждый пиксель обозначается значением шириной в байт или даже меньше, если палитра не такая большая. Если вы используете truecolor, на пиксель будет больше данных, в зависимости от того, используете ли вы альфа-канал.
Таким образом, в большом изображении индексированный цвет сэкономит вам много данных на каждый пиксель. Однако, если вы используете более 256 цветов, некоторые данные о цвете будут потеряны, что также более вероятно для большого изображения. Я бы посоветовал сохранить ваше изображение в обоих форматах и посмотреть, стоит ли потеря выигрыша в меньшем размере файла. Хотя, если вы разрабатываете изображение для обычного веб-сайта, а не для мобильных телефонов, вам все равно лучше использовать PNG-24, так как никто не заметит разницу в размере.
Я бы сказал, что это зависит от изображения, которое вы хотите сохранить в формате PNG*, но если у вас есть сомнения, лучше использовать PNG-24: «истинный цвет» (8 бит на канал), так что изображение не должно быть искажено и не «теряйте» «точное» цветовое соответствие, а также необязательно PNG-32, если с альфа-каналом (прозрачностью). Изображения PNG-8 ограничены (256 цветов, выбранных из 24-битной палитры) и допускают только маску, вы можете использовать ее, например.
Я написал об этом статью: PNG, который работает, в которой описаны все основные варианты PNG и их компромиссы/совместимость.
Короче говоря, используйте PNG8 (с палитрой), когда это возможно, так как он имеет гораздо меньший размер файла.