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

Быстро и просто внедряем 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 для фоновых изображений, можно смело позиционировать его, повторять по обеим осям, в общем все как обычно.

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



36 Комментариев »

  1. 1  Плюс Минус  0

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

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

    Комментарий by Vladimir Rusinov — Июль 15, 2007 @ 2:07 am | Цитировать

  2. 2  Плюс Минус  +4

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

    Комментарий by Vladimir Sobolev — Июль 15, 2007 @ 2:42 am | Цитировать

  3. 3  Плюс Минус  +1

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

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

    У меня все что связано с графикой хранится на поддомене images.*

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

    Комментарий by neutrino — Июль 15, 2007 @ 9:02 am | Цитировать

  4. 4  Плюс Минус  0

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

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

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

    Комментарий by m_vitaly — Июль 15, 2007 @ 9:12 am | Цитировать

  5. 5  Плюс Минус  0

    А почему никто не говорит про APNG он уже вроде бы как работает на альфах FF.

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

    Комментарий by neutrino — Июль 15, 2007 @ 9:17 am | Цитировать

  6. 6  Плюс Минус  0

    Здорово, спасибо за инфу, попрактикуем и этот способ ;) .

    Комментарий by Dimox — Июль 15, 2007 @ 5:41 pm | Цитировать

  7. 7  Плюс Минус  +1

    to Dimox

    Напишешь потом как успехи ;)

    Комментарий by neutrino — Июль 15, 2007 @ 5:44 pm | Цитировать

  8. 8  Плюс Минус  +1

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

    Время анимации в GIF ушло безвозвратно для этого есть Flash.

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

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

    Комментарий by Евгений — Июль 15, 2007 @ 7:03 pm | Цитировать

  9. 9  Плюс Минус  0

    разве в мозилле mng не поддерживается?
    помнится у ещё Phoenix троббер был в мнг нарисован

    Комментарий by Огоньков — Июль 15, 2007 @ 8:59 pm | Цитировать

  10. 10  Плюс Минус  0

    to Евгений

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

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

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

    Комментарий by neutrino — Июль 15, 2007 @ 10:29 pm | Цитировать

  11. 11  Плюс Минус  0

    разве в мозилле mng не поддерживается?
    помнится у ещё Phoenix троббер был в мнг нарисован

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

    Комментарий by neutrino — Июль 15, 2007 @ 10:32 pm | Цитировать

  12. 12  Плюс Минус  0

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

    в этом утверждении нет ни одного аргумента, даже обсуждать нечего.

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

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

    Комментарий by Евгений — Июль 16, 2007 @ 10:38 am | Цитировать

  13. 13  Плюс Минус  0

    to Евгений

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

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

    Комментарий by neutrino — Июль 16, 2007 @ 10:43 am | Цитировать

  14. 14  Плюс Минус  0

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

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

    Комментарий by Евгений — Июль 16, 2007 @ 10:52 am | Цитировать

  15. 15  Плюс Минус  0

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

    и FF3.0a =)

    Комментарий by Zigzag — Июль 18, 2007 @ 4:05 pm | Цитировать

  16. 16  Плюс Минус  0

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

    Комментарий by D1ma — Июль 24, 2007 @ 3:58 am | Цитировать

  17. 17  Плюс Минус  +1

    Но: по моему, он фоны не берёт. Т.е. если пнг на фоне, то альфа будет опять не корректно работать :(

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

    Комментарий by neutrino — Июль 24, 2007 @ 9:29 am | Цитировать

  18. 18  Плюс Минус  0

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

    Комментарий by Дима — Август 14, 2007 @ 6:21 pm | Цитировать

  19. 19  Плюс Минус  0

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

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

    Комментарий by neutrino — Август 14, 2007 @ 11:49 pm | Цитировать

  20. 20  Плюс Минус  0

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

    Комментарий by трин — Август 16, 2007 @ 10:19 am | Цитировать

  21. 21  Плюс Минус  0

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

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

    Комментарий by neutrino — Август 16, 2007 @ 10:24 am | Цитировать

  22. 22  Плюс Минус  +1

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

    Что то не получается ни позиционировать, ни повторять. Это действительно возможно?

    Комментарий by mityan — Август 26, 2007 @ 2:20 pm | Цитировать

  23. 23  Плюс Минус  0

    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%;
    }

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

    Комментарий by Ринат — Сентябрь 15, 2007 @ 2:41 pm | Цитировать

  24. 24  Плюс Минус  0

    Ринат, код проглотился движком. Покажи пример.

    Комментарий by neutrino — Сентябрь 15, 2007 @ 10:47 pm | Цитировать

  25. 25  Плюс Минус  0

    хм…. к сожалению, с .htc файлами некоторых постигнет большой облом…

    HTC components in XP Service Pack 2

    HTC components in XP Service Pack 2 (2)

    Комментарий by HeNuS — Октябрь 8, 2007 @ 5:53 pm | Цитировать

  26. 26  Плюс Минус  0

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

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

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

    Комментарий by PVasili — Октябрь 28, 2007 @ 10:29 am | Цитировать

  27. 27  Плюс Минус  0

    PVasili

    htc != js

    Комментарий by neutrino — Октябрь 28, 2007 @ 11:06 am | Цитировать

  28. 28  Плюс Минус  0

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

    Комментарий by дига — Январь 10, 2008 @ 12:03 pm | Цитировать

  29. 29  Плюс Минус  0

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

    позор на мои седины, забыл td в css прописать. работает все. Спасибо )

    Комментарий by дига — Январь 10, 2008 @ 12:50 pm | Цитировать

  30. 30  Плюс Минус  +1

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

    Комментарий by Евгений Сивоконь — Январь 13, 2008 @ 9:30 am | Цитировать

  31. 31  Плюс Минус  0

    а чем хуже AlphaImageLoader Filter ? http://msdn2.microsoft.com/en-.....32969.aspx

    Комментарий by bobrob — Февраль 1, 2008 @ 3:52 pm | Цитировать

  32. 32  Плюс Минус  0

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

    Комментарий by desig — Февраль 10, 2008 @ 3:21 pm | Цитировать

  33. 33  Плюс Минус  0

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

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

    Комментарий by desig — Февраль 10, 2008 @ 8:46 pm | Цитировать

  34. 34  Плюс Минус  0

    СПАСИБО!!!!

    Комментарий by Екатерина — Март 19, 2008 @ 2:08 pm | Цитировать

  35. 35  Плюс Минус  error

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

    Комментарий by Даниил — Апрель 9, 2008 @ 2:45 pm | Цитировать

  36. 36  Плюс Минус  0

    Респектище!

    Комментарий by markers — Апрель 10, 2008 @ 12:13 pm | Цитировать

Оставить комментарий

XHTML (Разрешенные теги): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> .

Если вы хотите вставить в комментарий код, то жмите на кнопку "HTML" в редакторе и используйте теги <pre><code> и </pre></code> для вставки.

Не забывайте о том, что теги, вставленые без использования &lt;/&gt; будут автоматически трансформироваться.

Цитировать отмеченый текст