Веб-мастеру

Формат PNG поддерживает глубину цвета в 48 бит на пиксел, отдельный альфа-канал, улучшенное сжатие данных (PNG использует алгоритм сжатия Deflate без потерь информации), возможность использования гамма-коррекции, сохранение компрессированных или некомпрессированных текстовых вставок для хранения информации о копирайте или других целей. Всё это позволяет задавать различную степень прозрачности области изображения
Многие браузеры умеют работать с данным форматом и поддерживают его прозрачность: Mozilla 0.9+ (Firefox, Netscape 6+ ...), Opera 6+, Konqueror 3+, Safari 1.0+ ...
В Internet Explorer 5.5+ для корректного отображения файла *.png к изображению необходимо применить фильтр CSS AlphaImageLoader. Есть несколько вариантов подключения фильтра, все они имеют свои плюсы и недостатки. Рассмотрим некоторые из них

фильтр используется для создания эффекта освещения объекта источником света

   <img src="clock.jpg" style="filter: light;" id="light_1" onLoad="light_1.filters.light.addAmbient (0, 255, 0, 100)" width="200" height="149" alt="Результат применения фильтра light" class="left" />

поддержка браузеров: Internet Explorer все версии

удаление из изображения определённого цвета

   <img src="clock.jpg" style="filter: chroma (enabled, color=#1F1A17)" width="200" height="149" alt="Результат применения фильтра chroma" class="left" />

поддержка браузеров: Internet Explorer все версии

монохромный негатив

   <img src="clock.jpg" style="filter: xray" width="200" height="149" alt="Результат применения фильтра xray" class="left" />

поддержка браузеров: Internet Explorer все версии

чёрно-белое изображение

   <img src="clock.jpg" style="filter: gray" width="200" height="149" alt="Результат применения фильтра gray" class="left" />

поддержка браузеров: Internet Explorer все версии

инвертирование

   <img src="clock.jpg" style="filter: invert" width="200" height="149" alt="Результат применения фильтра invert" class="left" />

поддержка браузеров: Internet Explorer все версии

данный фильтр позволяет одновременно реализовать несколько визуальных эффектов

   <img src="clock.jpg" style="filter: progid:DXImageTransform.Microsoft.basicImage (grayscale=0, xray=1, mirror=1, invert=0, opacity=0.5, rotation=2)" width="200" height="149" alt="Результат применения фильтра basicImage" class="left" />

поддержка браузеров: Internet Explorer все версии

добавляет синусоидальный сигнал, в результате чего объект выглядит колеблющимся

   <img src="clock.jpg" style="filter: wave (add=true, lightStrength=40, phase=80, strength=50, freq=2)" width="200" height="149" alt="Результат применения фильтра wave" class="left" />

поддержка браузеров: Internet Explorer все версии
см. также: Искажение текста

тень

   <img src="clock.jpg" style="filter: progid:DXImageTransform.Microsoft.shadow (direction=120, strength=7, color=silver)" width="200" height="149" alt="Результат применения фильтра shadow" class="left" />

поддержка браузеров: Internet Explorer все версии

тень

   <img src="clock.jpg" style="filter: progid:DXImageTransform.Microsoft.dropShadow (offX=-5, offY=-5, color=silver, positive=true)" width="200" height="149" alt="Результат применения фильтра dropShadow" class="left" />

поддержка браузеров: Internet Explorer все версии

задаёт размытие изображения

   <img src="clock.jpg" style="filter: blur (direction=5, strength=10, add=false)" width="200" height="149" alt="Результат применения фильтра blur" class="left" />

поддержка браузеров: Internet Explorer все версии

задаёт прозрачность изображения

   <img src="clock.jpg" style="filter: alpha(opacity=30, finishOpacity=50, style=2)" width="200" height="149" alt="Результат применения фильтра alpha" class="left" />

поддержка браузеров: Internet Explorer все версии