Креативное использование полупрозрачных PNG в веб-дизайне

PNG изображения не очень широко используются в веб-дизайне, и тому есть серьезная причина. До выхода IE7 нельзя было сказать, что преимущества PNG хорошо используются основными браузерами. Но, начиная с 7-ой версии, IE имеет полную поддержку PNG, а с помощью небольшого количества JavaScript и CSS можно заставить старые браузеры корректно отображать полупрозрачные PNG, теперь самое время пополнить свой дизайнерский арсенал еще одним инструментом.

Что такое PNG?

PNG, обычно произноситься ping, аббревиатура от Portable Network Graphics, формат изображений, использующий сжатие без потери качества, если проще, способ сохранения графики уменьшающий размер файлов без уменьшения качества изображения. PNG был разработан для замены вездесущего формата GIF, использование которого, осложнялось необходимостью получения лицензии производителями программного обеспечения (срок действия патента на GIF/LZW уже истек, поэтому сейчас этот фактор не важен). PNG это международный стандарт (ISO IEC 15948:2003) и рекомендация W3C.

Кроме того, что производители программного обеспечения могут использовать PNG бесплатно, он имеет и некоторые технические преимущества перед GIF:

• Лучше компрессия: для многих изображений, используя PNG можно получить файл меньших размеров, чем GIF.
• Больше глубина цвета: PNG использует truecolor до 48 бит, тогда как GIF палитру из 256 цветов.
• Альфа-канал для прозрачности: в GIF доступна только бинарная прозрачность, а в PNG множество уровней прозрачности благодаря использованию альфа-канала.

Конечно, не стоит забывать о том, что PNG в отличие от GIF не поддерживает анимацию, и хотя существует связанный с ним стандарт Multiple-image Network Graphics (MNG) с поддержкой анимации, он не имеет широкой поддержки в браузерах и графическом программном обеспечении.

Так почему же GIF столь популярен.

Почему же при таком количестве достоинств PNG не очень широко применяется в веб? Большей частью это связано с представлениями о поддержке этого формата различными браузерами.

Из-за того, что IE6 поддерживает не все возможности PNG (включая и альфа-канал), многие думают, что IE совсем не поддерживает PNG или хотя бы совершенно не поддерживает полупрозрачность в PNG. В действительность IE5 и IE6 поддерживает PNG на уровне позволяющем использовать PNG вместо GIF (исключая анимацию), все остальные распространенные браузеры, включая Firefox, Netscape 6+, Mozilla, Opera 6+, Safari и Camino полностью поддерживают все возможности PNG.

Во многом успех GIF был основан на поддержке анимации, но в последние годы начали набирать популярность более совершенные технологии анимации (например, Flash).

Что насчет JPEG?

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

Эффективное использование PNG в веб-дизайне

Давайте посмотрим, как лучше использовать PNG в веб-дизайне.

Градиенты

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

Иногда GIF хорошо подходит для сохранения таких градиентов, особенно если переход достаточно простой от одного цвета к другому. Но ограничение в 256 цветов не позволяет использовать GIF для более сложных градиентов. JPEG позволяет сохранять градиенты любой сложности, но ценой большого размера файла, не стоит забывать и о том, что JPEG использует сжатие с потерей качества.

Сравните размеры файлов различных форматов при сохранении типичного градиента. Как вы можете видеть на изображении наименьший размер файла при использовании формата PNG (515 байт), это в четыре раза меньше чем при использовании GIF (2166 байт), при использовании формата JPEG размер файла немного больше чем PNG, но при этом неизбежна потеря качества (хотя она не всегда заметна невооруженным глазом).

Изображения, которые будут использоваться с различным фоном

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

Команда World Online разработала отличные иконки для индикатора погоды в шапке сайта KTKA Channel 49 News in Topeka, Kansas. Цветовая схема шапки меняется с заходом и восходом солнца и индикаторы погоды должны одинаково хорошо работать на любом фоне.

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

Если бы я выбрал GIF, то из-за бинарной прозрачности в лучшем случае нам удалось бы получить то, что вы увидите на следующем изображении. Я думаю, вы согласитесь, что это не лучший вариант.

Полупрозрачный элемент сайта

Одна из очень распространенных в дизайне техник, заключается в том, что на фотографию или другое изображение накладывается полупрозрачный элемент, обычно содержащий текст. Эта техника позволяет улучшить читабельность текста, не закрывая полностью изображение. Вилсон Майнер превосходно использовал ее на ювелирном сайте Gingeroot.

Вилсон создал полупрозрачную область и текст заранее с помощью PhotoShop, а потом сохранил в виде JPEG. Это хорошо работает в случае данного сайта, но, что делать, если текст должен изменяться очень часто, или быть разным для каждого посетителя. В таком случае текст должен быть в виде элемента HTML. С помощью полупрозрачного PNG можно получить такой же эффект не используя текст в изображении.

Я взял фотографию своей дочери, Холи Медисон, и разместил ее на простой XHTML страничке и добавил немного CSS для оформления.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type"
      content="text/html; charset=utf-8"/>

    <title>Haley's web site</title>
    <style>
      body {
        font-family: "Lucida Grande", Arial, sans-serif; 
        background-color: #304251; 
        color: #304251; 
        margin: 20px auto; 
        width: 720px;
      } 
      #feature {
        position: relative; 
        width: 720px; 
        height: 439px;
      } 
      #feature-content {
        position: absolute;
        bottom: 0; 
        left: 0; 
        height: 125px; 
        width: 720px; 
        background-color: #dfdfdf;
      } 
      #feature-content h1 {
        margin: 0;
        padding: 0;
        line-height: 125px;
        padding: 0 30px;
        font-weight: normal;
        font-size: 2.3em;
      } 
      #feature-content a {
        float: right; 
        font-size: .6em; 
        color: #fff; 
        text-decoration: none; 
        text-transform: uppercase; 
      }
    </style>
  </head>
  <body>

    <div id="feature">
      <img src="haley.jpg" alt="Haley Madysan Croft" />
      <div id="feature-content">
        <h1>Sweet. Smart. Beautiful. 
        <a href="/haley" title="Haley Madysan Croft">
          Learn more &raquo;</a></h1>

      </div>
    </div>
  </body>
</html>

Потом я создал изображение размером 1 пиксель в Photoshop, закрасил этот пиксель светло голубым, установил прозрачность слоя 70% и сохранил изображение в формате PNG-24 с использование полупрозрачности. После чего я использовал это изображение как фон блока, на котором расположен текст.

#feature-content {
  position: absolute; 
  bottom: 0; 
  left: 0; 
  height: 125px; 
  width: 720px; 
  background-image: url('transparent.png');
} 

Результат очень похож на оригинал, но с текстом в HTML и его оформление в CSS, что обеспечивает большую гибкость.

Вилсон использовал сходную технику в другом разделе сайта Gingeroot. На страницах с доступными продуктами, прозрачные PNG изображения использованы для отображения значка «ON SALE» в верхнем левом углу фотографии товара. Используя прозрачные PNG, Вилсон исключил необходимость создания для каждого продукта дополнительной фотографии с таким значком.

Я использовал эту технику на сайте Explore Steamboat, посвященном событиям и развлечениям Steamboat Springs в Колорадо.

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

Водяные знаки

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

На моем сайте есть большая галерея фотографий (на данный момент более 2 тысяч), все они хранятся на Flickr, и отображаются с помощью Flickr API.

Что если я захочу добавить мой логотип на каждую фотографию? Конечно, можно использовать для этого PhotoShop, но в случае тысяч постоянно обновляющихся фотографий не очень практично, тем более что иногда я добавляю их с сотового телефона. Было бы хорошо, если бы логотип добавлялся автоматически и в этом нам поможет PNG.

HTML код используемый для отображения фотографий выглядит так:

<a class="photo-container"
  href="http://www.flickr.com/photos/jcroft/2622915/">

  <img class="full-size-photo"
    src=http://static.flickr.com/2/2622915_8b78c1207d.jpg 
    alt="CTA, a photo by Jeff Croft" />
</a>

Я создал логотип размером 80 на 80 пикселей, установил прозрачность 15% и сохранил в формате PNG-24 с сохранением прозрачности. После этого я добавил полученное изображение в HTML:

<a class="photo-container"
  href="http://www.flickr.com/photos/jcroft/2622915/">
  <img class="full-size-photo"
    src="http://static.flickr.com/2/2622915_8b78c1207d.jpg" 
    alt="CTA, a photo by Jeff Croft " />
  <img class="watermark"
    src="http://media.jeffcroft.com/ »
    img/core/jeffcroft_logo_watermark.png" alt="Watermark" />

</a> 

Для позиционирования я использовал CSS:

a.photo-container {
  position: relative;
  display: block;
}

img.watermark {
  position: absolute;
  top: 2em;
  left: 1em;
} 

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

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

Маски

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

Как я уже и говорил технически маски и водяные знаки очень похожи, начнем с HTML:

<a class="photo-container"
  href="http://www.flickr.com/photos/jcroft/2622915/">
  <img class="full-size-photo"
    src="http://static.flickr.com/2/2622915_8b78c1207d.jpg" 
    alt="CTA, a photo by Jeff Croft" />
  <img class="mask"
    src="http://media.jeffcroft.com/ »
	img/core/jeffcroft_logo_mask.png" alt="Mask" />
</a>

А вот так выглядит CSS:

a.photo-container {
  position: relative;
  display: block;
}

img.mask {
  position: absolute;
  top: 0;
  left: 0;
} 

Посмотрите, что у нас получилось.

Иконки, меняющие цвет

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

Для примера рассмотрим несколько иконок спортивной тематики.

Я сделал маски на основе этих иконок.

После масштабирования изображений до размера 48 на 48 пикселей, я сохранил их в формате PNG-24 с прозрачностью. Потом я создал простой XHTML файл для отображения этих иконок в браузере:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type"
      content="text/html; charset=utf-8"/>

    <title>OMG Sports Icons!</title>
    <style>
      img {
        background-color: #cc0000;
      }
    </style>
  </head>
  <body>

    <img src="running.png" alt="Running" />
    <img src="biking.png" alt="Biking" />
    <img src="skiing.png" alt="Skiing" />
    <img src="soccer.png" alt="Soccer" />
  </body>
</html>

Для изображений на этой странице я задал фон #cc0000 (красный), в результате мы видим просвечивающийся в прозрачных местах изображения фон, обратите внимание на сглаживание линий, за это отдельное спасибо полупрозрачным пикселям.

Чтобы сменить цвет иконок достаточно внести изменения в CSS:

img {
  background-color: #000066;
}

Такая техника может быть очень полезной, если вы захотите изменить дизайн сайта, вместо переделывания всех иконок достаточно будет изменить цвет в CSS. Цвет иконки можно менять и при наведении мышки с помощью псевдо класса hover.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="en" lang="en">
  <head>

    <meta http-equiv="Content-Type"
      content="text/html; charset=utf-8"/>
    <title>OMG Sports Icons!</title>
    <style>
      a:link img, 
      a:visited img, 
      a:active img {
        background-color: #cc0000;
      } 
      a:hover img {
        background-color: #000066;
      }
    </style>
  </head>

  <body>
    <a href="/running/">
      <img src="running.png" alt="Running" />
    </a>
    <a href="/biking/"><img src="biking.png" alt="Biking" /></a>
    <a href="/skiing/"><img src="skiing.png" alt="Skiing" /></a>
    <a href="/soccer/"><img src="soccer.png" alt="Soccer" /></a>
  </body>
</html>

С помощь CSS можно добавить к иконкам границы соответствующего цвета.

img {
  background-color: #000066;
  padding: 2px;
}

Ден Седерхолм описал похожую технику в 2003 году, а PJ Onori создал на ее основе набор иконок. Я немного изменил их концепцию, используя белый фон с прозрачным изображением, тогда как они использовали белое изображение на прозрачном фоне. Они использовали GIF, что накладывало некоторые ограничения на сложность и детализированность иконок из-за отсутствия в нем поддержки полупрозрачности.

Отличные техники, но как с браузерами

Рад вам сообщить, что все современные браузеры, Safari (все версии), Firefox (все версии), Opera (начиная с 6 версии), Netscape (начиная с 6 версии) и Mozilla (все версии) поддерживают все возможности PNG.

К несчастью, Internet Explorer, версии 6 и меньше, не поддерживает альфа-канал в PNG изображениях, и именно из-за его вездесущести и распространенности веб-дизайнеры сторонятся использования полупрозрачных PNG. Но с выходом Internet Explorer 7, мы наконец-то получили полную поддержку PNG во всех основных браузерах. Тем не менее, если вы решили использовать эффект полупрозрачности, ничто не должно вас останавливать, потому что и в IE6 он может работать хотя требует немного дополнительных усилий.

Полупрозрачные PNG в IE6, AlphaImageLoader

В Internet Explorer доступны фильтры, применить их можно с помощью CSS, хотя они и не являются частью официальной спецификации CSS, для поддержки полупрозрачных PNG, в Microsoft создали специальный фильтр — AlphaImageLoader.

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

Если вы примените AlphaImageLoader к исходному элементу img он, конечно, будет работать как и положено, на загружаемое поверх изображение без прозрачности закроет результат его работы. То же самое и с применением AlphaImageLoader вместе с исходным фоновым изображением, несмотря на то, что AlphaImageLoader снова работает нормально, но загружаемое за ним фоновое изображение не будет полупрозрачным.

Реальное использование AlphaImageLoader

Давайте вернемся к примеру Channel 49, the TV station in Topeka, вот как он выглядит в IE6:

HTML код индикатора погоды выглядит так, как вы и ожидали:

<div id="weather">
  <a href="/weather/">
    <img id="weatherImage" 
      src="http://media.49abcnews.com/ »
      img/weather/overcast-night.png" alt="Overcast" /></a>

  <p>
    <a href="/weather/">Currently in Topeka, KS:<br />
    <strong>82&deg; Overcast</strong><br />
    <span>Get the forecast and more...</span>

    </a>
  </p>
</div>

Как видите HTML код для всех браузеров совершенно одинаковый, все исправления вносятся только в случае IE6 с помощью JavaScript. Я использую DOM, чтобы удалить элемент img и заменить его элементом div с примененным к нему AlphaImageLoader. Соответствующий скрипт закрыт от других браузеров с помощью условного комментария.

<!--[if lte IE 6]>
    <script src="http://media.49abcnews.com/js/fixWeatherPng.js"
        type="text/javascript"></script>
<![endif]-->

Благодаря строке if lte IE6 скрипт включается в документ, только если версия Internet Explorer 6 и меньше. Все остальные браузеры, включая IE7, полностью игнорируют его.

Сам скрипт тоже достаточно прост:

window.attachEvent("onload", fixWeatherPng); 

function fixWeatherPng() {
  var img = document.getElementById("weatherImage");
  var src = img.src;
  img.style.visibility = "hidden";
  var div = document.createElement("DIV"); 
  div.style.filter = "progid:DXImageTransform.Microsoft.
    AlphaImageLoader(src='" + src + "', sizing='scale')"; 

  //Some 49abcnews.com-specific CSS styling omitted for brevity.

    img.replaceNode(div);
} 

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

Использования JavaScript для создания элемента с AlphaImageLoader, позволяет сохранить CSS валидным и исключить использование несемантического div в разметке.

Выводы

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

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

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

Статья взята из книги Web Standards Creativity от Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin, и Rob Weychert опубликованной friends of ED. Copyright Jeff Croft 2007. Использована с разрешения Apress, Inc.

Похожие статьи

• Кроссбраузерная подсветка счетчиков