Автор Jeff Croft

Перевод: Sawarogu

PNG, GIF, и JPEG

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

Что представляет собой PNG?

Что если я пожелаю разместить свой логотип на всех своих фотографиях? Да, конечно можно открывать каждую фотокарточку в фотошопе накладывать логотип и пересохранять изображение. Однако такой подход ужасно непрактичен, когда речь идет о тысячах фотографий, которые к тому же часто обновляются — и иногда обновляются когда я не за компом (например когда я отправляю фото на Flickr со своего телефона). Ведь было бы намного удобней если логотип добавится автоматически? PNG может помочь в этом.

PNG, обычно произносят как “ping,” что расшифровывается в Portable Network Graphics. Это формат растрового изображения, сжатого без потери качества, изначально формат создан в замену повсеместному GIF'у, который требовал приобретения лицензии на использование производителями графических программ (GIF/LZW патент ныне уже истек, так что этот фактор уже не играет значения). PNG является международным стандартом (ISO IEC 15948:2003) а также официальной рекомендацией W3C.

Кроме того, что этот формат изначально был бесплатен, PNG предоставляет и другие преимущества для дизайнеров в отличие от формата GIF:

Стоит упомянуть лишь то, что PNG не позволяет анимировать изображение, как это позволяет GIF. Существует родственный стандарт, названный Multiple-image Network Graphics (MNG) который позволяет и то и то, но он пока что не имеет широкой поддержки броаузеров или графических программ.

Так почему GIF до сих пор так популярен?

После прочитанного вы наверное подумаете почему же PNG до сих пор не самый распространенный формат в сети? Ответ в том, что большинство заявлений производителями браузеров о поддержке формата сильно преувеличены, если не сказать что являются иногда откровенной ложью.

Internоet Explorer 6 и более ранние версии не поддерживают весь спектр возможностей PNG (включая альфа прозрачность), и люди думают что Internet Explorer не поддерживает PNG вообще, или по крайней мере прозрачность. В реальности, Internet Explorer 5 и 6 поддерживают достаточно большую часть PNG спецификации, чтобы можно было использовать PNG так же как (а то и лучше) неанимированные GIF изображения. Все остальные популярные браузеры, включая Firefox, Netscape 6 и выше, Mozilla, Opera 6 и выше, Safari, и Camino— имеют полную поддержку PNG прозрачности.

Несмотря на все недоразумения с поддержкой браузерами, GIF'ая поддержка анимации это ключ успеха этого формата. В последние годы, однако, такое использование гифа становится менее популярным, чем другие технологии (особенно Flash) позволяющие создавать анимацию.

Прозрачность это ключевая возможность что GIF, что PNG поэтому один из форматов выбирается дизайнером для создания специфических графических элементов. Несмотря на то, что PNG имеет более широкую поддержку прозрачности, веб дизайнерам часто приходится создавать GIF версии изображений для поддержки более старых версий браузеров. Используя CSS, возможно (и частенько так и делают) отправлять готовые изображения более ранним браузерам и высококачественные PNG браузерам, которые их поддерживают, но создание двух изображений, это дополнительная трата времени для дизайнера, и поэтому часто люди сводят все к упрощенному варианту использования одного лишь GIFа.

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

А как насчет JPEG?

JPEG, это еще один повсеместно используемый в вебе графический формат, почти всегда это лучший вариант чем PNG или GIF для фотографических изображений, PNG не предназначался для замены JPEGа. Уровень сжатия JPEG (который снижает качество изображения при каждом сохранении) позволяет создавать меньшие по размеру файлы, нежели PNG, когда речь заходит о фотографиях. PNG же позволит сделать меньшие по размерам файлы, если речь заходит о тексте, штриховых рисунках, логотипах, заливках цветом, и т.д..

Примеры примения PNG

Теперь давайте рассмотрим несколько примеров использования PNG в вэб дизайне.

Градиент

В последние несколько лет градиент (плавный переход между двумя и более цветами) стал очень часто применяться дизайнерами. Особенно популярна едва заметная градиентная заливка, которая добавляет глубины и фактуры.

GIF иногда является хорошим решением для создания градиентов, например на простых градиентах, всего в два цвета. Однако, ограничение GIF 256-ю цветами часто не позволяет создать плавные переходы в сложных градиентных заливках. JPEG, с другой стороны, может позволить сделать такие градиенты, но при этом вы получите размер файла несколько больше чем хотелось бы, и даже если градиенты в JPEG достаточно хороши, не забывайте что JPEG все же имеет потерю качества при сжатии, что означает что переделанное изображение уже никогда не будет так же хорошо как оригинальное.

Рассмотрим типичную градиентную подложку, используемую, в стилях для кнопок, боксов, и т.д. Он может выглядеть как на рисунке 1. по часовой стрелке, начиная слева, сверху, оригинальное (несжатое) изображение, GIF версия, PNG версия, и наконец JPEG версия. как вы можете заметить PNG имеет наименьший размер файла (515 байт), что в четыре раза меньше чем изображение в GIF. JPEG немного больше PNG 637 байт, но также он в низшем качестве, из-за соответствующей потери при сжатии (хотя, возможности человеческого восприятия ставят под сомнение визуальные различия).

Рисунок 1. Photoshop панель Save For Web отображает разницу в размерах файлов и качестве для исходного изображения в разных форматах

Изображение необходимое для любого бэкграунда

Иногда необходимо создать изображение, которое должно одинаково смотреться на любой подложке, самый частый пример это логотипы и иконки. В таких ситуациях традиционно использовался GIF, но существует несколько причин, почему PNG может стать лучшим выбором. PNG почти всегда выигрывает по размерам файла для логотип и небольших изображений, плюс к этому возможность использования прозрачности PNG позволяет создать единый файл для использование поверх различных бэкграундов. PNG имеет битовую прозрачность, также как и GIF, но также возможна и прозрачность на основе альфа канала, при которой пиксель может быть полупрозрачным, в отличает от простого — прозрачный или нет. Использование букв увеличит размер файла — иногда больше чем (битовая) прозрачность GIFа — но зато возможно сглаживание (antialiasing) кромок вашего рисунка, что позволит более элегантно наложить его на подложку.

Для сайта "KTKA Channel 49 News in Topeka" World Online создали погодную иконку, показывающую текущую погоду в шапке сайта, но благодаря небольшому программному коду в шапке меняется цветовая схема, в зависимости от времени суток, следовательно для восхода и для заката иконки должны одинаково хорошо накладываться. Взгляните на рисунки 2 и 3.

Рисунок - 2. 49abcnews.com шапка, день

Рисунок 3. 49abcnews.com шапка, ночь

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

Если бы это был GIF, то пришлось бы ограничиться битовой прозрачностью GIFа, и результат выглядел бы как рисунок 4, думаю каждый согласится что это не столь хорошо выглядит как предыдущие.

Рисунок 4. 49abcnews.com шапка, ночь, используется GIF вместо PNG

Полупрозрачное наложение в HTML

Очень часто встречается дизайнерская техника, при которой поверх фото идет небольшая полупрозрачная область, на которой обычно размещают текст. Такая техника позволяет создать область, где текс становится нормально читаемым, и при этом вы не теряете фото в целом. Дизайнер Wilson Miner использует такую технику на ювелирном сайте Gingeroot , Рисунок 5.

Рисунок 5. Gingeroot, дизайнер Wilson Miner

Wilson включает такой прозрачный регион и текст в JPEG изображение, которое предварительно создается в Photoshop. Получается хороший результат, и он полностью соответствует потребностям сайта, но что делать если текст в полупрозрачной области надо часто менять? возможно даже для каждого уникального посетителя... в таком случае будет непрактично помещать текст в изображение. Текст необходимо накладывать с помощью HTML и CSS, используя альфа каналы PNG мы можем сделать тоже самое, что и Wilson, но не вписывая текст непосредственно в изображение.

Начнем с фотографии девочки, создадим простейшую XHTML страницу с базой стилей CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
  <head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
  
 		<title>Haley's web site</title>     

 	<style>       

body 

{  
 font-family: "Lucida Grande", Helvetica, Arial, sans-serif;   

 background-color: #304251;        

 color: #304251;          

 margin: 20px auto;     

 width: 720px;       

}         
#feature 

{         
 position: relative; 

 width: 720px;  

 height: 439px;

}        
#feature-content 

{          
 position: absolute; 

 bottom: 0;  

 left: 0;   

 height: 125px; 

 width: 720px;   

 background-color: #dfdfdf;

}        
#feature-content h1 

{          
 margin: 0

 padding: 0;

 line-height: 125px

 padding: 0 30px;

 font-weight: normal;
 font-size: 2.3em;    
    
}       
#feature-content a 

{          
 float: right; 

 font-size: .6em; 

 color: #fff;     

 text-decoration: none;   

 text-transform: uppercase; 

}     
 </style>   

 </head>   

 <body>     

 <div id="feature">  

      <img src="haley.jpg" alt="Haley Madysan Croft" />
 
      <div id="feature-content"> 
      
          <h1>Sweet. Smart. Beautiful. 
<a href="/haley" title="Haley Madysan Croft">Learn more &raquo;</a></h1>  

      </div>      

</div>   

</body>  

</html>

С таким кодом, мы в той или иной степени повторили технику сайта Gingeroot, пока только без прозрачности, рисунок 6.

Рисунок 6. Эмуляция стиля Gingeroot HTML и CSS, без прозрачности

Теперь создадим в Photoshop изображение с размером в один пиксель, зальем изображение светло синим цветом и установим прозрачность слоя в 70%. И наконец сохраняем изображение Photoshop'а в формате PNG-24. Теперь стоит просто использовать это изображение в качестве подложки к нашей области перекрытия, рисунок 6.

#feature-content 

{

 position: absolute;

 bottom: 0;

 left: 0;

 height: 125px;
 width: 720px;

 background-image: url('transparent.png');  

} 

В итоге мы добились того же эффекта, но используя HTML CSS и текст, наш вариант более гибок, рисунок 7.

Рисунок 7. Добавлена прозрачность с помощью PNG

Wilson Miner использует похожую технику в другом месте сайта Gingeroot. На страницах, где показаны товары, прозрачные PNG используются для обозначения товаров распродажи в левом верхнем углу фото, рисунок 8. Создав один раз изображение On Sale, и сохранив его с прозрачностью в формате PNG, Wilson избежал необходимости создавать две версии каждого товара с флагом распродажи и без оного.

Рисунок 8. Gingeroot раздел колье PNG изображение с прозрачностью наложено поверх фото продукта с меткой распродажа (On Sale).

Еще один креативный примерчик от дизайнера Bryan Veloso, который использовал прозрачное PNG изображение внизу страницы для создания эффекта затухания, получается что текст как бы появляется из ниоткуда, когда вы прокручиваете страницу. Эффект можно посмотреть на страницах Revyver.com ( рисунок 9 и10) лучше его увидеть, чем описывать. В дополнение рисунок дерева поверх основного контента создает неожиданный визуальный эффект.

Рисунок 9. “fade-in” эффект при прокрутке текста выполнен с использованием прозрачного PNG.

Рисунок 10. футер в Photoshop, видно использование альфа каналов для создания эффекта.

Водяной знак

Еще одна часто применяемая техника, это создание вотермарков поверх изображений. Это делается чисто для визуального восприятия, но так же может служить указанием авторских прав на оригинал изображения.

На моем личном сайте (рисунок 11), я разместил большую галерею фотографий (примерно больше 200 фото). Эти фото на самом деле загружены на Flickr, популярное фотохранилище, и они отображаются на моем сайте через API Flickr'ка .

Рисунок 11.

Что, если я захочу разместить свое личное логотип поверх всех моих фотографий? Да, конечно можно открыть каждую из них в фотошопе, наложить логотип, и сохранить изображение, но это займет ужасно много времени, если вы имеете дело с сотнями фото, которые к тому же могут часто обновляться, к тому же они могут обновляться когда под рукой нет компьютера (например, когда я заливаю фото на Flickr с мобильного). Разве не было бы замечательно, если бы лого добавлялось автоматически? PNG поможет нам сделать это.

HTML код отображающий фото на странице выглядит так:

<a class="photo-container" href="http://www.flickr.com/photos/jcroft/2622915/">
 
 <img class="full-size-photo" src=http://static.flickr.com/2/2622915_8b78c1207d.jpg 
alt="CTA, a photo by Jeff Croft" />
  
</a>

Я создал изображение своего логотипа, размером 80 на 80 пикселей в белом цвете и установил прозрачность в 50%. Сохранив его в фотошопном стандарте PNG-24, что бы 50% прозрачность осталась в итоговом PNG изображении, а потом просто добавил кусок HTML кода:

<a class="photo-container" href="http://www.flickr.com/photos/jcroft/2622915/">  

 <img class="full-size-photo" src="http://static.flickr.com/2/2622915_8b78c1207d.jpg" 
alt="CTA, a photo by Jeff Croft " />

 <img class="watermark" src="http://media.jeffcroft.com/img/core/jeffcroft_logo_watermark.png"  
alt="Watermark" />  

</a> 

Немного CSS чтобы установить ватермарк в нужное место:

a.photo-container 

{    
 position: relative;   

 display: block;  

}   
img.watermark 

{    
 position: absolute;  
 top: 2em;    

 left: 1em;  

} 

В результате вотермарк добавился на фото, но фактически, это отдельное изображение в формате PNG наложенное сверху, Рисунок 12. Добавив это в свой макет CMS, я получил наложенное лого поверх всех изображений, не обрабатывая ни одного из пары сотен фото.

Рисунок 12.

Трафарет

Еще один способ применения PNG изображений и альфа прозрачности, это скрытие картинки под PNG по трафарету. Технически, это то же самое, что мы проделали только что с вотермарком, но достигается другой визуальный эффект. На этот раз я сделаю в фотошопе большую версию своего лого, вместо того чтобы залить лого белым цветом, я сделаю его прозрачным, а всю остальную картинку белой, так как бэкграунд страницы тоже белый, Рисунок 13.

Рисунок 13

Как я говорил, технические аспекты очень похожи как при создании вотермарка, начнем с HTML:

<a class="photo-container" href="http://www.flickr.com/photos/jcroft/2622915/"> 

 <img class="full-size-photo" src="http://static.flickr.com/2/2622915_8b78c1207d.jpg" 
 alt="CTA, a photo by Jeff Croft" />   

 <img class="mask" src="http://media.jeffcroft.com/img/core/jeffcroft_logo_mask.png"
 alt="Mask" />  

</a>

А теперь CSS:

a.photo-container 

{   
 position: relative; 
 display: block;  

}   
img.mask 

{   
 position: absolute;    
 top: 0;   
 left: 0;  
} 

Посмотрите на рисунок 14.

Рисунок 14. трафарет наложен поверх основного фото

Меняющая цвет иконка

Используя технику маскировки в предыдущем примере, некоторые создают иконки, меняющие цвет используя только CSS. идея проста и гениальна: разместить прозрачную картинку с символом иконки поверх области с одноцветным бэкграундом в CSS, и у вас получится иконка. просто изменяя цвет подложки в CSS вы можете менять цвет иконки.

Давайте возьмем для примера спортивный набор иконок, рисунок 15.

Рисунок 15.

Я создал белые иконки с прозрачным рисунком, точно так же как с логотипом в предыдущем примере, Рисунок 16.

Рисунок 16

После выставления нужного размера (в данном случае 48 на 48 пикселей), сохраняем в фотошопе в формате PNG-24. Теперь очередь создания XHTML который содержит все изображения:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    

<head>      

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    
<title>OMG Sports Icons!</title>   
   
<style>        

img 

{         
 background-color: #cc0000;    

}      
</style>    

</head>    

<body>   
  
 <img src="running.png" alt="Running" /> 
 <img src="biking.png" alt="Biking" />     

 <img src="skiing.png" alt="Skiing" />     

 <img src="soccer.png" alt="Soccer" />    

</body>  

</html>

Я выбрал #cc0000 (ярко красный) в качестве бэкграунда для картинок в этом файле, в результате получились ярко красные иконки, Рисунок 17. Обратите внимание на хорошо сглаженные края, спасибо сглаживанию в PNG для полупрозрачных пикселей.

Рисунок 17.

Как вы видите на рисунке 18, я могу сменить цвет иконок, просто поменяв значение цвета подложки в CSS:

img 
{    
 background-color: #000066;  

}

Рисунок 18.

Такая простая смена цвета может быть очень полезна, когда вам необходимо сделать редизайн своего сайта, и вместо переделывания всех иконок, вы просто меняете цвет в CSS. Также это великолепный способ сделать отличный ролловер эффект. Для примера вы можете использовать красный для обычных ссылок и голубой для : hover :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">   
 
<head>      

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
   
<title>OMG Sports Icons!</title>      

<style>        

a:link img,  a:visited img, a:active img 

{         
 background-color: #cc0000;        

}         
a:hover img 

{         
 background-color: #000066;    

}      
</style>    

</head>    

<body>      

 <a href="/running/"><img src="running.png" alt="Running" /></a>

 <a href="/biking/"><img src="biking.png" alt="Biking" /></a>     

 <a href="/skiing/"><img src="skiing.png" alt="Skiing" /></a>     

 <a href="/soccer/"><img src="soccer.png" alt="Soccer" /></a>    

</body>  

</html>

Можно так же использовать и дополнительные CSS стили для придания неповторимых эффектов вашим иконкам, например рамка (рисунок 19):

img 

{   
 background-color: #000066; 
 padding: 2px;  

}

Рисунок 19.

В каких браузерах это работает?

Я понимаю о чем вы подумали: вся эта прозрачность действительно выглядит заманчивым инструментом, но что насчет практического применения?

Хорошая новость в том, что почти все современные браузеры полностью поддерживают PNG, включая и альфа-каналы. Safari (все версии), Firefox (все версии), Opera (версия 6 и выше), Netscape (версия 6 и выше), и Mozilla (все версии) с радостью исполнят наши капризы. Плохая новость в том, что один браузер, который еще не упомянут это повсеместный: Internet Explorer.

Internet Explorer 6 и ниже не поддерживают альфа каналы в PNG формате. Учитывая то что этот браузер "выбрали" большинство пользователей Интернета, то большинство веб-мастеров и дизайнеров держатся подальше от PNG. Но с релизом Internet Explorer 7, наконец, появилась полная поддержка PNG и альфа прозрачности. Кроме того, существуют способы заставить Internet Explorer 6 и более ранние обрабатывать альфа прозрачность в PNG. Так что если вы хотите использовать эти эффекты, ничто не должно вас останавливать. Internet Explorer 6 и более ранние версии просто потребуют немного больше труда, но все же использование PNG в них возможно.

Обходные пути для Internet Explorer: AlphaImageLoader

Internet Explorer включает несколько собственных фильтров, они используются в CSS, но не являются частью ни одной официальной спецификации CSS. Другими словами, это не вэб стандарт. К нашему сожалению Internet Explorer 6 и ниже не полностью поддерживают PNG формат (который рекомендован W3C), но Microsoft включило фильтр, который позволяет обойти эту слабость: AlphaImageLoader.

Как сказано на официальном сайте Microsoft, AlphaImageLoader “выводит изображение без рамок объекта между подложкой объекта и содержимым.” Другими словами, AlphaImageLoader загружает PNG с его полной прозрачностью, но оно загружается как слой самого себя, ниже содержимого объекта, к которому применяется. PNG изображения, загруженные таким образом, становятся как бы подложкой, нежели накладываются поверх (несмотря на то, что фактически расположены выше подложки объекта).

Короче говоря, вы можете просто применять AlphaImageLoader CSS для элементов img и получать желаемый результат. Делая так, вы получите прозрачность, но загрузите изображение повторно — как содержание объекта, но непрозрачного (которое наложится на прозрачную версию).

Вы можете использовать прозрачные PNG как CSS подложку для (X)HTML элементов (например, <div>) и надеяться, что AlphaImageLoader заставит это работать так, как вы ожидаете в Internet Explorer. Помните, что AlphaImageLoader помещает ваше изображение между подложкой и верхним слоем объекта, так что так что он загрузит вашу картинку со всей ее прозрачностью, но оно так же будет загружено в CSS как фоновое изображение без полупрозрачных пикселей.

Реальное использование AlphaImageLoader

Давайте вернемся к одному из предыдущих примеров и попробуем заставить Internet Explorer отобразить изображение корректно. Вспомним Channel 49, рисунок 20 показывает, как сайт выглядит в Internet Explorer 6.

Рисунок 20

HTML код для баннера с погодой выглядит так:

<div id="weather">   

<a href="/weather/">
<img id="weatherImage" src="http://media.49abcnews.com/img/weather/overcast-night.png" 
alt="Overcast" /></a>

<p><a href="/weather/">Currently in Topeka, KS:<br />
<strong>82&deg; Overcast</strong><br />
<span>Get the forecast and more...</span></a></p>

</div>

Как вы видите изображение в формате PNG, и Internet Explorer отобразил его безупречно, секрет здесь в JavaScript'е, я немного использовал DOM скрипт, чтобы заменить элемент img на div, который имеет AlphaImageLoader обработку в CSS. JavaScript с условными комментариями тоже можно использовать но это "нестандартное решение" которое Microsoft включил в IE. Условные комментарии позволят вам писать код для определенной версии Internet Explorer. Код будет игнорироваться всеми браузерами. В тегах <head> на сайте www.49abcnews.com, вы сможете найти:

<!&#8212;[if lte IE 6]>
<script src="http://media.49abcnews.com/js/fixWeatherPng.js" type="text/javascript"></script>
<![endif]&#8212;>

Благодаря этой строке, если браузером является IE6, этот скрипт будет обработан при отображении. Все остальные браузеры, включая Internet Explorer 7, проигнорируют эту строчку целиком.

Так что такого в этом ява скрипте?

window.attachEvent("onload", fixWeatherPng); function fixWeatherPng() 

{    

var img = document.getElementById("weatherImage");  
  
var src = img.src;    

img.style.visibility = "hidden";    

var div = document.createElement("DIV"); 

div.style.filter = 
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizing='scale')";   
// <i>Some 49abcnews.com-specific CSS styling omitted for brevity. </i>        

img.replaceNode(div);  

} 

Давайте рассмотрим пошагово, что же делает скрипт, первое передадим браузеру команду запуска функций скрипта при загрузке страницы, оставшаяся часть скрипта сама функция.

Начнем с того, что найдем изображение, с которым работаем по его атрибуту id и запишем его в переменную img. Сохраним атрибут src (URL файла изображения) в переменную src, а затем скроем изображение, установив свойство видимость в CSS в значение скрытый.

Далее создадим новый элемент div и сохраним его в переменной div. Применим AlphaImageLoader фильтр к нему, используя URL из переменной src .

Наконец, заменим оригинальный элемент img (который скрыт) только что созданным div элементом, который имеет примененный AlphaImageLoader фильтр.

Используя DOM скрипт для замены "на лету" отфильтрованный AlphaImageLoader'ом контент мы получаем нормальный чистый CSS, так же как и избавляет нас от семантически ненужного div'а в нашем коде.

Вывод

PNG, как формат изображения, имеет большее количество перед широко используемым поныне GIF'ом. Фактически, преимущества настолько велики, что PNG должен был давно стать форматом "По-умолчанию" для любых изображений, кроме фотографий. Недостаточная поддержка Internet Explorer’ом некоторых свойств PNG, например прозрачности на основе альфа-каналов, в результате заставляет многих веб дизайнеров воздержаться от использования. Но есть две причины, по которым следует все же присмотреться к PNG.

Первое, даже IE 6 более ранние версии в некоторой степени поддерживают PNG, и даже в этом использование GIF уже не оправдано (за исключением анимации). PNG практически всегда выдает меньший размер файла, что сократит нагрузку и ускорит скорость загрузки страниц.

Второе, IE 7 полностью поддерживает PNG, включая альфа каналы. Так что вспомните про те примеры, которые мы рассмотрели выше, но не останавливайтесь на этом, ищите и вы поймете, что примеров использования прозрачности может быть бесконечное множество!