Используя PNG отображает на веб-сайтах

IE 6 будет отображать прозрачность в формате GIF только в изображениях PNG, если вы не используете фильтры.
Подробнее см. здесь

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

Да, можно использовать pngs, но есть некоторые моменты, на которые стоит обратить внимание.

• Internet Explorer 6 не поддерживает прозрачность. Как отмечалось в нескольких комментариях, вы можете использовать фильтры для решения этой проблемы. Однако есть определенные проблемы, которые могут всплывать при использовании его над относительным контейнером или при использовании повторения фона. Лично я использую реализацию vml , в которой нет этих проблем.

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

• Mac OS X отображает PNG с сохраненной гамма-коррекцией. Возможно, вам придется его удалить. Я использую pngcrush.

• Вложенные полупрозрачные поверхности могут работать очень медленно в некоторых браузерах.

PNG на самом деле ОЧЕНЬ часто используются сегодня. Мало сайтов без хотя бы нескольких PNG. И их тоже не стоит бояться. Единственная проблема связана с IE6, и у него также есть два возможных решения:

• Фильтр DirectX. Просто погуглите, в сети полно этого. Он работает без каких-либо изменений в файле PNG, но есть несколько GOTCHA - например, прозрачные области также будут прозрачными для ввода пользователя (щелчка), и вы не можете объединить его с другим фоновым изображением.
• Установка цвета фона для PNG. Для этого не требуется никакого специального кода на веб-странице, но это не всегда уместно. Идея состоит в том, что файл PNG может указывать цвет «фона» по умолчанию, и IE6 это учитывает. Поскольку довольно часто PNG отображаются на сплошном или почти сплошном фоне, это работает на удивление хорошо. Используйте утилиту TweakPNG, чтобы установить фон.

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

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

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

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

Хотя PNG - единственный формат, который позволяет использовать прозрачность, вы можете захотеть использовать JPG (который в основном является форматом сжатия с потерями) для больших изображений.

И знаете что? Даже Google использует изображение PNG для своего логотипа олимпийских игр.

Вот несколько корпоративных веб-сайтов из списка Fortune 500, которые используют PNG на своей главной странице:

• microsoft.com
• apple.com
• google.com (логотип Google - PNG)
• hp.com (они на самом деле используют Twinhelix IEPNGFIX и прозрачные PNG-изображения)

на самом деле единственный, который я обнаружил, который этого не сделал (я посмотрел только около 10), был Siemens.com

В наши дни ими можно прекрасно пользоваться. Старые версии IE (6.0 и старше) не поддерживали все их режимы прозрачности, что было основной причиной, по которой люди избегали этого формата. В других браузерах, таких как Firefox, Chrome, Opera, Konqueror или Links, таких проблем не было.

И давайте не будем забывать, что логотип Stack Overflow - это PNG, еще одна причина его использовать!