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

В последнее время рядом с традиционными для веб форматами jpg и gif все чаще применяется png. Png бывают разные (png-8, png-24), особо интересен png-24 - особенности этого формата позволяют получать более качественные изображения при меньшем размере файла (сравнение с jpg и gif). К тому же, на полном автомате, без всяких настроек, как в случае с jpg и gif, что тоже приятно. Вторая особенность формата делает его и вовсе незаменимым: png-24 поддерживает 8-битную прозрачность (в отличие от 8-битной в гиф). Это значит, что теперь пиксели картинки кроме поддерживаемых и в gif значений “полностью прозрачно” и “сплошная заливка цветом - не прозрачно” могут приобретать значения с одной из 255 градаций прозрачности. Вполне достаточно, чтобы добавить в дизайн страницы, например, перетаскиваемый элемент с закругленными углами, да еще и с тенью. В общем, меньше ограничений для дизайнера, больше возможностей для оформления.

Все современные браузеры показывают картинки и фоны в формате png-24. Почти все делают это безупречно. Только IE6, который все еще очено популярен - ведь предустановлен во всех Windows XP - не поддерживает прозрачность png. То есть, то, что все остальные браузеры (Firefox, IE7, Mozilla, Safari, Opera, Netscape, Konqueror, Chrome) показывают так

шестой Internet Explorer отображает так

Существует несколько способов исправить ситуацию. Все они так или иначе связаны с применением JavaScript. Остановлюсь на парочке.

Использование майкрософтовского фильтра DXImageTransform.Microsoft.AlphaImageLoader. Применим только к изображениям png, для фонов не подходит. Никаких дополнительных файлов подключать не нужно - фильтр встроен в ИЭ. Остальные браузеры его проигнорируют и покажут картинку так же хорошо, как и без фильтра. Все, что нужно сделать - везде, где вы используете ПНГ изображения, вместо <img src=”pic.png” alt=”" /> писать примерно так:

<span style=”filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’pic.png’,sizingMethod=’scale’);
“><img style=”filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);”
src=”pic.png” alt=”" /></span>

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

Второй способ - использование скрипта iepngfix.htc.

Для этого нужно

  1. скачать архив со скриптом
  2. разархивировать его
  3. скопировать файлы iepngfix.htc и blank.gif куда-нибудь себе на сайт
  4. добавить в стили строку вида img, div { behavior: url(”iepngfix.htc”) } - (путь абсолютный или относительный, но относительно страницы, а не стилевого файла). Для скорости генерирования страницы вы можете указать вместо img, div конкретные классы и/или идентификаторы элементов, в которых заключены картинки или есть png фон. Если вы оставите img, div или что-то такое же общее, скрипт будет обрабатывать все img’ы и div’ы (или что вы там поставите) документа…
  5. открыть iepngfix.htc и в строке с var blankImg = указать путь к картинке blank.gif - опять же, абсолютный или относительный, но относительно страницы, а не стилевого файла или файла iepngfix.htc

После этого IE должен исправиться и нормально показывать прозрачные png на вашей странице. Если включено выполнение ДжаваСкриптов, конечно.

Не ждите, что этот способ сработает в 100% случаев. Если в вашей верстке есть несколько вложенных блоков, каждый со своим png фоном, повторяющимся или нет - могут быть искажения, артефакты, что ли. У меня был случай, когда повторяющаяся по оси y png картинка шириной 10 пикселей растянулась в вот это

В общем, отличный способ, но верстать нужно аккуратно.

Может быть, что после загрузки на сервер ваши png изображения в верстке будут отображаться в Експлорере так же неправильно, как и без iepngfix’a. Возможно, дело в том, что ваш сервер отправляет неправильные заголовки для файла iepngfix.htc. В таком случае скопируйте в папку, где он лежит, файлы .htaccess и iepngfix.php и в пункте 4 вызывать не iepngfix.htc, а iepngfix.php.