HTML图像

图像永远是页面上必不可少的,本文就总结一些关于 HTML 的图象知识。

常见图像格式

格式 用法 颜色 索引色(基本)透明 alpha 透明
JPEG 适用于大多数照片,以及其他颜色较多且可接受一些质量损失的图像 1600万以上 —— ——
PNG-8 适用于标识、重复的图案以及其他颜色较少的图像或具有连续颜色的图像 256 支持 支持
PNG-24 与 PNG-8 相似,不过支持颜色更多的图像。适用于颜色丰富且质量要求高的照片 1600万以上 支持 ——
PNG-32 与 PNG-24 相似,不过支持具有 alpha 透明的图像 1600万以上 —— 支持
GIF 用法与 PNG-8 相似,在大多数情况下应使用 PNG-8 256 支持 ——

JPEG 适用于彩色照片,它包含了大量的颜色并进行了合理的压缩,采用这种格式保存的文件相对较小。JPEG 是一种有损的格式,因此在将图像保存为 JPEG 时会丢失一部分原始信息。注意,对 JPEG 进行解压缩无法还原图像先前丢失的细节,所以只有在确保不再对图像进行修改的情况下才能只保存 JPEG 格式的图像而不保留副本。

PNG 和 GIF 是无损的格式,因此采用这两种格式对图像进行压缩时不会造成品质的损失。与 JPEG 不同 PNG 和 GIF 均支持透明,它们更适用于保存非照片类的图像。通常拥有大片纯色的图像,如标识、重复的图案、插图以及图像文字等都适合这两种格式。一般来说,对于 PNG 和 GIF,应优先选择 PNG,因为它对透明度的支持更好,压缩算法也更好,产生的文件更小。

PNG-8 只有256色,所以常用于保存标识和其他颜色较少的图像(有时也保存为 GIF,不过 PNG-8 更好一些)。JPEG、PNG-24PNG-32 均支持超过1600万色,但大多数情况下照片和复杂的插图应首先使用 JPEG 格式。也可以使用 PNG 保存照片,但由于无损图像质量,文件大小会比 JPEG 大得多。因此,只有在压缩造成的质量损失不可忽略的情况下才使用 PNG 保存照片。

可以利用透明度为图像创建非矩形的边缘,在图像的下面设置背景色或图案。PNG 和 GIF 都支持透明度,JPEG 不支持。在 GIF 格式中,一个像素要么是透明的,要么是不透明的,这称为索引色透明(index transparency)。而 PNG 既支持索引色透明,又支持 alpha 透明(alpha transparency)。alpha 透明可以控制一个像素的透明程度。这意味着使用 PNG 的效果要好于 使用 GIF 的效果,因为使用 PNG 可以让边缘变得平滑,避免产生锯齿。

Photoshop不支持 alpha 透明的 PNG-8,但支持 alpha 透明的 PNG-32,这也是万维网上大多数透明 PNG 都是 PNG-32 的原因。PNG-24 与 PNG-32 几乎是一样的,而Photoshop将 PNG-24 和 PNG-32 都称为 PNG-24,因此“PNG-24”也常常用于指代带有 alpha 透明的图像,不过从技术上看这种说法并不准确。总之,对于透明图像,应使用 PNG-8 或 PNG-32。

谷歌建立了另一种图像格式,名为 WebP。这种格式既支持有损压缩也支持无损压缩,它产生的文件大小也远小于 JPEG 和 PNG。跟 PNG 一样,它还支持 alpha 透明。目前,WebP 还在发展之中。要了解 WebP 的详细信息,参见 http://developers.google.com/speed/webp/。最新的浏览器支持情况参见 http://caniuse.com/#search=webp。

SVG(可缩放矢量图形)对于使用 SVG 图像语言创建的图像,无论放大还是缩小都不会影响其质量(以及其他的一些参数)。而且,对于某个 SVG 图像来说,无论它在页面中显示的尺寸是多大,其文件大小总是恒定的。目前,几乎所有的现代浏览器都提供基本的 SVG 支持,不过 IE8 还不支持 SVG。可以使用 SVG Web(http://code.google.com/p/svgweb/)或 Raphael(http://raphaeljs.com/)等 JavaScript 库在 IE8 中实现类似的效果。

数字图像以像素为单位进行度量,对于网站上的图像,通常应控制在几百个像素宽。打印机出来的图片通常比显示器上看到的要小一些。打印机的每英寸点数(dpi)通常比显示器的每英寸像素数(ppi)要多。屏幕分辨率变大加剧了这一情形。这就是问什么相同的图像在显示器或笔记本上看要比在纸上看要大得多。

图像编辑器

常见图像编辑软件:
Photoshop
Fireworks
Gimp
Acorn(仅支持OS X)
Pixelmator(仅支持OS X)
Paint.NET(仅支持Windows)
PaintShop Pro

使用软件创建图像的两种方式:
(1) RGB模式,R、G、Bi分别表示 Red、Green、Blue。又称为三原色光模式
(2) CMYK模式,C、M、Y、K 分别表示表示 Cyan(青)、Magenta(品红)、Yellow(黄)、Black(黑)。又称为印刷四分色模式。
所以,我们应该使用 RGB 模式创建图像,而不是 CMYK 模式。

在HTML页面中插入图像

1
<img src=images/image.url alt="图像未能正常加载时现实的替代文本" />

如果图像对内容的价值较小,对视障用户来说不太重要,则可以提供空的替代文本,即alt=""。若图像与邻近文本表达的信息相似,也可以将 alt 属性留空。

不要使用 alt 文本代替图像的 caption。在这种情况下,应考虑将 img 放入一个 figure 元素,并添加一个 figcaption 元素。

如果图像是页面设计的一部分,而不是内容的一部分,则应使用 CSS background-image 属性引入该图像,而不是使用 img 标记。

还可通过给 img 元素添加 width 和 height 属性来改变图像在浏览器中显示的大小。事实上,除了为 Retina 显示屏准备的图像,使用 width 和 height 属性改变图像大小是一种快捷但有些丑陋的做法。由于图像文件本身并未改变,因此访问者容易有受骗的感觉——通常这种做法缩小的图片总是比实际这个尺寸的图形加载得更慢,较好的做法是使用图像编辑器改变图像文件的尺寸。

为Retina屏准备图像

Retina 屏是什么呢?设想你仅使用点来作画,然后再设想在同样大小的画布上描绘相同的画,只是每一个点都是用四个点来代替。第二张画能呈现更多的细节,同时也更难看清单独的点。

苹果的 Retina 显示屏就像第二张画。在相同的空间里,它拥有的像素数量是普通显示屏的像素数量的四倍(如下图所示),因此图像会更锐利。专业的说法是,她的每英寸点数(PPI)更多,或者说像素密度更大。除了苹果,还有其他一些公司的设备也使用了高像素密度显示屏。

普通显示屏(左)与 Retina显示屏(右)

上面这张图有助于从视觉上理解 Retina 显示屏(右)是如何使用四个像素取代大多数显示屏(左)的一个像素的。这并非缩放,实际的像素要小得多。

需要说明的是,有时需要考虑 Retina 显示屏或类似的其他显示屏,否则图像在浏览器里看起来就会显得模糊。如果不关心其中的意图,至少应记住,让图像的尺寸扩大为原先的两倍,但仅以一半的尺寸显示它们。例如,如果想让图像在所有的显示屏(并非只是 Retina 显示屏)上都是 40x30 的尺寸,就应该创建 80x60 大小的图像,而代码写作

1
<img src="photo.jpg" width="40" height="30" alt="" />

浏览器会将 80x60 的图像缩小,以 40x30 的尺寸显示。

其中的原理是这样的,在 80x60 的图像中,像素总数为 4800,是原先的四倍。这样,Retina 显示屏就可以显示这些额外的像素,让图像看起来更锐利。若使用 40x30 图像,Retina 显示屏就会拉伸这些像素以填充其对应的空间,导致锐利程度降低。每个图像的情况都不一样。

如果图像特别重要,清冽推荐这种做法。这样图像的大小可能会变大,而且双倍分辨率的图像会消耗设备更多的内存(这主要是移动设备的问题)。建议至少在一个移动设备上做好测试。

有一种方法可以创建为 Retina 显示屏准备的图像,同时保持文件大小控制在一个合理的范围之内。其具体做法为:让图像尺寸变为两倍,但使用高压缩设置(在Photoshop中,就是选择低的图像质量)。当以一半大小显示图像时,不容易察觉到高压缩产生的失真效果的影响。实际的效果取决于图像的内容。

图标字体与 SVG 再缩放时都不会导致失真。对于单色的图标,建议尽可能地使用图标字体,而非使用图像。对标识和其他非照片类图像,可以考虑使用 SVG。

网站图标

我们在浏览器选项卡、历史纪录、书签、收藏夹和地址栏中看到的(与网站相关的)小图标称为 favicon,这个词是 favorites icon(收藏夹图标)的简称。我们创建的图标至少应该为 16x16。相较于浏览器的其他位置,favicon 更多地显示在标签页上。

由于浏览器通常将该图标显示在灰色或其他颜色的背景上,因此有必要将图标的背景设置为透明的。

创建一个或多个触屏图标,即在苹果设备及其他触屏设备上将网站添加到主屏幕上时要显示的图标。苹果规定,iPhone 和 iPod touch 的图标大小为 57x57 或 114x114(对于 Retina 显示屏),iPad 的图标大小为 72x72 或 114x114(对于Retina显示屏)。Android 也支持这些图标。

创建要在浏览器中显示的网站小图标,保存格式为 icon。推荐为触屏设备至少创建一个图像,并保存为 PNG 格式。