第 5 章：图片与动态图片

本章大纲

5-1　一般图片
- 5-1-1　问题
- 5-1-2　对策
5-2　复杂图片
- 5-2-1　问题
- 5-2-2　对策
5-3　闪烁与动画图片
- 5-3-1　问题
- 5-3-2　对策

本章将针对一般图片的常见用途，分别说明使用图片内容的实务技巧，并以第 2 章介绍的角色来说明这些亲和力设计能有什么帮助。

5-1　一般图片

正如同第 4 章〈网页多媒体〉所述，在网页当中适当地加入图片，可以增进用户对内容的了解，也可以改善网页使用的感受。美食、旅游博客或新闻网站少不了照片，3C 论坛也总是可以看到各种开箱文、叠叠乐／排排站大合照，许多报纸杂志网页上还会附上另外绘制的示意图，这些图片都可以帮助用户更快掌握报导内容。

但是加入图片的同时，也有可能产生新的问题；不是所有的用户能能直接从图片受益，有的用户反而会因此而增加困扰。

5-1-1　困扰

麦克正在使用 Opera 浏览器浏览网页，但是网络速度实在太慢了，因此麦克照例关闭了图形显示；麦克可以看到文字字体变化，可以看到网页排版，也可以看到不同的色彩、表格、线条，但是看不到任何图片。

不显示图片的时候，Opera 浏览器也还是会试著保留图片所占据的位置；如果图片有指定宽、高的话，那些空间也会被保留下来，因此麦克会知道那儿有张图片，但是并不会知道图片上有些什么。如果这张图片很重要，含有网页文字部分所未涵盖的意义，那么麦可可能会错过开启图片显示的机会，而对网页内容产生误解。

范例 5-1：第一张图片未指定宽、高，第二张图片则用了 width="180" height="240" 指定图片宽 180 像素、高 240 像素。范例中的 border="1" 则仅是为了彰显图片轮廓之用而已。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
  <meta http-equiv="Content-Language" content="zh-cn" />
  <title>范例 5-1</title>
</head>
<body>

<p>
图片未指定宽度与高度：
<img src="breakfast-small.jpg" border="1" />
</p>

<p>
同一张图片，指定宽度 180 像素，高度 240 像素：
<img src="breakfast-small.jpg"
 width="180" height="240" border="1" />
</p>

</body>
</html>

图 5-1：范例 5-1 当中，图片有无指定宽、高，一般的图型浏览器看起来可能没什么不同。

图 5-2：但是图形未加载时，图形浏览器则会做出不同的反应。有指定宽、高的图片，Opera 会根据这些数值预先占据网页空间，而且‘图片’字样也会消失。

5-1-2　对策

表 5-1：与使用一般图片有直接关联的万维网联盟规范内容

规范名称	《网页内容亲和力方针 1.0》	《网页内容亲和力方针 2.0》
相关内容	方针一（检核要点 1.1）	原则一（方针 1.1）

在 HTML 4.01 及 XHTML 1/1.1 的 <img /> 卷标当中，有个 alt 属性，功能是提供图片的替代文字；在无法显示图片的情况下，这个属性的值就会表达出来。因此在前述的情境当中，就能够以替代文字来化解无法知道图片内容的困扰。

举例来说，下列的网页用了一张图片来表达一份早餐的内容：

图 5-3：范例 5-2（见下文）所形成的网页。

这个很简单的网页源代码如下：

范例 5-2：做出图 5-3 网页的源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
  <meta http-equiv="Content-Language" content="zh-cn" />
  <title>范例 5-2</title>
</head>
<body>

<p>
今天早上我吃了：
<img src="breakfast-small.jpg" />
</p>

</body>
</html>

在麦克的 Opera 浏览器当中，因为关闭了图片显示，所以麦克看到的画面会是这样：

图 5-4：一样是由范例 5-2 所形成的网页，但是关闭了图片显示，在 Opera 浏览器当中，图片就被‘图片’字样取代了。

由于网页中的图片没有提供替代文字，因此麦克并不知道网页作者到底吃了什么当早餐。要将图片加上替代文字，只需要加上 alt 属性，并且填入替代文字作为这个属性的值；这么一来，麦克就算关闭图片显示，也能够知道网页内容为何：

范例 5-3：修改自范例 5-2 的网页源代码，唯一的不同之处在于 <img /> 卷标多了 alt 替代文字属性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
  <meta http-equiv="Content-Language" content="zh-cn" />
  <title>范例 5-3</title>
</head>
<body>

<p>
今天早上我吃了：
<img src="breakfast-small.jpg"
 alt="两片烤土司、荷包蛋、煎培根、腊肠、豆子" />
</p>

</body>
</html>

当图片不显示时，图片的替代文字会接替图片在文件流向中的位置，串接在原本的前后文字之间。因此撰写替代文字内容时，应该要让这些内容可以跟上下文接连；以范例 5-3 来说，不论麦克改用 Lynx 纯文字浏览器或未开启图片显示的 Opera 图形浏览器来观看网页时，都可以看到有意义的内容：

图 5-5：将范例 5-2 的网页源代码修改成范例 5-3 后，用 Lynx 纯文字浏览器看起来就跟正常的语句没有不同。

图 5-6：一样是范例 5-3 的网页，在 Opera 浏览器关闭图片显示时，用户仍然可以了解其意义。

替代文字要能够取代原本的图片，而不是描述那里有一张图片；所以同样的图片，如果替代文字改写做‘早餐的照片’就不是个好的写法。有一些亲和力检测软件，基于这样的原因，检查替代文字时若发现‘的照片’、‘的图片’、‘image’等字样时，就会提出警告。

有些用户代理还可以把网页中所有的图片列出来，用其替代文字做成菜单，供用户取用。此时图片替代文字没有前后文，因此替代文字单独存在时，也要保有完整意义。

如果图片后马上跟著图片说明，那么图片再放一次替代文字，会使得网页充满冗赘的内容。这种情况下应该要用 alt="" 来提供没有内容的替代文字。‘没有内容的替代文字’与‘没有替代文字’并不相同，因为不指定替代文字时（后者），浏览器与用户代理可能会擅自加上‘图片’或图片文件文件名（本例中就会是‘breakfast-small.jpg’），使得网页内容更难阅读使用。

范例 5-4：前后两张图片的差别在于前者用了 alt="两片烤土司、荷包蛋、煎培根、腊肠、豆子" 替代文字，后者则用 alt="" 空字符串替代文字。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
  <meta http-equiv="Content-Language" content="zh-cn" />
  <title>范例 5-4</title>
</head>
<body>

<h1>多写了替代文字</h1>

<p>今天早上我吃了这些东西：</p>

<p>
<img src="breakfast-small.jpg"
 alt="两片烤土司、荷包蛋、煎培根、腊肠、豆子" /><br />
图：两片烤土司、荷包蛋、煎培根、腊肠、豆子
</p>

<hr />

<h1>同样的内容，使用 alt="" 空字符串替代文字</h1>

<p>今天早上我吃了这些东西：</p>

<p>
<img src="breakfast-small.jpg" alt="" /><br />
图：两片烤土司、荷包蛋、煎培根、腊肠、豆子
</p>

</body>
</html>

图 5-7：范例 5-4 的网页，在图形浏览器中两种写法似乎没有分别。

图 5-8：同样是范例 5-4 的网页，一旦把图片显示关闭，马上就能看出不同。如果图片旁就有说明文字，那么多写的图片替代文字反而会让内容重复累赘。

图 5-9：范例 5-4 的网页在 Lynx 纯文字浏览器当中，两种写写法的差异更为直接明显。

有些网页设计师会运用切图的技巧，把一张大图切成若干小图排列在网页上。虽然这些图片全部加载时看起来是一张图，但其实分成了许多文件，在网页源代码当中也用了许多 <img /> 卷标；这种情况下要提供替代文字，则应该在第一张图片撰写完整的替代内容，之后的几张图片一律使用没有内容的 alt="" 替代文字。

范例 5-5：三张图片接连显示的简单作法。请注意只有第一张图片的 alt 替代文字写著完整内容，接下来的其它图片都用 alt="" 空字符串替代文字。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
  <meta http-equiv="Content-Language" content="zh-cn" />
  <title>范例 5-5</title>
</head>
<body>

<p>今天早上我吃了这些东西：<br />
<img src="breakfast-01.jpg"
 alt="两片烤土司、荷包蛋、煎培根、腊肠、豆子"
 /><img src="breakfast-02.jpg" alt=""
 /><img src="breakfast-03.jpg" alt="" />
</p>

</body>
</html>

图 5-10：范例 5-5 在图形浏览器中，用三张图片接成一张。

图 5-11：由于有两张图片的替代文字用了 alt="" 空字符串，因此在 Opera 不加载图片的时候，用户看起来也以为是一张图，不会发现其实是三张图接起来的。

图 5-12：因为范例 5-5 恰当地撰写了替代文字，因此在 Lynx 纯文字浏览器看起来也很正常，没有多馀累赘的内容。

除了照片以外，网页上也会有一些图表，例如成分比例圆饼图，这种图片的替代文字，就应该把图表内容──也就是个成分比例写出来。如果图表很复杂，那么就要挑选网页所要表达的重点部分；举例来说，一份列著十种人物组成的图表，如果真正的用途是凸显其中三种的对比，那么替代文字只需要涵盖这三种人物组成即可。

范例 5-6：只有一张圆饼图的网页，圆饼图的 alt 替代文字清楚地描述了图片内容。此范例中的圆饼图是用 HeartRails Graph 网站（http://graph.heartrails.com/）所制作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
  <meta http-equiv="Content-Language" content="zh-cn" />
  <title>范例 5-6</title>
</head>
<body>

<p>
<img src="chart-01.png"
 alt="网络上遇到的女孩：恐龙 60%，反串 30%，正妹 10%" />
</p>

</body>
</html>

图 5-13：范例 5-6 有一个很简单的圆饼图。

图 5-14：因为是个很简单的圆饼图，所以替代文字就是列举所有的成分及比例。

范例 5-7：看起来跟范例 5-6 很像，但是用的图片复杂度并不同。请比较图 5-13 与图 5-15。此范例中的圆饼图也是用 HeartRails Graph 网站（http://graph.heartrails.com/）所制作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
  <meta http-equiv="Content-Language" content="zh-cn" />
  <title>范例 5-7</title>
</head>
<body>

<p>
<img src="chart-02.png"
 alt="网络上遇到的女孩：恐龙最多，有 52%，
 其次是诈骗集团 20%，真正的正妹只有 1%" />
</p>

</body>
</html>

图 5-15：范例 5-7 的圆饼图就复杂得多了。

图 5-16：虽然图表比较复杂，但是替代文字还是要尽量精简，带出重点即可，不用写成流水帐。

随著图片内容越来越复杂，图片替代文字也会越来越长，但是 alt 属性的内容并不能无止尽地扩充，所以替代文字也会有字数限制。IBM 的 WebXact 规范把替代文字字数上限订在 150 个字元，JAWS 读屏软件也是以 150 个字元当做朗读的单元；有些亲和力检测软件把上限订在 80 个字元，甚至是 50 个字元。总括而论，替代文字应尽量保持在 50 个字元内，无论如何都不要超过 150 个字。

前述的字数都是以英文、数字为准的算法，中文网页的算法会有点不同。采用 GB2312 编码的网页，原则上是按照‘一个中文字占两个英文字元’来换算，也就是替代文字应尽量保持在 25 个中文字内，无论如何都不要超过 75 个中文字；采用 UTF-8 编码的网页，则可以直接采用英文的字数。

不过若此时再多考虑一下搜寻引擎最佳化，理想的替代文字应该以 17 个中文字内为目标，因为谷歌及雅虎等搜寻引擎，利用替代文字搜寻图片内容时，通常在搜寻结果的画面中，只会呈现 17 个中文字的邻近内容。搜寻引擎也是网页亲和力的服务对象之一，因为搜寻引擎会利用图片的替代文字及前后脉络，来猜测图片的意义；具有亲和力的网页，自然而然也就实现了搜寻引擎最佳化。

除了替代文字外，图片还可以增添‘工具提示’。所谓工具提示，指的是将鼠标光标放置在图片上时，画面上会迸出的提示文字。提示文字实际上是 <img /> 卷标中的 title 属性值内容，有些浏览器及用户代理会在图片缺少 title 属性时，自动取用 alt 属性，也就是拿替代文字来当做工具提示，但并非所有的浏览器都有这样的行为，所以 title 属性不宜省略不设。因为替代文字只会在未启用图片显示的情境下出现，所以工具提示可以在显示出图片时，弥补替代文字的不足。

范例 5-8：除了 alt 替代文字属性外，这里还写了 title 属性。本范例中这两个属性的值相同，但并不是非这样不可，实务上可以分别撰写不同的内容，以配合不同的使用环境。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
  <meta http-equiv="Content-Language" content="zh-cn" />
  <title>范例 5-8</title>
</head>
<body>

<p>
今天早上我吃了：
<img src="breakfast-small.jpg"
 alt="两片烤土司、荷包蛋、煎培根、腊肠、豆子"
 title="两片烤土司、荷包蛋、煎培根、腊肠、豆子" />
</p>

</body>
</html>

图 5-17：范例 5-8 用了 title 属性，因此在浏览器当中会出现‘工具提示’。以 Opera 为例，当鼠标光标移到这样的图片上时，光标旁边就会出现 title 属性的值，而且这些文字也会出现在浏览器底端的状态列上。

结果

麦克从中获益了。因为当使用 Opera 浏览而把图形选项关闭时，麦克会在图片的位置看到替代文字。
谷歌从中获益了。因为 Google 的漫游机器人会对替代文字建立索引；这不仅对一般的搜寻有效，更会用于图片搜寻功能。

5-2　复杂图片

前一节提到了替代文字的字数限制：中文尽量保持在 17 个字内，英文及数字尽量保持在 50 个字元内，无论如何都不要超过 150 个字。万一图片真的很复杂又很重要，既不能舍弃也没办法在这个字数限制内说清楚，那该怎么办？

5-2-1　困扰

忙碌的静怡总是压榨著分分秒秒，身为业务经理，静怡就是有办法一心二用，同时看跟听不同的东西；静怡发现用 JAWS 读屏软件来念出网页内容，就可以同时听网页内容，并处理手上的文件，相当方便。不过静怡会看的网页当中，常常会有复杂的图表，JAWS 念出来的替代文字总是不够清楚，静怡得停下手边的工作，抬头看看屏幕上的图表，才有办法明白图表的意义。静怡觉得，如果有办法让 JAWS 找到图表对应的解释并念出来的话，工作会更有效率。

5-2-2　对策

表 5-2：与使用复杂图片有直接关联的万维网联盟规范内容

规范名称	《网页内容亲和力方针 1.0》	《网页内容亲和力方针 2.0》
相关内容	方针一（检核要点 1.1）

<img /> 图片卷标中，除了有 alt 替代文字属性外，还有一个 longdesc 长描述属性，专门用来描述替代文字所无法说清楚的内容。longdesc 的用法与 alt 不同，alt 属性的值就是替代文字本身，然而 longdesc 属性的值却不是长描述本身，而是一个网址，指向说明图片内容的专属网页，该网页的内容才是真正的‘长描述’；longdesc 除了用完整的绝对网址外，也可以用相对路径。举例来说，如果在 http://foo.com/bar.html 网页上有一张图片用了 longdesc 属性，则下列两种写法是相同的：

<img src="paz.png" longdesc="http://foo.com/bar/imagedesc/desc-paz.html" />

<img src="paz.png" longdesc="imagedesc/desc-paz.html" />

上例中，用来说明 http://foo.com/paz.png 图片的网页位于 http://foo.com/imagedesc/desc-paz.html，内容主要是以文字段落来代替图片意义，但并非不能使用图片；不过一来本来的图片都已经复杂到需要用额外的网页来说明了，说明网页就应该要尽量简化，以免用户越看越迷糊，二来这个网页跟网站上所有其它的网页一样，必须符合网页标准规范，设计时也要考虑亲和力。

实际上来说，当用户取用长描述内容时，原本网页的阅读动线会打断，焦点从本来的网页跳到长描述网页，因此在长描述网页底端应加入一个超级链接，搭配原本网页当中的定位锚，让用户能回到原本的阅读动线。

范例 5-9：在这个内含图表的 chart02.html 网页中，用 longdesc 属性连结到相同路径下的 chart02desc.html 长描述网页文件。除此之外，网页中的这张图片还用 <a> 卷标加上了 id 为 chart02 的定位锚。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
  <meta http-equiv="Content-Language" content="zh-cn" />
  <title>范例 5-9（chart02.html）</title>
</head>
<body>

<p>
<a id="chart02">
<img src="chart-02.png"
 alt="网络上遇到的女孩：恐龙最多，有 52%，
 其次是诈骗集团 20%，真正的正妹只有 1%"
 longdesc="chart02desc.html" />
</a>
</p>

</body>
</html>

范例 5-10：chart-02.png 图片的长描述网页 chart02desc.html，请注意在文件结尾处有个超级链接，让用户连回含有 chart-02.png 图片的网页，并且用 #chart02 直接连回网页中图片所在的定位锚。由于 JAWS 会将长描述网页开在新窗口，其它的读屏软件却不会，因此最后并不以程序方式自动关闭网页，而是用文字提示用户，让用户依照需求自行操作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
  <meta http-equiv="Content-Language" content="zh-cn" />
  <title>范例 5-10（chart02desc.html）</title>
</head>
<body>

<!--
冗长的图表说明开始
-->

<p>
人关水亲大一金，议形边时，能第我表痛死书合定子室？文取制、我民
现能中，一中告一面底。分活更再色球台期读虽前法果父微大民吃师。
</p>

<p>
人在国表用同市：减国西可里许喜把我县登被？在自自升子意类评，话
她这团专民出河，死为觉重史？是的我马该营北了以学！近接虽后以，
德居外呢家爸，不如究行师；那义回了足，日回不我式我依？
</p>

<p>
点亮乎眼足广每？体了子止其试图星型赛准，星创点轻教台年，别工，
游作们张甚过持前灯这环太行河坡各……高海生了子道果事，家著他实
够？调便小白华不少活件。影舞语，人明是她达发代意笑转进过，得。
</p>

<!--
冗长的图表说明结束，以上内容是为了范例凑篇幅而已，
并不是真正的文字，请勿当真阅读。本范例的重点是底下
这些放在网页文件最后面的内容
-->

<p>
<a href="chart02.html#chart02">返回图表</a>
（JAWS 的用户也可以直接关闭这个窗口）。
</p>

</body>
</html>

使用 longdesc 属性时，要注意不同的用户代理会有不同的行为，例如某些版本的 JAWS 会开出新窗口，这可能会造成一些困扰，因为用户未必能知道开出新窗口这件事，因此也有网页设计师建议采用一般的超级链接来加注图片说明，并且把说明内容放在同一个网页，做成脚注，搭配 CSS 或 JavaScript 来隐藏等等。

结果

静怡从中获益了。JAWS 遇到含有 longdesc 属性的图片时，会向用户揭露图片具有长描述，此时用户按一下 Enter 就可以开出描述网页的新窗口，让 JAWS 继续念下去。
麦克从中获益了。Opera 的图片右键菜单当中，可以让用户连到长描述网页；Opera 是目前唯一内建 longdesc 属性支持的主流网页浏览器。其它主流浏览器与搜寻引擎对 longdesc 属性的支持仍不良，因此也可以把长描述做成网页脚注来帮助其它浏览器的用户；浏览器及用户代理的开发人员，也应该以 Opera 为学习对象，在未来版本的浏览器中，补强对 longdesc 属性的支持。

5-3　闪烁与动画图片

人们在看东西时，眼睛容易先受到动态内容吸引，像是移动中、闪烁中的部分，然后才会注意到其它部分。为了吸引用户的目光，网页也采用了动画与闪烁图片，但是许多网页滥用了这些效果，反而适得其反，更何况‘注意到’不见得就能跟‘看得清楚’画上等号。

同一个画面中，同时出现了好几个移动或闪烁的图片，就会大大地削弱用户的注意力，结果原本要引起注意的图片，最后反而失去用户注意。闪烁的图片还有另一个风险，会诱发癫痫患者发病，让观看网页变成一种危险的活动。

5-3-1　困扰

国伟年岁已高，眼睛特别容易疲劳，尤其是看到画面不停闪烁的网页，更是让国伟感到困扰。国伟当然有考虑过乾脆把图片通通关闭不显示，但是良好的图片也能帮助国伟迅速弄懂网页内容，这让国伟非常难以抉择。

5-3-2　对策

表 5-3：与使用闪烁、动画图片有直接关联的万维网联盟规范内容

规范名称	《网页内容亲和力方针 1.0》	《网页内容亲和力方针 2.0》
相关内容	方针七（检核要点 7.1、7.2、7.3）	原则一（方针 1.1）、原则二（方针 2.2、2.3）

由于动画图片对网页真正内容带来的危害比建设要来得多，所以除非网页要表达的主要内容就是动画图片，否则最好完全不要使用。万一遇到非用不可的情况，则至少要避免图片的动画或闪烁效果会对光敏性癫痫患者造成伤害。

为了避免诱发光敏性癫痫，首先要确保闪烁区域在任意的 10 度视野中，占据区域少于 0.006 弧度；以 15～17 寸、分辨率 1024×768 的屏幕来说，若用户双眼距离屏幕 55～66 公分，则含有闪烁图片的区域不得超出 341×256 像素。同样大小的屏幕，分辨率越高则越安全，分辨率越低则越容易造成闪烁区域过大。

除了闪烁区域有大小限制外，闪烁频率也不能太快。《网页内容亲和力方针 1.0》要求闪烁频率不得介于 4～59 Hz 之间，美国的《508 公法》则要求闪烁频率不得介于 2～55 Hz 之间。《网页内容亲和力方针 2.0》计算闪烁频率时会把闪烁分成两种：一般闪烁与红闪烁；不论是哪一种闪烁，任一秒内都不能超过三次，亦即闪烁频率不得超过 3 Hz。一般闪烁指的是图片会先由暗转亮再由亮转暗，或者先由亮转暗再由暗转亮，其中暗时的相对明度低于 0.80，而且整体明度变化范围超过最大相对明度的 10%。

前述的相对明度指的是色域任一点的相对亮度，色域中最暗的黑色为 0，最亮的白色为 1；sRGB 色域中任一点的相对明度系由该点的红、绿、蓝值计算而得。首先将该点的红、绿、蓝值以八位元（也就是从 0 到 255 间的数值）表达成 R_8bit、G_8bit、B_8bit，分别除以 255 换算成红、绿、蓝的色域比例值 R_sRGB、G_sRGB、B_sRGB：

R_sRGB＝R_8bit÷255
G_sRGB＝G_8bit÷255
B_sRGB＝B_8bit÷255

接著将 R_sRGB、G_sRGB、B_sRGB 以下列公式换算成红、绿、蓝的明度值 R、G、B 值：

若 R_sRGB≦0.03928 则 R＝R_sRGB÷12.92
若 R_sRGB＞0.03928 则 R＝〔（R_sRGB＋0.055）÷1.055〕^2.4
若 G_sRGB≦0.03928 则 G＝G_sRGB÷12.92
若 G_sRGB＞0.03928 则 G＝〔（G_sRGB＋0.055）÷1.055〕^2.4
若 B_sRGB≦0.03928 则 B＝B_sRGB÷12.92
若 B_sRGB＞0.03928 则 B＝〔（B_sRGB＋0.055）÷1.055〕^2.4

最后就可以利用 R、G、B 值计算得到 sRGB 色域的相对明度 L：

L＝0.2126×R＋0.7152×G＋0.0722×B

红闪烁则是指图片转变的某个状态中，R÷（R＋G＋B）≧0.8，而且（R－G－B）×320 的变化值大于 20，表示图片由暗转亮再由亮转暗、或者先由亮转暗再由暗转亮的过程中，涉及了饱和的红色。

再强调一次，最好的办法是：不要使用任何动画图片或闪烁图片，除非那真的是网页内的主要内容（例如以连续图片表达卫星云图变化的气象相关网页）。

结果

国伟从中获益了。网页上不再有不停闪烁，或四处移动的图片，眼睛比较不会感到疲劳。
雅玲从中获益了。虽然雅玲习惯把网页打印出来再阅读，但是还是要先透过屏幕来导览找到需要的内容；若网页充满闪烁及移动不停的图片，雅玲就更难把精神集中在文字上，也更难理解网页内容，更不要说想找到需要的网页了。

本章摘要

本章说明了使用一般图片的亲和力实务，重点包括了：

图片一律要使用 alt 属性，撰写替代文字
替代文字要能取代图片，而不是描述而已
替代文字要能与图片前后的文字段落衔接在一起
替代文字单独存在时也要有意义
替代文字不可超过 150 个英文字或 75 个中文字，最好保持在 50 个英文字或 17 个中文字以内
图片还可以用 title 属性来提供图形浏览器的工具提示
复杂图片可以用 longdesc 属性来提供说明网页的网址
复杂图片除了 longdesc 属性之外，也可以同时采用一般的超级链接来制作网页脚注说明
不要使用闪烁图片及移动图片

延伸参考数据

下列这些网站说明了使用 alt 替代文字属性时应考虑的种种细节：

Guidelines on alt texts in img elements：http://www.cs.tut.fi/~jkorpela/html/alt.html
The Alt and Accessibility：http://green-beast.com/blog/?p=81
Creating Accessible Images：http://webaim.org/techniques/images/alt_text.php
Appropriate Use of Alternative Text：http://webaim.org/techniques/alttext/
提供能取代图片的文字：http://dia.z6i.org/cn/day_23_providing_text_equivalents_for_images.html

Andy Clarke 提出用网页脚注取代 longdesc 属性的作法，可以参考其原始文章：

Accessibility footnotes：http://www.stuffandnonsense.co.uk/archives/accessibility_footnotes.html

第 5 章：图片与动态图片

5-1 一般图片

5-1-1 困扰

5-1-2 对策

结果

5-2 复杂图片

5-2-1 困扰

5-2-2 对策

结果

5-3 闪烁与动画图片

5-3-1 困扰

5-3-2 对策

结果