Форматы изображений 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 на русском языке.
Так на заметку.
<img style="FILTER: alpha(opacity=25)" src="image.*.PNG,GIF,JPG">Yous, на заметку – эти прибамбасы тока и работают на IE, да и то не на всех версиях.
По истине человеческий браузер Safari от Apple показывает и проигрывает все что только можно себе представить. Игнорирование веяний и требобований все более удаляет людей от МСИЕ и винтеловской платформы в целом, тем более что iPod и Macmini уже сделали свое благородное дело ))))
Есть такой набор JavaScript примочек к интернет эксплореру, который включает в себя поддержку alpha transparency в PNG. Называется это IE7. Может кому-то будет полезно.
Что-то у меня не получается корректно отобразить png эксплохером с помощью .htc
Давно сижу под Лисой, привык, что все правильно пишешь – все правильно видишь.
А в IE c .htc png отображаются и даже прозрачность есть, но сверху на них рамка картинки рисуется, как будто картинки нет…
Очень не хочется писать дурацкое optimized for…
htc не решает проблем с тенюшками, которые нужно положить в фон. Приходится писать в ccs’е для ie что-то такое:
div.box{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’http://site.com/i/box-bg.png’, sizingMethod=’scale’);}
2 MSD: нужно прописать в htc путь к однопиксельному прозрачному гифу.
Статья хорошая.
У меня получается отобразить .png как картинку. А вот интересно как использовать .png файл для фона при этом размножая его по х или у.
Спасибо
В CSS можно прописать следующее:
background: url(kartinka.png) repeat-x;а для “размножения” по y
background: url(kartinka.png) repeat-y;Если делать через фильтр, то теряем остальные браузеры. Надо писать разные варианты для IE и нормальных. Проще послать IE нах.
Slesar, ты дурак?
Если не считать того, что IE использует большинство, то прочитай хотя бы статью, которую ты тут комментируешь…
Соглашусь с Road Tripper’ом, IE – пользуется основная масса тех потенциальных посетителей сайтов, над которымим мы с Вами трудимся. И соответственно при разработе сайта надо в первую очередь учитывать возможности ослика. Как боротся с PNG я пока не придумал, но предлагаю завести ветку на форуме (не важно на каком), и обсуждать все связанное с этим
Morpheus? Ты-то чего? В статье же все написано! А на остальное даны линки!
–> Никита(7) Не работает размножение для измененных бэкграундов.. Перепробовал все!
Мне нужно в фон ячейки таблицы положить png с альфаканалами. И размножить _только_ по горизонтали. Не получается нифига.
Народ, помогите!
Павел, минуту назад поробовал следующий код:
background:#fff url(images/bodyback.png) repeat-x top;Всё работает.
Советую сюда тоже поглянуть http://www.tigir.com/alpha_png.htm
Дело в том, что использовать PNG картинки в качестве бэкграунда к DIV где есть ссылки, то ссылки перестанут работать. Имеется в виду IE6 Windows. Об этом можно прочесть на этом
сайте: http://www.satzansatz.de/cssd/tmp/alphatransparency.html
Для меня, например, это критично. Я сделал PNG файлы как бэкграунды для плавающих слоев, соответственно, чтобы решить проблему нужно создавать еще внутренние wrapperы. Но это уже извините, не так весело 🙁 Мусорить контент ради хака?
Так что я отказался от использования прозрачных PNG. Сейчас буду переделывать все бэки.
Автору статьи +1 за несколько предложенных вариантов 🙂
Курманову +2! Спасибо за ссылку.
Сайты выглядят темнее, т.к. эксплорер еще и неправильно обрабатывает гамму пнг. Это убирается какой-то программой прямо в рисунке. Вспомню какой – напишу.
Серёга, спасибо.
Никита, в IE работает?
Народ, для меня проблема остается открытой нараспашку! Когдя я заявляю директору, что IE не программа, он отвечает, что тупых клиентов, которые пользуются только IE,и даже не слышали про Opera, это обстоятельство совершенно не волнует. Приходится делать две версии сайта под разные браузеры. Или один вариант – так, для души.
Сергей, спасибо за ссылку PNG-прозрачность в IE 5.5-6 ! Там сказано и о ссылках на PNG фоне, и о более темном отображении, и тормозах которые могут встретится (в форуме сказано тамошнем Обсуждение статьи в форуме).
Alinaki, это где-то здесь http://hsivonen.iki.fi/png-gamma/,
Есть еще уменьшалка png файлов pngcrush(http://pmt.sourceforge.net/pngcrush/)
Привет ребята!
Тема очень интересная.
Вот вышел ИЕ7 но поговаривают, что он так же не поддержимвает пнг 🙁
Пока нето желания перелазить на ИЕ7 ибо сижу или в ФФ или в Опере.
Свои дизайны приходится верстать с использованием обычной порезки графики и выдумывать разные маневры дабы сделать нужные тени в бэкграунде.
Конечно пнг с его прозрачностью облегчило бы жизнь. Но пока есть то что есть 🙂
В IE7 нормально отображается прозрачность PNG. В том и проблема. Сверстал страницу с использованием PNG, проверял в Firefox – нормуль, в IE7 – нормуль. Решил протестить на другом компе с IE6 – пипец. Альфа прозрачность не поддерживается. Картинки, в тех местах где прозрачные – серые.
🙁
Вот как я решил эту проблему с использованием php. Все просто: пишем функцию на php, которая в зависимости от браузера возвращает правильный код тега img, подстроенный на браузер посетителя.
И не надо мучаться со java-скриптами и стилями.
Я иногда использую следующий способ получения прозрачности для картинки. Вставляю PNG в flash-ролик и на страницу размещаю готовый ролик вместо картинки, задав ему параметр
param name=”wmode” value=”transparent”
Но и у него есть минусы – старые флэш-плееры этот параметр не поддерживают.
Здесь приводится решение для IE младше 7й версии
http://www.digital-web.com/articles/web_standards_creativity_png/
Признаюсь, что сам не пробовал.
Александр, Спасибо!
Любая нестандартная надстройка над IE – моветон. Попробуйте объяснить заказчику (потенциальному пользователю), что ему надо выполнить дцать танцев с бубном, чтобы твой сайт выглядел правильно. Поэтому пока остаётся изголяться с вёрсткой.
Minimall никакой прогой)) гиф имеет 256 цветов и не поддерживает альфа-прозрачность… в отличии от PNG 32 🙂
Александр, тот код, что вы написали можно сделать работающим значительно быстрее и с меньшим потреблением ресурсов, если не использовать регулярных выражений (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")?>>
Мой код:
<? echo '<img '.((strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) ? 'src="/images/none.gif" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' : 'src="').'/images/item201.png" />'; ?>Незнаю как Вас благодарить! Способ со скриптом работает! Я уже хотел было пойти стреляться, как тут Вашу статью увидел. Огромное спасибо!!!
Именно Прозрачный PNG с repeat-x…
В сообщении ссылка на хороший скрипт, и tigir.com тоже замечательно , но не получается размножить прозрачный PNG с помощью repeat-x. Например, чтобы сделать забор на траве…
Вот здесь
http://thedesignspace.net/MT2archives/000103.html и http://thedesignspace.net/css/transparentPNG.htm
как бы есть решение, или автор лукавит? Исходный код примера и предложенный скрипт вообще работают, но с repeat-x, дают все тот же серый… Кто нибудь сможет разобрать страницу автора с примером, а не с теорией? И по отдельности, включая картинки сложить куда-нибудь?
А как подключить php код, чтоб все работало?
в приведенном примере повтора картинки нету, она просто растягивается
Есть еще другая проблема: png иногда на ie6 вообще не показывается. Необходимо явно указывать размеры картинки иначе может и не показаться вообще. В общем лучше везде заменять на gif, меньше проблем.