HTML5与CSS3学习笔记【第五章 图像】

---

前言

Web 创建图像与为在纸上输出而创建图像有所不同。尽管 Web 图像和可打印图像的基本性质是相同的，但它们在格式、下载速度、颜色、大小（尺寸）、透明度和动画等六个主要方面有一些区别。

---

5.1.关于 Web 图像

1. 格式与下载速度
在纸上打印图像的人不必担心读者将使用什么查看图像，读者在打开杂志或报纸的页面时也不必等待图像的出现。不过，在万维网上，情况就不一样了。每天，人们通过数以万计的 Mac、基于Windows 的 PC、Linux 机器、手机、平板电
脑等各种各样的设备访问万维网。网页中的图像应该采用这些设备的操作系统都能识别的格式。当前，Web 上用的最广泛的三种格式是 GIF、PNG 和 JPEG。我们的目标是选择质量最高，同时文件最小的格式。
JPEG
JPEG 格式适用于彩色照片，因为它包含大量的颜色并进行了合理的压缩，采用这种格式保存的文件相对较小。图像的文件变小（且不论是何种格式），下载速度就会变快，访问者就不必等待较长时间才能看到图像。
不过，JPEG 是一种有损的格式，因此在将图像保存为 JPEG 时会丢失一部分原始信息，但通常有必要这样做，因为我们可以将图像质量的损失控制在用户不易觉察的范围内，却能显著改善图像的加载速度。
注意，对 JPEG 进行解压缩无法还原图像先前丢失的细节。因此，如果未来还有可能对图像进行编辑，就应该保存一份使用无压缩格式（如 PSD 或 TIFF）的图像副本，只有在确保不再对图像进行修改的情况下才能只保存 JPEG 格式的像。
PNG 和 GIF
PNG 和 GIF 是无损的格式，因此采用这两种格式对图像进行压缩时不会造成品质的损失。GIF 只有 256 种颜色，但 PNG 却支持几百万种颜色。与 JPEG 不同，PNG 和 GIF均支持透明，它们更适用于保存非照片类的图像。通常，拥有大片纯色的图像，如标识、重复的图案、插图以及图像文字等都适合使用这两种格式。可以使用 PNG 保存照片，但由于无损图像质量，文件尺寸会比 JPEG 大得多。因此，只有在压缩造成的质量损失不可忽略的情况下才使用 PNG 保存照片。PNG 有几种不同的分支：PNG-8、PNG-24和 PNG-32。一般来说，对于 PNG 和 GIF，应优先选择 PNG，因为它对透明度的支持更好，压缩算法也更好，产生的文件更小。
2. 颜色
大多数计算机显示器可以显示数以百万计的颜色，但也有例外的情况。有的图像格式的调色板是有限的。GIF 和 PNG-8 图像只有 256 种颜色，对标志和图标来说通常这已经足够了。
JPEG、PNG-24 和 PNG-32 均 支 持 超 过1600 万种的颜色，因此照片和复杂的插图应选择这些格式。不过，需要指出的是，对于这些图像，大多数情况下应使用 JPEG。
3. 大小（尺寸）
你曾经收到过一些在屏幕上看起来特别大的照片吗？这样的照片通常是由数码相机拍摄的，而发送照片给你的人又没有事先编辑文件以缩减尺寸。那么为什么这些照片起初这么大呢？如果将它们放到网站上，应该将文件大小控制在多少呢？数字图像以像素为单位进行度量。如今，超过 800 万像素的数码相机已经很常见了，不过我们不妨以 300 万像素的数码相机举例说明。300 万像素的数码相机可以照出 2048像素宽、1536 像素高的照片。这在浏览器里有多大呢？视情况而定。不过一般而言，这样的尺寸太大了，你在邮件中查看这么大的图像就是这个样子。
那么，对于网站上的图像，多大合适呢？简单地说，通常应控制在几百个像素宽。图像尺寸越大，文件就越大，网页加载它的时间就越长。选择图像尺寸是一个取舍的过程。此外，你已看到，如果图像尺寸过大，访问者就需要使用横向滚动条
来查看。当然，图像的尺寸也取决于其用途。图标通常很小，标识稍大一些，照片则大得多。有时，为了产生视觉冲击，我们可能需要使用一张达到或超过整个网站内容宽度的大图。这样的图像通常不超过 960 像素宽。打印出来的图像通常比显示器上看到的要小一些。打印机的每英寸点数（dpi）通常比显示器的每英寸像素数（ppi）要多。屏幕分辨率变大加剧了这一情形。这就是为什么相同的图像在显示器或笔记本上看要比在纸上看要大得多。
4. 透明度
可以利用透明度为图像创建非矩形的边缘，在图像的下面设置背景色或图案。PNG和 GIF 都支持透明度，JPEG 则不支持。
在 GIF 格式中，一个像素要么是透明的，要么是不透明的。这称作索引色透明。而 PNG 则既支持索引色透明，又支持 alpha 透明（alpha transparency）。alpha
透明可以控制一个像素透明的程度。也就是说，一个像素可以部分透明，而非要么透明要么不透明。这意味着具有复杂透明背景的图像使用 PNG 的效果要好于使用 GIF 的效果，因为使用 PNG 可以让边缘变得平滑，避免产生锯齿。
PNG-8 既支持索引色透明，也支持 alpha透明，但需要使用 Fireworks 这样的程序才能将图像保存为 PNG-8 格式。Photoshop 不支持 alpha 透明的 PNG-8，但支持 alpha 透明的PNG-32。（参见补充材料“Photoshop、PNG-24与 PNG-32”。）这也是万维网上大多数透明PNG 都是 PNG-32 的原因。总之，对于透明图像，应使用 PNG-8 或PNG-32。后者允许使用超过 256 种颜色。
5. 动画
动画可以保存为 GIF，但不能是 JPEG 或PNG。实际上，使用图像表现动画已经用得越来越少了。（一种例外的情况是那些好玩的 GIF 动画，它们在 Tumblr 这类网站相当流行。）我们通常使用 CSS 动画、JavaScript、HTML5 Canvas、SVG（可谓是一匹黑马）和Flash 创建动画。近几年，使用 Flash 创建的动画越来越少了。这主要是由于 iOS 不支持Flash，且其他标准的 Web 技术的能力和浏览
器支持程度都提升了很多。
6.小结
让我们来回顾一下有关 Web 图像的要点。

• 大多数照片都应保存为 JPEG 格式，图标、标识等颜色较少的图像应保存
  为 PNG 格式。
• 应 使 用 PNG-8 或 PNG-32（ 常 误 作PNG-24）创建具有alpha透明度的图像。
• 合理的图像大小（尺寸）会让图像文件变得更小。应尽可能地减小图像尺寸，从而让页面加载得更快。

5.2.获取图像

如何获取在网页中使用的图像呢？有几种方式。可以购买或下载现成的图像，通过扫描仪将照片或手绘图像数字化，使用数码相机拍摄照片，或使用 Adobe Photoshop 这样的图像编辑软件从头绘制图像。在有了图像以后，就可以将它们保存为上文提到的某种格式并在万维网上使用它们了。

5.3.在页面中插入图像

可以在网页中放置各种各样的图像，从标志到照片都可以。当访问者浏览网页时，浏览器会自动加载图像。不过，图像加载时间跟访问者的网络连接强度、图像尺寸，以及页面中包含的图像个数相关。
在页面中插入图像的步骤
(1) 在 HTML 代码中，将光标放在希望图像出现的位置。
(2) 输 入 <img src=“image.url”， 其 中image.url 指示图像文件在服务器上的位置。
(3) 输 入 一 个 空 格 和 />（ 或 者 >， 在HTML5 中两者均有效）。

5.4.提供替代文本

使用 alt 属性，可以为图像添加一段描述性文本，当图像出于某种原因不显示的时候，就将这段文字显示出来。屏幕阅读器可以朗读这些文本，帮助视障访问者理解图像的内容。HTML5 规范推荐将 alt 文本理解为图像的替代性描述：“一般来说，替代文本是考虑图像未能正常加载的情况下需要呈现的文字。”通常，这意味着 alt 文本可以插入到图像两侧的文本流中，在大多数情况下，它不应是对图像的描述。提供图像无法显示时的替代文本的步骤
(1) 在 img 标签内，在 src 属性及其值的后面，输入 alt="。
(2) 输入图像出于某种原因没有显示时应该出现的文本。
(3) 输入 "。

5.5.指定图像尺寸

有时，加载网页会先看到文本，等一小段时间以后图像开始加载时，文本跳到图像周围，留出可容纳图像的空间。出现这种现象，是因为没有在 HTML 中指定图像的尺寸。如果用户使用旧浏览器或者网络连接速度慢，就容易出现这种情况。如果指定图像的尺寸，浏览器就可以预留空间，在图像加载的同时让文本显示在周围，保持布局的稳定。可以通过浏览器或图像编辑软件获取图像的精确尺寸。
1. 在浏览器中查看图像尺寸
(1) 右击图像，出现背景弹出菜单。
(2) 选择 View Image Info（查看图像信息，具体选项取决于所使用的浏览器），出现的框中会以像素为单位显示图像的尺寸。
2. 在 Photoshop 中查看图像尺寸
(1) 在 Photoshop 中打开图像。
(2) 选择 Image → Image Size。出现Image Size 对话框
3. 在 HTML 中指定图像尺寸
(1) 使用“在浏览器中查看图像尺寸”或“在 Photoshop 中查看图像尺寸”中介绍的方法，确定图像的尺寸。
(2) 在 img 标签中，src 属性的后面，输入 width=“x” height=“y”，采用第 (1) 步中确定的值，以像素为单位指定x 和y（分别代表图像的宽度和高度）的值。

5.6.在浏览器中改变图像的尺寸

通过为图像指定新的高度和宽度（以像素为单位），可以改变图像显示的尺寸，这样做可以在保持所有显示屏上图像尺寸相同的情况下，让使用Retina显示屏的用户看到锐利的图像。
在浏览器中改变图像尺寸的步骤
(1) 输 入 <img src=“image.url”， 其 中image.url 是图像在服务器上的位置。
(2) 输入 width=“x” height=“y”，其中 x 和 y 分别是希望设定的宽度和高度（以像素为单位）。
(3) 根据需要，添加任何其他的图像属性，最后输入 />。

5.7.在图像编辑器中改变图像的尺寸

大多数图像对网页来说都太大了。一幅用于打印的图像可能有 1800 像素宽（以 300 dpi 打印，有 6 英寸宽，约 15 厘米），而用于网页的图像很少需要超过 600 像素，通常还要小得多。
使用图像编辑器既可放大图像，也可缩小图像。但是图像放大后质量通常会变差，看起来非常明显。此外，放大图像还会增加图像文件的大小，导致页面加载时间变长。
用 Photoshop 改变图像尺寸
(1) 在 Save for Web 窗口右下角的 Image Size 部分，点击 W（宽度）框或 H（高度）框。
(2) 以像素为单位输入宽度或高度，或输入百分数，再按一下 Tab 键，改变图像的尺寸。
(3) 可以继续调大或调小，直到满意为止。在按下 Save 之前，图像不会重新取样。

5.8.为网站添加图标

我们在浏览器选项卡、历史记录、书签页、收藏夹和地址栏中看到的（与网站相关）的小图标称为 favicon，这个词是 favorites icon（收藏夹图标）的简称。我们创建的图标至少应该为 16×16（所有图标大小单位均为像素），不过，无论如何，浏览器都会尝试尽力加载。
为网站添加图标
(1) 创建一个 16×16 的图像，并保存为ICO 格式，文件名为 favicon.ico。作为可选步骤，为 Retina 显示屏创建一个 32×32 的图像。ICO 文件允许在同一个文件中包含多个不同尺寸的同名文件。
(2) （推荐）为触屏设备至少创建一个图像，并保存为 PNG 格式。如果只创建了一个，将其命名为 apple-touchicon.png。如有需要，还可以创建其他的触屏图标。
(3) 将图标图像放在网站的根目录里。浏览器会自动在根目录寻找这些特定的文件名，找到后就将图标显示出来。

总结

以上就是今天看的的内容，坚持住!