Быстро и просто внедряем PNG в дизайн сайта

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

PNG корректно поддерживается всеми современными браузерами, кроме до сих пор доминирующего (здесь я всплакнул) Internet Explorer 6. То есть IE6, конечно поддерживает (читай воспроизводит) PNG, но не поддерживает полупрозрачность. А это, на равне с поддержкой 16-ти миллионов цветов, основное преимущество PNG над GIF.

Справедливости ради, стоит заметить что отказаться от GIF
в пользу PNG не получится, так как PNG не поддерживает анимацию,
да и вес иногда оставляет желать лучшего.

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

Этот способ, в отличии от других не использует javascript, a основан на .htc скрипте, который нужен нам только для IE 6 и IE 5.5 для корректного отображения полупрозрачности. Скрипт никак не повлияет на остальные браузеры.

Все что нужно сделать для того чтобы скрипт заработал, это прописать в css-файле для IE6 вот эту строку:

img {
behavior: url(iepngfix.htc)
}

Если вы не используете отдельный файл стилей для Интернет Эксплорера с помощью Conditional Comments, рекомендую использовать Star HTML хак:

* html img {
behavior: url(iepngfix.htc)
}

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

Еще один момент. Для корректной работы скрипта нужен однопиксельный прозрачный blank.gif, который можно взять здесь или сделать самому.

Если однопикслельный gif лежит не в той же папке что и .htc скрипт, то необходимо открыть iepngfix.htc, в начале файла найти строку

// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == "undefined") var blankImg = "blank.gif";

И изменить имя файла и путь к нему. Вот и все. Никаких дополнительных настроек и кода не нужно.

Можно спокойно использовать PNG и как картинки и как фоновое изображение в дизайне ваших сайтов.

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

Сайт разработчика скрипта не изобилует обьяснениями, но они почти и не нужны ;) Пользуйтесь на здоровье.

43 thoughts on “Быстро и просто внедряем PNG в дизайн сайта

  1. > Справедливости ради, стоит заметить что отказаться от GIF
    > в пользу PNG не получится, так как PNG не поддерживает
    > анимацию,

    Поищи в интернете что-нибудь про mng.

  2. использование .htc файлов конечно удобное дело, но в моем случае неприменимо, т.к. имеет очень досадный недостаток – невозможно в CSS файле подключать .htc файл с другого домена, так что фраза “Затем положить сам файл iepngfix.htc туда где вам удобно и изменить путь к нему в CSS” не совсем верна… куда удобно не получится.
    У меня все что связано с графикой хранится на поддомене images.* …

  3. [quote post=”103″]Поищи в интернете что-нибудь про mng.[/quote]

    Да чего там искать? Я о нем даже упоминать не хотел. Формат, который на данный момент поддерживается только Konqueror’oм…

    [quote post=”103″]У меня все что связано с графикой хранится на поддомене images.*[/quote]

    ну .htc вроде не совсем графика, можно было бы и к скриптам отнести… Дополнил статью.

  4. [quote comment=”736″]> Справедливости ради, стоит заметить что отказаться от GIF
    > в пользу PNG не получится, так как PNG не поддерживает
    > анимацию,

    Поищи в интернете что-нибудь про mng.[/quote]

    А почему никто не говорит про APNG он уже вроде бы как работает на альфах FF.
    Ещё не придумали фильтр для IE чтобы APNG показывал ? :)
    Или как всегда microsoft замедляет технологические продвижения?

  5. [quote post=”103″]А почему никто не говорит про APNG он уже вроде бы как работает на альфах FF.[/quote]

    Да ну это все не серьезно. По крайней мере пока.

  6. [quote post=”103″]Справедливости ради, стоит заметить что отказаться от GIF в пользу PNG не получится, так как PNG не поддерживает анимацию, да и вес иногда оставляет желать лучшего.[/quote]
    Время анимации в GIF ушло безвозвратно для этого есть Flash.

    Насчет веса это вообще-то не правда есть два вида PNG, PNG8 в котором используется палитра в 256 и который в 99 случаях из 100 дает файл меньших размеров чем GIF иногда значительно меньших и PNG24 который жмет без потери качества и поэтому всегда больше GIF.

    Подробная информация по ссылкам:
    Креативное использование полупрозрачных PNG в веб-дизайне
    PNG8 против GIF

  7. to Евгений

    Процитирую одного из участников беседы в ru_webdev из приведенной тобой ссылки:

    …пнг-8 и пнг-24 — мощные инструменты, но только будучи применённые с умом и в нужном месте. не надо сотворять себе кумира и менять все гифы на пнг…

    Тоже самое относится и к Flash. Не всегда и не везде.

  8. [quote comment=”746″]разве в мозилле mng не поддерживается?
    помнится у ещё Phoenix троббер был в мнг нарисован[/quote]

    Mozilla перестала поддерживать mng.

  9. [quote post=”103″]…пнг-8 и пнг-24 — мощные инструменты, но только будучи применённые с умом и в нужном месте. не надо сотворять себе кумира и менять все гифы на пнг…[/quote]
    в этом утверждении нет ни одного аргумента, даже обсуждать нечего.

    Вот вам пример:
    В шапек этого сайта использован sprites.gif (почему у него такие размеры это другой вопрос)весит он 8 716 байт, я пережал его в png8 получилось 1 213 байт, проверить можете сами, если не верите мне.

    Если вам нужна анимация то, конечно, png8 не заменит gif, в остальных случаях стоит отдать предпочтение png8.

  10. to Евгений

    Так никто и не спорит. Часто png предпочтительнее, но не всегда.
    И уж тем более неуместна фраза “Время анимации в GIF ушло безвозвратно для этого есть Flash”.

    Поэтому и обсуждать нечего. Не всегда и не везде.

  11. Да, согласен.

    Но вернемся к теме статьи, нужно обратить внимание на тот важный момент, что IE6 нормально работает с двоичной (как в gif либо пиксель прозрачен, либо нет) прозрачность в png, проблемы только с альфа-каналом, которого в gif вообще нет. Это значит что прозрачный gif можно заменить прозрачным png8 без всяких скриптов, а вот если нужны более сложные эффекты (полупрозрачность, склаживание границ) то нужно брать png-24 (PhotoShop не умеет создавать png-8 альфа-каналом) и прибегать к различным скриптам.

  12. [quote post=”103″]Да чего там искать? Я о нем даже упоминать не хотел. Формат, который на данный момент поддерживается только Konqueror’oм…[/quote]
    и FF3.0a =)

  13. Хм… Я немного погуглил, и нашёл замечательный ЯваСкрипт подключаешь файлом и все ПНГ работают без никакого шаманства. Просто вставить одну строчку с файлом подкючения .js и всё.
    Но: по моему, он фоны не берёт. Т.е. если пнг на фоне, то альфа будет опять не корректно работать :(

  14. [quote post=”103″]Но: по моему, он фоны не берёт. Т.е. если пнг на фоне, то альфа будет опять не корректно работать :([/quote]

    Сплошное расстройство :) Буду продолжать юзать этот скрипт.

  15. Картинки то отображаются, а вот фоновые изображения – нет.

  16. [quote comment=”835″]Картинки то отображаются, а вот фоновые изображения – нет.[/quote]

    Не знаю, не знаю, я лично проверял. Проверьте все еще раз.

  17. есть одно но. данный скрипт решает проблему с img, а что если я png фоном кладу?

  18. [quote comment=”853″]есть одно но. данный скрипт решает проблему с img, а что если я png фоном кладу?[/quote]

    А вы попробуйте сначала. Скрипт работает и для фоновых изображений.

  19. [quote post=”103″]В случае использования PNG для фоновых изображений, можно смело позиционировать его, повторять по обеим осям, в общем все как обычно.[/quote]
    Что то не получается ни позиционировать, ни повторять. Это действительно возможно?

  20. body {
    background-image:url('checkerboard.gif');
    }
    .square {
    width:500px;
    height:500px;
    border:1px solid #000;
    behavior: url(iepngfix.htc);
    background:url('opacity.png') repeat-x 100% 100%;
    }

    Не работает ни позиционирование, ни повторение. Как быть?

  21. >Этот способ, в отличии от других не использует javascript,….

    >Затем положить сам файл iepngfix.htc туда где вам удобно

    Автор у вас противоречия. Не стоит дурить публику.JS – есть JS в каком бы файле он не записывался…

  22. не работает прозрачность на фоновых пнг в обычных таблицах=(((( всю голову уже поломал =((((

  23. [quote comment=”3508″]не работает прозрачность на фоновых пнг в обычных таблицах=(((( всю голову уже поломал =(((([/quote]
    позор на мои седины, забыл td в css прописать. работает все. Спасибо )

  24. Данный метод имеет все же один серьезный недостаток – .htc не “кушается” валидатором. Именно по этой причине мне пришлось отказаться от данного хака в свое время.
    Хотя было бы здорово, если кто-нибудь пофиксит .htc файлик на предмет W3C валидности.

  25. Этот метод с .htc скриптом работает не корректно в некоторых случаях, например, отменяет значение position=”relative” у блоковых элементов, не работает для элемента формы input type=”image”. Проверял в IE 6.0.2900, придется использовать другой способ с яваскриптом, у AlphaImageLoader который предлагает Microsoft еще больше ограничений на использование :( В который раз поминаю IE недобрым словом!

  26. [quote post=”103″]В случае использования PNG для фоновых изображений, можно смело позиционировать его, повторять по обеим осям, в общем все как обычно.[/quote]

    Покажите хоть один пример где это работает, вы сами то проверяли? Ни позиционирование, ни повторение НЕ РАБОТАЕТ!
    За статью конечно спасибо, но очень меня огорчили несоответствия в описании с реальным использованием…

  27. Хороший метод, пользуюсь.
    Только есть вопрос: можно ли использовать его при подмене одного png-изображения на другое использованием псевдокласса :hover, есстественно в IE6? Сколько не бился, не получается… :(

  28. Именно этот скрипт помог реализовать все капризы заказчика, но в фоне не работает – как не крутил, если у кого заработало киньте в меня – каким образом?

  29. Блин, хотел было поглумиться, что Apple на своем майте даже не заморачивается по поводу ИЕ6, и всюду полурозрачные png с серым фоном, захожу, а они все поправили…(

  30. @Мельников

    У них сейчас появилась новая альфа-версия которая якобы поддерживает все что нужно. Но баги вроде бы продолжаются. Если потестите – отпишитесь.

    v2.0 Alpha 2: Alternatively, download the latest development code (updated 17 July 2008) at the Test Area, this includes support for background position and repeat.

    Apple у себя тоже этот скрипт используют :)

  31. Выкачал, потестил, с фоном работает, всё что мне нужно реализовал…
    Все кто мучается с полупрозрачными png-фонами – качаем v2.0 Alpha 2

  32. странно, раньше использовал этот fix, а сейчас на одном сайте не работает и всё…

  33. замечены проблемы с ссылками в ИЕ6 – проявляется при direction: rtl;
    не нажимаются ссылки

    div.block {
    behavior: url(iepngfix.htc);
    background:url(’opacity.png’) repeat-x 100% 100%;
    }
    div class=”block”
    a href=”1″
    a href=”2″
    a href=”3″
    /div

    лечиться –
    div.block a {
    zoom:1;
    }

Leave a Reply

Your email address will not be published. Required fields are marked *