umade.ru

PNG, альфа прозрачность и Internet Explorer

Форматы изображений GIF и JPEG применяются практически с самого начала появления Всемирной Сети. Картинки стали неотъемлемой частью интернета, и без них интернет выглядел бы слишком строго и непривлекательно, и наверно не получил бы сегодняшнего всестороннего развития. Вот только очень жаль, что замечательный формат PNG до сих пор не принимает должного участия в развитии паутины.

Потребность в альтернативе формату GIF появилась благодаря лицензии компании Unisys. Все дело в том, что лицензия обязывала разработчиков ПО платить $5,000 в том случае, если программа включала в себя поддержку GIF, что особенно усложняло жизнь разработчикам бесплатных программ.

Патент для алгоритма сжатия на основе GIF был зарегистрирован ещё в 1985 году, но стал осуществляться в принудительном порядке только с 1995 года, когда разработчики почувствовали потенциал паутины и стали регистрировать интеллектуальную собственность. PNG практически во всех отношениях превзошел GIF.

Возможности PNG (ПиНГ) для разработчиков веб-сайтов гораздо привлекательней чем возможности GIF или JPEG. Главными преимуществами формата PNG являются альфа прозрачность, коррекция цвета, коррекция гаммы, более хорошее сжатие (чем GIF), поочередное сканирование строк (interlacing) и использование MIME type (img/png). Единственное, чем PNG не может похвастаться — анимацией. Для этого случая был создан формат MNG, который имеет все преимущества PNG, плюс циклы (loops), вырезания и другие свойства.

Альфа прозрачность (alpha transperency) является наверно самым привлекательным свойством PNG (тест альфа прозрачности). Веб-дизайнерам больше не нужно подстраивать картинки под задний фон или беспокоится о негладком тексте, так как PNG поддерживает действительную альфа прозрачность, т.е. 256 различных уровней (всего 65,536).

Всё это хорошо, но размер при этом становиться в 5-6 раз больше чем тот же самый JPEG. Такой объём файла ещё долго будет тормозить использование PNG-24 на веб-сайтах, так как большая часть пользователей сети используют обычные модемы, плюс забота о платном трафике пока перечеркивает все надежды. Ещё PNG может похвастаться поддержкой 48-битного цвета, т.е. 280 тысяч миллиардов уникальных цветов. Ещё нет мониторов, которые поддерживают столь большое количество цветов. Поддержка 48 битного цвета актуальна при использовании разных цветовых профилей, что не играет большой роли для создателей веб-сайтов.

Что касается PNG-8, то на сегодняшний день это единственная хорошая альтернатива формату GIF. Коррекция цвета и гаммы в формате PNG обеспечивает одинаковое отображение на всех мониторах, но при этом монитор дизайнера и монитор конечного пользователя должны быть откалибрированы, но не у всех правильная настройка монитора является приоритетом. Также многое зависит от программы, с помощью которой сохраняется или экспортируется изображение. Например Photoshop до сих пор не поддерживает PNG должным образом. Размер сохраняемого PNG-файла больше, чем может быть на самом деле. Также Photoshop не позволяет создавать альфа прозрачность в формате PNG-8 (Photoshop поддерживает только 1 битовую прозрачность), что существенно ограничивает преимущество в размере этого формата над PNG-24. К счастью, Macromedia позаботилась об этом лучше Adobe, и графический редактор Fireworks даёт дизайнеру больше возможностей для работы с PNG, чем это делает Photoshop.

Теперь о самой назойливой проблеме, связанной с использованием PNG на страницах интернета. Единственный современный браузер, не поддерживающий PNG — Internet Explorer. Вернее IE может отображать PNG, но не может отображать альфа прозрачность — свойство, в котором веб-дизайнеры нуждаются больше всего. Логично, что если изображение хотя бы немного прозрачно, то становится видно всё, что находится под этим изображением. Это безумно упрощает жизнь дизайнерам веб-сайтов. Вместо того, чтобы создавать видимость прозрачности на одной и той же картинке (ощущение того, что под ней что-то находится), можно просто сделать её прозрачной. Гениально!

Какими же были гениями создатели Internet Explorer, если после 9 лет существования PNG этот браузер до сих пор не поддерживает этого формата? Странно, но Internet Explorer 5.0 для Macintosh имеет великолепную поддержку PNG.

Ответственные сотрудники Microsoft всегда уходили от вопроса на тему поддержки PNG. Оказывается существует ходатайство, которое содержит недовольства такого отношения компании Билла к разработчикам веб-сайтов. Также ходатайство содержит просьбу к Microsoft исполнить свое обещание по поддержке PNG, которое было дано более 4 лет назад. Любой желающий может принять участие и подписаться.

Существуют много интересных способов для решения проблемы отображения PNG в Internet Explorer. Все эти способы используют специальный фильтр, который делает альфа прозрачность в этом браузере доступной реальностью.

Известно, что IE поддерживает различные эффекты и фильтры для картинок. Один из таких фильтров — AlphaImageLoader. Этот фильтр впервые появился в IE 5.5, и позволяет использовать 8-битовую прозрачность в PNG. Метод с использованием .htc файла на мой взгляд является оптимальным (ещё пример), но IE 5.0 остаётся без всякого внимания. Существует фильтр Alpha, который работает в IE 4 и выше, но я думаю этот способ не будут использовать веб-дизайнеры (если только PNG не является целью жизни). Даже AlphaImageLoader имеет много недостатков — страница загружается медленнее, иногда видны серые линии перед загрузкой картинки, нельзя использовать дополнительные фильтры и т.д.

На момент написания этой статьи, umade.ru использует PNG, но без альфа прозрачности. Данный формат в большинстве случаев выглядит лучше GIF, и при этом его размер меньше. Если не использовать альфа-канал, то я не вижу доводов, которые перевешивают в сторону GIF. Хотя есть один: иногда сайты, использующие PNG, выглядят темнее в IE чем например в Firefox или Opera.

По теме: статья про PNG на русском языке.

Всего оставлено 35 комментариев

  1. YouS 25 января 2005

    Так на заметку. <img style="FILTER: alpha(opacity=25)" src="image.*.PNG,GIF,JPG">

  2. Mac 29 января 2005

    Yous, на заметку – эти прибамбасы тока и работают на IE, да и то не на всех версиях.

    По истине человеческий браузер Safari от Apple показывает и проигрывает все что только можно себе представить. Игнорирование веяний и требобований все более удаляет людей от МСИЕ и винтеловской платформы в целом, тем более что iPod и Macmini уже сделали свое благородное дело ))))

  3. Курманов 5 февраля 2005

    Есть такой набор JavaScript примочек к интернет эксплореру, который включает в себя поддержку alpha transparency в PNG. Называется это IE7. Может кому-то будет полезно.

  4. MSD 7 августа 2005

    Что-то у меня не получается корректно отобразить png эксплохером с помощью .htc

    Давно сижу под Лисой, привык, что все правильно пишешь – все правильно видишь.

    А в IE c .htc png отображаются и даже прозрачность есть, но сверху на них рамка картинки рисуется, как будто картинки нет…

    Очень не хочется писать дурацкое optimized for…

  5. aj 16 сентября 2005

    htc не решает проблем с тенюшками, которые нужно положить в фон. Приходится писать в ccs’е для ie что-то такое:

    div.box{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’http://site.com/i/box-bg.png’, sizingMethod=’scale’);}

    2 MSD: нужно прописать в htc путь к однопиксельному прозрачному гифу.

  6. Athena 23 ноября 2005

    Статья хорошая.

    У меня получается отобразить .png как картинку. А вот интересно как использовать .png файл для фона при этом размножая его по х или у.

    Спасибо

  7. Никита 26 ноября 2005

    В CSS можно прописать следующее:

    background: url(kartinka.png) repeat-x;

    а для “размножения” по y

    background: url(kartinka.png) repeat-y;

  8. slesar 5 февраля 2006

    Если делать через фильтр, то теряем остальные браузеры. Надо писать разные варианты для IE и нормальных. Проще послать IE нах.

  9. Road Tripper 10 февраля 2006

    Slesar, ты дурак?
    Если не считать того, что IE использует большинство, то прочитай хотя бы статью, которую ты тут комментируешь…

  10. ~MoRpHeUs~ 12 февраля 2006

    Соглашусь с Road Tripper’ом, IE – пользуется основная масса тех потенциальных посетителей сайтов, над которымим мы с Вами трудимся. И соответственно при разработе сайта надо в первую очередь учитывать возможности ослика. Как боротся с PNG я пока не придумал, но предлагаю завести ветку на форуме (не важно на каком), и обсуждать все связанное с этим

  11. Road Tripper 12 февраля 2006

    Morpheus? Ты-то чего? В статье же все написано! А на остальное даны линки!

  12. Pavel Terentyev 27 февраля 2006

    –> Никита(7) Не работает размножение для измененных бэкграундов.. Перепробовал все!

    Мне нужно в фон ячейки таблицы положить png с альфаканалами. И размножить _только_ по горизонтали. Не получается нифига.
    Народ, помогите!

  13. Никита 27 февраля 2006

    Павел, минуту назад поробовал следующий код:

    background:#fff url(images/bodyback.png) repeat-x top;

    Всё работает.

  14. Серёга 15 апреля 2006

    Советую сюда тоже поглянуть http://www.tigir.com/alpha_png.htm

  15. Игорь Фролов 22 августа 2006

    Дело в том, что использовать PNG картинки в качестве бэкграунда к DIV где есть ссылки, то ссылки перестанут работать. Имеется в виду IE6 Windows. Об этом можно прочесть на этом
    сайте: http://www.satzansatz.de/cssd/tmp/alphatransparency.html
    Для меня, например, это критично. Я сделал PNG файлы как бэкграунды для плавающих слоев, соответственно, чтобы решить проблему нужно создавать еще внутренние wrapperы. Но это уже извините, не так весело :-( Мусорить контент ради хака?
    Так что я отказался от использования прозрачных PNG. Сейчас буду переделывать все бэки.

  16. Alinaki 27 октября 2006

    Автору статьи +1 за несколько предложенных вариантов :-)
    Курманову +2! Спасибо за ссылку.

  17. Alinaki 26 ноября 2006

    Сайты выглядят темнее, т.к. эксплорер еще и неправильно обрабатывает гамму пнг. Это убирается какой-то программой прямо в рисунке. Вспомню какой – напишу.

  18. Pavel Terentyev 14 декабря 2006

    Серёга, спасибо.
    Никита, в IE работает?

  19. Kerill 2 февраля 2007

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

  20. Тимоха 26 февраля 2007

    Сергей, спасибо за ссылку PNG-прозрачность в IE 5.5-6 ! Там сказано и о ссылках на PNG фоне, и о более темном отображении, и тормозах которые могут встретится (в форуме сказано тамошнем Обсуждение статьи в форуме).

  21. Vadim 20 марта 2007

    Alinaki, это где-то здесь http://hsivonen.iki.fi/png-gamma/,
    Есть еще уменьшалка png файлов pngcrush(http://pmt.sourceforge.net/pngcrush/)

  22. Dutch 27 марта 2007

    Привет ребята!
    Тема очень интересная.
    Вот вышел ИЕ7 но поговаривают, что он так же не поддержимвает пнг :(
    Пока нето желания перелазить на ИЕ7 ибо сижу или в ФФ или в Опере.
    Свои дизайны приходится верстать с использованием обычной порезки графики и выдумывать разные маневры дабы сделать нужные тени в бэкграунде.
    Конечно пнг с его прозрачностью облегчило бы жизнь. Но пока есть то что есть :)

  23. Стёпа 12 апреля 2007

    В IE7 нормально отображается прозрачность PNG. В том и проблема. Сверстал страницу с использованием PNG, проверял в Firefox – нормуль, в IE7 – нормуль. Решил протестить на другом компе с IE6 – пипец. Альфа прозрачность не поддерживается. Картинки, в тех местах где прозрачные – серые. :-(

  24. Александр 14 апреля 2007

    Вот как я решил эту проблему с использованием php. Все просто: пишем функцию на php, которая в зависимости от браузера возвращает правильный код тега img, подстроенный на браузер посетителя.
    И не надо мучаться со java-скриптами и стилями.

    < ?php
    function getPNG($url) {
    if (eregi('MSIE',$_SERVER['HTTP_USER_AGENT'])) {
    return " src=\"/images/none.gif\" style=\"filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='".$url."')\"";
    } else {
    return " src=\"".$url."\"";
    }
    }
    ?>

    >

  25. radiogolova 6 мая 2007

    Я иногда использую следующий способ получения прозрачности для картинки. Вставляю PNG в flash-ролик и на страницу размещаю готовый ролик вместо картинки, задав ему параметр
    param name=”wmode” value=”transparent”
    Но и у него есть минусы – старые флэш-плееры этот параметр не поддерживают.

  26. Юнус 4 июня 2007

    Здесь приводится решение для IE младше 7й версии
    http://www.digital-web.com/articles/web_standards_creativity_png/
    Признаюсь, что сам не пробовал.

  27. overall 15 сентября 2007

    Александр, Спасибо!

  28. Zakobrezki 25 сентября 2007

    Любая нестандартная надстройка над IE – моветон. Попробуйте объяснить заказчику (потенциальному пользователю), что ему надо выполнить дцать танцев с бубном, чтобы твой сайт выглядел правильно. Поэтому пока остаётся изголяться с вёрсткой.

  29. Снова Я 9 октября 2007

    Minimall никакой прогой)) гиф имеет 256 цветов и не поддерживает альфа-прозрачность… в отличии от PNG 32 :)

  30. The_VarMaster 6 января 2008

    Александр, тот код, что вы написали можно сделать работающим значительно быстрее и с меньшим потреблением ресурсов, если не использовать регулярных выражений (eregi() тут совершенно ни к чему!). Ваш код (исправленный):
    <?php<br />
    function getPNG($url) {<br />
    if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) {<br />
    return " src=\"/images/none.gif\" style=\"filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='".$url."')\"";<br />
    } else {<br />
    return " src=\"".$url."\"";<br />
    }<br />
    }<br />
    ?><br />
    <img <=getPNG("/images/item201.png")?>>

    Мой код:
    &lt;? echo '&lt;img '.((strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) ? 'src="/images/none.gif" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' : 'src="').'/images/item201.png" /&gt;'; ?&gt;

  31. Streamer 10 января 2008

    Незнаю как Вас благодарить! Способ со скриптом работает! Я уже хотел было пойти стреляться, как тут Вашу статью увидел. Огромное спасибо!!!

  32. Dimitry 13 июня 2008

    Именно Прозрачный PNG с repeat-x…
    В сообщении ссылка на хороший скрипт, и tigir.com тоже замечательно , но не получается размножить прозрачный PNG с помощью repeat-x. Например, чтобы сделать забор на траве…
    Вот здесь
    http://thedesignspace.net/MT2archives/000103.html и http://thedesignspace.net/css/transparentPNG.htm
    как бы есть решение, или автор лукавит? Исходный код примера и предложенный скрипт вообще работают, но с repeat-x, дают все тот же серый… Кто нибудь сможет разобрать страницу автора с примером, а не с теорией? И по отдельности, включая картинки сложить куда-нибудь?

  33. kirakl 19 июня 2008

    А как подключить php код, чтоб все работало?

  34. llexa 15 июля 2008

    в приведенном примере повтора картинки нету, она просто растягивается

  35. ЭФНО 16 июля 2008

    Есть еще другая проблема: png иногда на ie6 вообще не показывается. Необходимо явно указывать размеры картинки иначе может и не показаться вообще. В общем лучше везде заменять на gif, меньше проблем.

Поиск по сайту

Из последнего

Архив статей и записей