Cheshirecat

译文:PNG图像在网页设计中的创造性应用

Nov 04 2007 Post On Web Standards

原文名称:Creative Use of PNG Transparency in Web Design
原文地址:http://www.digital-web.com/articles/web_standards_creativity_png/
译文地址:http://www.cheshirecat.cn/web-standards/39.htm
原文来源:
摘录自网页标准创造力(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.版权所有 Jeff Croft 2007,Apress 出版公司许可使用.

PNG, GIF, and JPEG

PNG图像在网页设计领域中应用很大程度上被忽视了,大部分都有很好的理由.直到最近, Internet Explorer 7的发布才有所改观.尽管还无法在所有的浏览器中实现这种图像格式的所有特征,但是这样一来至少它已经可以在所有的浏览器中正常稳定的工作,因为 Internet Explorer 7对PNG的支持以及在对低版本的浏览器使用CSS技巧,这样很大程度上了促使PNG图片在设计工作中的应用.

PNG,通常将其发音为”ping”,表示便携式网络图像(Portable Network Graphics),是一种无损压缩的位图格式.更通俗点说,是一种在不降低图片质量的情况下去减少图片大小的方法.它最初的出现是为了替代已经到处可见的GIF格式,对图像软件来说,后者通常需要获取一个GIF专利权(伴随GIF/LZW专利权的过期,它的专利权也不复存在).PNG也是一个国际标准(ISO IEC 15948:2003),同时也是W3C官方推荐的图像格式.

另外,作为一个免费可用的格式, PNG提供给设计者很多超越GIF的专有特征:

更大的压缩比:对于大多数图象,PNG比GIF 文件更小;
更大的色深:PNG提供48位真彩色,而GIF只提供了256位色;
α通道透明:GIF只提供2进制透明,如果启用α通道,PNG提供实质上能提供无限制的透明效果.

值得提及的是PNG不支持GIF格式所支持的动画,这里需要涉及到一个叫做MNG(Multiple-image Network Graphics)标准,它可以使PNG实现动画,不过还没有被广泛的支持.

为什么GIF依然这样受欢迎

说到这里,你可能有这样的疑问,既然PNG这么多优点,那它为什么不是网络上最通用的图像格式.答案是,大部分人误解了这种格式以及支持它的浏览器.

由于 Internet Explorer 6以及更低的版本不完全支持PNG特征(包含α通道透明),而人们却认为Internet Explorer根本就不支持PNG或者至少不支持透明.事实上,Internet Explorer 5以及Internet Explorer 6 已经足够支持PNG规范,能让PNG功能上等同于非动画的GIF图像.其他比较著名的浏览器,包括Firefox,Netscape 6及更高版本,Mozilla,Opera 6及更高版本,Safari,Camino都提供PNG透明的全部特征支持.

排除浏览器支持的误解,GIF内置的动画支持是也继续是它能有这样的普及度的一个关键原因.近几年,GIF动画应用的热度有所下降,转而是其他的技术,尤其是Flash越来越普及.

透明特征也是一个设计者选择图像元素格式的重要参考点.尽管PNG提供了更多的透明度扩展,网页设计人员依然被要求创建适合低版本浏览器兼容的GIF格式.使用CSS,可以将GIF图片放入低版本浏览器和将PNG图片载入支持它的浏览器.但是创建两套图片对一个网页设计人员来说一个额外的劳动,所以结果就是大部分的设计者会使用它们的共有特征,也就是仍然采用GIF格式.

说到最后,仍然会有GIF仍然受欢迎的其他原因.但是它们中的大多数都是建立在误解或者某种条件情景下的.了解PNG如何工作的一些知识和如何跨浏览器使用,这样你就可以利用这种格式而不在去依靠GIF.

什么是JPEG?

JPEG,网络上另外一种非常普及的文件格式,是除去GIF,PNG之外的另外一种不错的照片存储格式.PNG无意和JPEG竞争.JPEG的有损压缩(每保存一次质量就会有所损失?)在处理图片上会比PNG产生更小的文件,而PNG在文本,线条,标志,纯色的图片将会产生更小的文件.

PNG的一些极佳应用

现在我们看一下PNG在网页设计方面的极佳应用.我已经将每个例子所包含的文件放在一个单独的文件夹里放在这个章节的代码下载里,你可以在friends of ED中找到.

渐变

在过去的几年.渐变—在两种或多种颜色之间平滑的过渡,已经成为了网页设计人员的最爱.尤其是在摒弃了深度和材质之后,微妙的,简单显明的填充显得鲜明洒脱.

GIF某些时候是渐变效果的好选择,如果渐变只是简单的两色渐变,GIF会工作的很好.尽管这样,256色的限制常常会导致不希望出现的不美观的条纹出现在渐变中.对于JPEG来说,它可以生成相当美观的渐变,这样导致的结果就是文件会不可思议的大.JPEG渐变一般来说会表现的不错,但是要清楚,JPEG是有损压缩的,意味着重新生成的图片将没有原始的未经压缩图片的高保真度.

典型的背景渐变样式常被用于按钮,盒子等等.看起来像图5-1.左上方向顺时针宣传,分别是原始图像,GIF图像,PNG图像及JPEG图像.可以看到PNG格式的图像的文件大小是最小的(515byte).约是GIF格式的四分之一.JPEG比PNG稍微大一些,为637byte.

图5-1.Photoshop的保存为web格式面板显示了同一图像,不同格式的文件大小差异
如果图片需要在任何背景下都正常工作

某些情况下必须创建一个在不同背景上显示相同效果的图片,常见的是标志和图标.这种角色在传统情况下是GIF所担当的,但是有太多的原因PNG可取GIF而代之.在标志和其他简单的作品上PNG总是最小的文件.另外,PNG自身的透明功能使我们能够创建一个单一的文件就能够正常工作在任何背景之上.PNG可以提供和GIF相同的二进制透明,但是同时提供一些相当不错的α透明通道效果.

以KTKA Channel 49 News in Topeka, Kansas为例,世界在线工作小组在网站的头部创建了一个漂亮的天气图标来显示当前的天气状况.但是聪明的程序会在白天和夜间分别显示不同的配色方案，天气图标需要在不同的背景下表现相同的显示效果。如图5-2，5-3

图 5-2. 49abcnews.com 头部，白天

图 5-3. 49abcnews.com 头部，夜间

使用PNG,可以做到不管它出现在白天还是夜间的背景上,效果都是一样的.因此,在改变背景的情况下,我不需要重新制作任何的天气图标,因为α通道透明的PNG文件在任何情况下都显示的不错.

如果我选择GIF文件的话,由于受到GIF二进制通道透明的限制,结果看起来就是图5-4,我不觉得我们都会认为这样的效果会很好.

图5-4. 49abcnews.com 头部, 夜间, 将PNG替换为GIF文件
半透明的HTML覆盖效果

另外一个常用的图片设计技术是将一个部分透明的区域覆盖在照片或其他图像上面,通常包含一些文本.这需要考虑到将可读文本应完全排除在模糊的层之外.设计师Wilson Miner 将这个效果用在了Gingeroot 珠宝站点上,效果如图5-5.

图5-5. Gingeroot, 设计者为天才的设计师 Wilson Miner

Wilson 将透明区域和文本包含在JPEG图片中,在此之前他事先使用Photoshop将这些创建.效果实现后它工作的不错,同时也完全适合了这个站点的需要.但是如果半透明区域上面的文字需要频繁修改,甚至可能是对每个网站的访问者都显示不同的内容呢?在这种条件下,我们就不能把文字直接合成到图像中了.文本需要使用HTML和CSS来实现.使用PNG的α通道透明,我们可以完全实现Wilson的样式而不需要将文本与图像合成.

我选择了我女儿的一张照片,并把它放入到一个附有基本CSS样式的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”, Helvetica, 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 »</a></h1>
</div>
</div>
</body>
</html>

图:5-6.使用HTML和CSS模仿Gingeroot,当前未设置透明

现在我们在Photoshop中创建了一个边长均为1px的正方形图像,将其填充为淡蓝色并将图层的不透明度设置为70%.最后,我把这个图像保存为Photoshop的PNG-24格式,并启用透明,然后我将这张生成的图片作为背景覆盖在原来的图片之上取代原来的灰色填充,效果如图5-6

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

图5-7.为PNG图像格式添加透明度,几乎完全复制了Gingeroot样式

实际上,Wilson Miner将相同的想法表现在Gingeroot站点的另外一个地方.在显示当前产品的页面上,一个标有ONSALE标识的透明PNG图像出现在项目产品图片的左上角.效果见图5-8

图5-8Gingeroot项链页面使用了透明的PNG图像背景放置在产品图片之上

我也将这个技术用在了Explore Steamboat上,一个专注科罗拉多州极限活动的事件,娱乐和活动项目的网站,如图5-9

在另外的一个创新性的例子中,设计师Bryan Veloso 使用渐现的方法为固定在底部的一张透明PNG图像添加了效果.当你滚动到页面底部时,就觉得文字逐渐显现在稀薄的空气中.你可以去Revyver.com(如图5-10和图5-11)亲眼看一下效果会更好.另外,排列在文字前方的那个树产生了一个出人意料的效果,你第一次看到时就已经会非常惊讶.

图5-10.在Revyver.com,设计师Bryan Veloso使用了透明的PNG创建了一个渐现的效果,并把它排列在文本内容的前面

图5-11.在Photoshop中仔细看一下Bryan的底部PNG图像,我们会明白如何利用α通道实现这种设计效果.
水印

在我的个人站点上,我放置了我的一个图片库.这些图片是上传到Flickr 并且通过它开放的应用程序接口(API)显示在我的站点上.

图5-12. jeffcroft.com 上的图片详情页面

如果我想把我的个人标志放置在所有的图片上呢?我可以在Photoshop中打开每一张图片,然后放上我的标志保存.尽管可以这样,对于这些频繁更新的成千张的图片,这项工作可怕而不切实际,如果我不是在电脑而是使用的我移动电话上传图片到Flickr的话,标志能不能自动添加到图片上面?PNG能帮我们做到.

HTML代码如下:

我在Photoshop中创建了一个边长为80px,颜色为白色的一个网站标志,将其不透明度设置为15%,然后使用标准的PNG-24优化设置导出,然后我用下面的代码将其添加到HTML代码中.

使用CSS将其定位到左上角.

a.photo-container {
position: relative;
display: block;
}
img.watermark {
position: absolute;
top: 2em;
left: 1em;
}

这样图片就被自动加入了水印,这个PNG水印浮于图片之上,效果如图5-13.把这个放入到我的内容管理系统的模版中,不用做重复2000多次就可以在每张图片上添加水印.

图5-13.显示在照片左上部的透明PNG水印

如果你想让这个功能更智能一些,可以使用DOM的方法将水印标记代码插入HTML代码中.

蒙版效果

它和上面提到的水印实现的方法非常相似,但是产生的效果却不相同.这次,我在Photoshop中创建了一个大一些的网站标志,另外不同的是这次标志是透明而背景是白色的,这是因为例子中页面的背景色是白色的.效果如图5-14

图5-14 在Photoshop中为透明PNG蒙版效果创建的图像

正如我说的,在技术方面它和水印效果的实现应该说是完全相同的,看一下下面的HTML代码:

然后是CSS

a.photo-container {
position: relative;
display: block;
}
img.mask {
position: absolute;
top: 0;
left: 0;
}

看图5-15中完成后的效果图

图5-15 PNG蒙版位于照片之上形成的打孔效果
颜色可变的图标

通过实现蒙版效果的方法,我们可以只通过CSS就可以得到颜色可改变的图标. 想法简单易行:将一个透明的图像,图标符号放置在正方形,长方形或者其他形状上,然后使用CSS将这些形状填充一些单纯的颜色.通过CSS简单的去改变这些背景颜色,你就能查看更改颜色后的各种效果.

我们需要一组普通的体育运动符号,如图5-16

图5-16 一些普通的运动图标

我创建了一些透明的打孔图标符号,方法和我在上面的蒙版效果示例中一样,如图5-17

图5-17.为每个图标创建镂空的PNG蒙版

将图像缩放到合适的尺寸(在这里我选择了长宽均为48px),将它们保存为Photoshop中启用透明的PNG-24的默认格式.接下来我创建了一个Xhtml文件将每个图像与之关联起来.

我将背景色设置为#cc0000(大红色),结果就像红色的光穿过打孔形状,效果如图:5-18.由于PNG支持部分透明像素的消除锯齿,边缘看起来相当光滑.

图5-18 作为网页图标的透明PNG,CSS设置的背景穿过了图像中打孔的部分

很容易的通过CSS文件去更改图标的颜色,效果如图5-19

img {
background-color: #000066;
}

图5-19 更改背景颜色后,图标显示为其他颜色

当你需要重新设计你的站点时,使用这种简单的颜色更换方法非常简便,这样你就不需要重新制作所有的图标图像了,所做的只是在CSS中更改一下颜色.这种方法也是很容易实现鼠标翻转的一种方法,你可以设置默认颜色为红色,鼠标划过的颜色为蓝色.

你还可以使用CSS为蒙版图标添加更多的样式,例如添加边框,如图5-20

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

图5-20 使用CSS增加一个边框去增强图标外观显示

Dan Cederholm 2003年在他的blog上写了一篇非常相似的文章,PJ Onori并基于此技术在他的站点上做了一组不错的图标(Sanscons）.

尽管如此,我使用打孔而不是白色的符号颠倒了一下他们的想法.他们使用的是放置在一个透明的背景之上白色的符号,效果显示的非常好.这样的话,你设置的CSS背景颜色将是穿过环绕在符号周围的正方形或矩形.

Dan和PJ都用透明的GIF图像替代了透明的PNG图像,这种方法对他们这样的应用说来已经足够的,因为他们创建的是非常小的位图.如果使用PNG的话,你可以利用PNG消除锯齿和部分透明的特点将这个技术应用在更多细节的图标之上.

到此为止,但是这些技术在浏览器中能正常工作么?

我知道你在想什么,所有的PNG透明效果看起来的确漂亮,但是完全适用么?

好消息是几乎所有的现代浏览器都完全支持PNG图像特征,包含我在例子中一直提到的α通道透明.Safari的全部版本,Firefox的全部版本,Opera 6 以上版本,Netscape 6以上版本和Mozilla全部版本会很顺利的显示出效果,坏消息就是大部分用户使用的Internet Explorer是唯一我没有提及到的.

Internet Explorer 6 及更低版本的不支持α透明创建的PNG格式.但它一直也是大部分人上网使用的浏览器,或者说是没有其他的选择,因此这个很明显的漏洞存在的这些年让许多网站设计人员摒弃PNG,但是随着Internet Explorer 7的发布,所有的主流浏览器都能完全支持PNG特征了.还有一点,就是有一个折衷的办法让Internet Explorer 6 及更低版本也能支持PNG的α透明特征,因此,如果你还想使用这些效果,继续往下面看.其实只需要稍微变动,Internet Explorer6以及更低版本就没有问题了.

Internet Explorer善后工作: AlphaImageLoader

Internet Explorer包含许多专有的滤镜,他们被定义在CSS文件中,但是他们不是官方CSS标准的一部分,换句话说,他们不是网页标准.不幸的是Internet Explorer6及更低版本不能完全支持W3C推荐的PNG图像格式,而微软包含的AlphaImageLoader滤镜却能弥补他们的这个缺点.

根据微软官方相关页面的说法, AlphaImageLoader将图像显示在对象背景层与内容层之间,不超出对象边界的这样一个位置.换句话说,AlphaImageLoader载入一个PNG图像的时候其透明的特征没有变化,不过是将其作为它自己的一个层来载入的,位于它所作用的那个对象的内容层之下.PNG使用这种载入方法的图像和背景图像很相似,但是它不是前景图像,尽管它的的确确的处于背景层之上.

简而言之,你可以很简单的将AlphaImageLoader CSS应用于某个图像去产生你想要的结果.这样做将会将图像载入2次,第一次连同透明特征载入,第二次以无透明特征对象的前景内容载入,这样就遮住了透明的图片.

你不能将一张透明的PNG图像作为一个(X)HTML元素的背景图像,然后期望AlphaImageLoader滤镜能如你所想的那样在Internet Explorer中正常工作.记住AlphaImageLoader将你的图像插入对象的背景层和前景层之间,因此,它可以加载你图像的全部透明特征,然后仍然将会将背景图像载入,而背景图像是不能显示你漂亮半透明的像素的.

AlphaImageLoader实际应用

现在我们回去看一下以前例子中如何让Internet Explorer如何正确的加载图像.在Channel 49那个例子中,图5-21是站点在Internet Explorer 6 中的显示效果

图5-21 49abcnews.com头部,在Internet Explorer 6/Windows的显示效果,具有PNG完整的透明特征.

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° Overcast</strong><br />
<span>Get the forecast and more…</span>
</a>
</p>
</div>

你可以看到这里的关键是那个PNG图像,但是Internet Explorer6完美的将其加载了.秘密就是Javascript,我使用了一些DOM脚本去移除img元素并填入一个div元素,你可能猜到了,同时还在CSS中给它应用了AlphaImageLoader方法.Javascript使用微软内置在Internet Explorer中条件语句将其载入到页面中,不过这些条件语句是完全不符合标准的.条件语句会根据根据Internet Explorer特定的版本载入目标代码.

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

在上段代码中第一句表达的是如果小于Internet Explorer 6的条件,脚本元素只有在Internet Explorer版本小于或等于6时才会被包含在文档中.其他的浏览器,包括即将(已经)发布的Internet Explorer 7,将会完全忽略.

那fixWeatherPng.js里面包含的javascript代码是什么,看一下:

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’)”;
// <i>Some 49abcnews.com-specific CSS styling omitted for brevity. </i>
img.replaceNode(div);
}

我们一步一步分析一下脚本是如何工作的.首先,我们告诉浏览器页面加载时运行fixWeatherPng函数,剩下的脚本就是函数本身了.函数根据我们需要处理的图像的id属性获取元素然后将它存储为变量img,同时将其src属性保存为变量src,然后我们在CSS中将其属性visibility 设置为 hidden,接着我们创建了一个新的div元素并将其存储为一个变量div,再将AlphaImageLoader滤镜以单独的CSS样式插入,同样,无语意的div元素也是以独立于页面的.所有的代码都被条件语句所控制,其他浏览器根本无法执行这段微软专有的代码.

要是你必须做一些无用的事情,至少你能够把它抽象化并在不需要它的时候可以将其隔断.

总结

PNG,作为一个图像格式,它提供了许多当前被广泛使用的GIF格式无法提供的特征.事实上,这些特征足以使其替代其他非照片的图像格式,但是Internet Explorer对PNG的扩展特征缺乏有效的支持,例如无法支持α通道透明,致使许多开发人员敬而远之,但是在这里有两个非常好的原因来说明为什么不需要对PNG心存恐惧.

首先,不管是Internet Explorer 6还是更低的版本是如何对PNG缺乏支持,但是仍然对你可以用GIF实现的效果提供了支持,当然除GIF动画,并且PNG几乎在文件大小,传输速度以及带宽占用上占尽了优势.

其次,Internet Explorer7提供了PNG的α通道透明的完全支持,使用其半透明选项原则上说可以实现无穷的效果.我猜想那些使用不同的方法去使用透明PNG的设计人员,例如在本章节中所列出的,将会打开一个迄今无法达到的完全的样式应用高度的大门.在这里我只是给了你一个可行的方法去告诉你如何创新使用PNG和透明效果,但是别止步,探索属于你的创新.

Categories

Archives

Links

RSS Feed

FanFou

译文:PNG图像在网页设计中的创造性应用

3

Add Comment