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

7 Ноября, 2008

XHTML/CSS, Дизайн, Полезности

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

Проблема полупрозрачных картинок медленно умирает вместе с 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 (резкие края), но никто и не говорит, что этот способ панацея.

Еще по теме

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

Уверен, кто-то уже это использовал. Знание это совсем не новое, но малоизвестное почему-то. Потому, был бы рад если бы вы поделились опытом по теме.

XHTML/CSS, Дизайн, Полезности

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

Sam | 1. 7 Ноября, 2008

Всё новое — хорошо забытое старое :)
http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

akella | 2. 7 Ноября, 2008

Да, спасибо, в посте еще две ссылки на такие же старые статьи, но при этом мало кто об этом знает все равно =) Я специально опросил коллег, тема малоизвестная и малоиспользуемая.
И эту добавил в пост. =)
P.S.: я, кстати, об этой штуке не знал (как минимум не использовал), хотя и видел эти картинки про лампочки когда-то…

Юрко | 3. 7 Ноября, 2008

Sam, та то вже весь  інтернет знає. Сьогодні в Акєли звання — Капітан Очєвідность ;)

Sam | 4. 7 Ноября, 2008

Юрко, не akella прав на самом деле. Я тоже у себя несколько раз об этом напоминал. Каждый раз были благодарные.

Наверное, напомню ещё раз ссылкой на статью.

dobrych | 5. 7 Ноября, 2008

Супер, для меня это отличная новость! Не знал, спасибо Юра!
Как раз решил отказываться от поддержки IE в своих проектах и думал что может быть не критичного для пользователей IE в интерфейсе сайта.

Madman | 6. 7 Ноября, 2008

Знакомая штучка!
Огромный плюс, что не нужны никакие фильтры и разного рода JS, обычная картинка. На стадии медленного (но уверенного) заката IE6 – это отличная вешь!

Степан Резников | 7. 7 Ноября, 2008

http://www.artlebedev.ru/tools/technogrette/img/png-4/

Для конвертации полупрозрачного PNG-24 в PNG-8 использую утилиту OptiPNG.

akella | 8. 7 Ноября, 2008

О, спасибо, за ссылку! Мне очень пришлась по душе цитата оттуда:

Более подробных комментариев не будет…

В любом случае спасибо, наверняка кому-то пригодится и поможет разобраться лучше!

Михаил | 9. 8 Ноября, 2008

Почему этого нет в Photoshop? Потому что создание макетов для веб — для Photoshop дело десятое. Его основная задача — обработка фото, цветокоррекция, подготовка к печати и прочее, прочее, прочее… Последние две версии хоть перестали в png-24 по поводу и без повода альфа-канал цеплять %)

А вот FireWorks изначально разрабатывался как инструмент веб-дизайнера, потому он умеет больше. Настолько больше, что в Эдоб решили не развивать поделку под названием ImageReady, и поддерживают FireWorks. В отличие от FreeHand, например.

Появилась ли поддержка в CS4? Если не забуду, гляну в понедельник.

akella | 10. 8 Ноября, 2008

@Михаил, объяснение мне кажется хорошим, но все равно ведь – это было так просто =) всего лишь добавить лишнюю галочку при экспорте в PNG… Но, мы конечно не знаем всех подводных камней этой фичи :(
За взгляд в CS4 был бы очень благодарен!

Интересное за неделю: Drupal, Textpattern и новое о PNG | Вебмастеру посвящается... | 11. 8 Ноября, 2008

[...] Альфа-каналы в PNG-8 – проблемность альфа-каналов и полу прозрачности PNG [...]

Макисим Покровский | 12. 8 Ноября, 2008

Интересно, но в целом, заказчики не идут на компромиссы когда речь касается кроссбразерности. Что работает у людей, то должно работать и в IE. Один в один.

Максим Покровский | 13. 8 Ноября, 2008

В CS4 нет поддержки.

akella | 14. 8 Ноября, 2008

Согласен, тем не менее, я работал с одним американским порталом, где это было принято одной из стандартных практик разработки. Вплоть до того, что дизайнер отрисовывая макеты заботился о применимости этой техники. Но у них конечно всё немного по-другому, и процент пользователей ИЕ другой.

ganges | 15. 8 Ноября, 2008

Спасибо, Юра.

Genn | 16. 9 Ноября, 2008

Максим Покровский, и правильно делают.

cr_ | 17. 5 Декабря, 2008

как это в кс4 нет поддержки? низнаю как в более старых версиях, я использовал его в основном лишь с кс3, то там есть такая поддержка!
главное выбрать палитру Selective и появляется соответствующая галка

Developer | 18. 6 Апреля, 2009

забавненько.. хотя, видя “серо-белое уродство” пользователь бы уж задумался об апдейте браузера..

GodCow | 19. 23 Июня, 2009

Я обычно юзаю IePngFix. Хотя последнее время стараюсь обходиться без полупрозрачных изображений.

Я | 20. 16 Октября, 2009

http://clip2net.com/clip/m0/1255682327-clip-120kb.png

перемудрил походу с хайтеком

akella | 21. 16 Октября, 2009

Может ФФ притворяется кем-то? У меня вот http://img127.imageshack.us/img127/393/picture1jr.png =(

Yvelious | 22. 5 Февраля, 2010

Почему для картинки png8 c полупрозрачностью не срабатывает фильтр AlphaImageLoader или другие скрипты для отображениея полупрозрачности png в ie6?

Оставить комментарий