Альфа-каналы в PNG-8

07 Nov, 2008

Мало кто знает, но они действительно существуют.

Проблема полупрозрачных картинок медленно умирает вместе с IE5-6, но, тем не менее будет актуальна для популярных сайтов еще несколько лет. Вдобавок, дальше станет понятно, почему процентная прозрачность для PNG-8 будет важна и без ИЕ.

Чем они вообще отличаются, эти PNG?

PNG-24:
доступны все возможные цвета, доступна любая степень их прозрачности.
PNG-8 обычный:
доступны 256 цветов, прозрачность только на уровне 0 или 100%. Прозрачность в 50%, например, невозможна.
PNG-8 с альфа-каналами:
доступны 256 цветов, каждый из этих 256 цветов имеет свой показатель прозрачности от 0 до 100%. Возможна прозрачность в 42%.
Казалось бы, «Ну и что? Все равно альфа-каналы в ИЕ работать не будут, толку?».

Однако, толк в том, что полупрозрачные пикселы в PNG-8 при просмотре в ИЕ будут показаны полностью прозрачными. Все остальные броузеры честно отобразят их полупрозрачными. Более того, не будет никакого уродливого серо-белого фона, который видно при просмотре PNG-24 картинок в Интернет Эксплорере.

То есть: все пикселы с прозрачностью от 0 до 99% будут отображены IE как полностью прозрачные.

Как сохранить PNG-8 с альфа-каналами?

Это странно и дико, но сделать это в Photoshop нельзя. (возможно в CS4...?)

Зато такую картинку можно сохранить в Fireworks! Там это делается очень просто, при экспорте выбираем опции:

Опции для экспорта PNG в FireworksТрудно ошибиться, нужно выбрать формат PNG-8 и тип прозрачности «Alpha Transparency». Видно также, что в палитре все цвета имеют прозрачность кроме одного (крайнего справа)

Почему этого нет в Photoshop, загадка.

Также существуют утилиты, превращающие PNG-24 в PNG-8. Естественно, при этом качество страдает, но часто с этим можно жить.

Живой пример

Для примера, я сохранил одну и ту же картинку в трех форматах: PNG-24, PNG-8 обычный, и PNG-8 с альфа-каналами (из Fireworks). Все три поместил на узорчатый фон. Вот что вышло:

PNG картинки в FirefoxPNG картинки в Firefox

Ничего особо интересного, кроме размеров картинок. Обратите внимание на вес PNG-24 и PNG-8 файлов, при почти идентичном отображении.

А теперь, в ИЕ:

PNG картинки в IEPNG картинки в IE. Хорошо видно «серо-белое уродство» упомянутое ранее

Вуаля! То, что называется «graceful degradation»! Сами смотрите, если не верите. ;) За фон благодарен.

Польза

Вряд ли это знание поможет вам познакомиться с девушкой вашей мечты, или начать наконец делать зарядку по утрам. Но, некоторая польза все же есть. Во-первых, это экономит трафик. Во-вторых, в большинстве случаев отлично деградирует в ИЕ. То есть, можно применять для всяких некритичных украшательских штучек. В IE будет отображен обычный PNG-8 (а ля GIF), а для всех остальных полупрозрачная красота.

Разумеется, в некоторых случаях картинки будут казаться выщербленными в IE (резкие края), но никто и не говорит, что этот способ панацея.

Еще по теме

Эта техника, кстати, в некоторых случаях могла бы чуть-чуть упростить вот этот супер-универсальный трюк Виталия. Другие заметки по теме: Уверен, кто-то уже это использовал. Знание это совсем не новое, но малоизвестное почему-то. Потому, был бы рад если бы вы поделились опытом по теме.

22 комментариев к “Альфа-каналы в PNG-8”

1.Yvelious | 05 Feb, 2010
Почему для картинки png8 c полупрозрачностью не срабатывает фильтр AlphaImageLoader или другие скрипты для отображениея полупрозрачности png в ie6?
2.Я | 16 Oct, 2009
http://clip2net.com/clip/m0/1255682327-clip-120kb.png перемудрил походу с хайтеком
3.akella | 16 Oct, 2009
Может ФФ притворяется кем-то? У меня вот http://img127.imageshack.us/img127/393/picture1jr.png =(
4.GodCow | 23 Jun, 2009
Я обычно юзаю IePngFix. Хотя последнее время стараюсь обходиться без полупрозрачных изображений.
5.Developer | 06 Apr, 2009
забавненько.. хотя, видя "серо-белое уродство" пользователь бы уж задумался об апдейте браузера..
6.Sam | 07 Nov, 2008
Всё новое — хорошо забытое старое :) http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
7.akella | 07 Nov, 2008
Да, спасибо, в посте еще две ссылки на такие же старые статьи, но при этом мало кто об этом знает все равно =) Я специально опросил коллег, тема малоизвестная и малоиспользуемая. И эту добавил в пост. =) P.S.: я, кстати, об этой штуке не знал (как минимум не использовал), хотя и видел эти картинки про лампочки когда-то...
8.Юрко | 07 Nov, 2008
Sam, та то вже весь  інтернет знає. Сьогодні в Акєли звання — Капітан Очєвідность ;)
9.Sam | 07 Nov, 2008
Юрко, не akella прав на самом деле. Я тоже у себя несколько раз об этом напоминал. Каждый раз были благодарные. Наверное, напомню ещё раз ссылкой на статью.
10.Михаил | 08 Nov, 2008
Почему этого нет в Photoshop? Потому что создание макетов для веб — для Photoshop дело десятое. Его основная задача — обработка фото, цветокоррекция, подготовка к печати и прочее, прочее, прочее... Последние две версии хоть перестали в png-24 по поводу и без повода альфа-канал цеплять %) А вот FireWorks изначально разрабатывался как инструмент веб-дизайнера, потому он умеет больше. Настолько больше, что в Эдоб решили не развивать поделку под названием ImageReady, и поддерживают FireWorks. В отличие от FreeHand, например. Появилась ли поддержка в CS4? Если не забуду, гляну в понедельник.
11.dobrych | 07 Nov, 2008
Супер, для меня это отличная новость! Не знал, спасибо Юра! Как раз решил отказываться от поддержки IE в своих проектах и думал что может быть не критичного для пользователей IE в интерфейсе сайта.
12.Madman | 07 Nov, 2008
Знакомая штучка! Огромный плюс, что не нужны никакие фильтры и разного рода JS, обычная картинка. На стадии медленного (но уверенного) заката IE6 - это отличная вешь!
13.Степан Резников | 07 Nov, 2008
http://www.artlebedev.ru/tools/technogrette/img/png-4/ Для конвертации полупрозрачного PNG-24 в PNG-8 использую утилиту OptiPNG.
14.akella | 07 Nov, 2008
О, спасибо, за ссылку! Мне очень пришлась по душе цитата оттуда:
Более подробных комментариев не будет...
В любом случае спасибо, наверняка кому-то пригодится и поможет разобраться лучше!
15.akella | 08 Nov, 2008
@Михаил, объяснение мне кажется хорошим, но все равно ведь - это было так просто =) всего лишь добавить лишнюю галочку при экспорте в PNG... Но, мы конечно не знаем всех подводных камней этой фичи :( За взгляд в CS4 был бы очень благодарен!
16.Интересное за неделю: Drupal, Textpattern и новое о PNG | Вебмастеру посвящается... | 08 Nov, 2008
[...] Альфа-каналы в PNG-8 - проблемность альфа-каналов и полу прозрачности PNG [...]
17.Макисим Покровский | 08 Nov, 2008
Интересно, но в целом, заказчики не идут на компромиссы когда речь касается кроссбразерности. Что работает у людей, то должно работать и в IE. Один в один.
18.Максим Покровский | 08 Nov, 2008
В CS4 нет поддержки.
19.akella | 08 Nov, 2008
Согласен, тем не менее, я работал с одним американским порталом, где это было принято одной из стандартных практик разработки. Вплоть до того, что дизайнер отрисовывая макеты заботился о применимости этой техники. Но у них конечно всё немного по-другому, и процент пользователей ИЕ другой.
20.ganges | 08 Nov, 2008
Спасибо, Юра.
21.Genn | 09 Nov, 2008
Максим Покровский, и правильно делают.
22.cr_ | 05 Dec, 2008
как это в кс4 нет поддержки? низнаю как в более старых версиях, я использовал его в основном лишь с кс3, то там есть такая поддержка! главное выбрать палитру Selective и появляется соответствующая галка