Альфа-каналы в PNG-8
Мало кто знает, но они действительно существуют.
Проблема полупрозрачных картинок медленно умирает вместе с 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-8 и тип прозрачности «Alpha Transparency». Видно также, что в палитре все цвета имеют прозрачность кроме одного (крайнего справа)
Почему этого нет в Photoshop, загадка.
Также существуют утилиты, превращающие PNG-24 в PNG-8. Естественно, при этом качество страдает, но часто с этим можно жить.
Живой пример
Для примера, я сохранил одну и ту же картинку в трех форматах: PNG-24, PNG-8 обычный, и PNG-8 с альфа-каналами (из Fireworks). Все три поместил на узорчатый фон. Вот что вышло:
PNG картинки в Firefox
Ничего особо интересного, кроме размеров картинок. Обратите внимание на вес PNG-24 и PNG-8 файлов, при почти идентичном отображении.
А теперь, в ИЕ:
PNG картинки в IE. Хорошо видно «серо-белое уродство» упомянутое ранее
Вуаля! То, что называется «graceful degradation»!
Сами смотрите, если не верите. ;)
За фон благодарен.
Польза
Вряд ли это знание поможет вам познакомиться с девушкой вашей мечты, или начать наконец делать зарядку по утрам. Но, некоторая польза все же есть.
Во-первых, это экономит трафик. Во-вторых, в большинстве случаев отлично деградирует в ИЕ. То есть, можно применять для всяких некритичных украшательских штучек. В IE будет отображен обычный PNG-8 (а ля GIF), а для всех остальных полупрозрачная красота.
Разумеется, в некоторых случаях картинки будут казаться выщербленными в IE (резкие края), но никто и не говорит, что этот способ панацея.
Еще по теме
Эта техника, кстати, в некоторых случаях могла бы чуть-чуть упростить вот этот супер-универсальный трюк Виталия. Другие заметки по теме:
- Библиотека превращающая PNG-24 картинку в PNG-8 с альфа-каналами. (и версия c интерфейсом для Mac OS)
- HOWTO: cross-browser alpha PNGs
- PNG8 alpha transparency from Fireworks
- Статья на Sitepoint
- Пример трёх типов PNG из заметки
Уверен, кто-то уже это использовал. Знание это совсем не новое, но малоизвестное почему-то. Потому, был бы рад если бы вы поделились опытом по теме.
Всё новое — хорошо забытое старое :)
http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
Да, спасибо, в посте еще две ссылки на такие же старые статьи, но при этом мало кто об этом знает все равно =) Я специально опросил коллег, тема малоизвестная и малоиспользуемая.
И эту добавил в пост. =)
P.S.: я, кстати, об этой штуке не знал (как минимум не использовал), хотя и видел эти картинки про лампочки когда-то…
Sam, та то вже весь інтернет знає. Сьогодні в Акєли звання — Капітан Очєвідность ;)
Юрко, не akella прав на самом деле. Я тоже у себя несколько раз об этом напоминал. Каждый раз были благодарные.
Наверное, напомню ещё раз ссылкой на статью.
Супер, для меня это отличная новость! Не знал, спасибо Юра!
Как раз решил отказываться от поддержки IE в своих проектах и думал что может быть не критичного для пользователей IE в интерфейсе сайта.
Знакомая штучка!
Огромный плюс, что не нужны никакие фильтры и разного рода JS, обычная картинка. На стадии медленного (но уверенного) заката IE6 - это отличная вешь!
http://www.artlebedev.ru/tools/technogrette/img/png-4/
Для конвертации полупрозрачного PNG-24 в PNG-8 использую утилиту OptiPNG.
О, спасибо, за ссылку! Мне очень пришлась по душе цитата оттуда:
В любом случае спасибо, наверняка кому-то пригодится и поможет разобраться лучше!
Почему этого нет в Photoshop? Потому что создание макетов для веб — для Photoshop дело десятое. Его основная задача — обработка фото, цветокоррекция, подготовка к печати и прочее, прочее, прочее… Последние две версии хоть перестали в png-24 по поводу и без повода альфа-канал цеплять %)
А вот FireWorks изначально разрабатывался как инструмент веб-дизайнера, потому он умеет больше. Настолько больше, что в Эдоб решили не развивать поделку под названием ImageReady, и поддерживают FireWorks. В отличие от FreeHand, например.
Появилась ли поддержка в CS4? Если не забуду, гляну в понедельник.
@Михаил, объяснение мне кажется хорошим, но все равно ведь - это было так просто =) всего лишь добавить лишнюю галочку при экспорте в PNG… Но, мы конечно не знаем всех подводных камней этой фичи :(
За взгляд в CS4 был бы очень благодарен!
[…] Альфа-каналы в PNG-8 - проблемность альфа-каналов и полу прозрачности PNG […]
Интересно, но в целом, заказчики не идут на компромиссы когда речь касается кроссбразерности. Что работает у людей, то должно работать и в IE. Один в один.
В CS4 нет поддержки.
Согласен, тем не менее, я работал с одним американским порталом, где это было принято одной из стандартных практик разработки. Вплоть до того, что дизайнер отрисовывая макеты заботился о применимости этой техники. Но у них конечно всё немного по-другому, и процент пользователей ИЕ другой.
Спасибо, Юра.
Максим Покровский, и правильно делают.
как это в кс4 нет поддержки? низнаю как в более старых версиях, я использовал его в основном лишь с кс3, то там есть такая поддержка!
главное выбрать палитру Selective и появляется соответствующая галка