文章目录
第5章 图像
5.1 关于Web图像
1.格式
| 格式 | 用法 | 颜色 | 索引色（基本）透明 | Alpha透明 |
|---|---|---|---|---|
| JPEG | 适用于大多数照片，以及其他颜色较多且可接受一些质量损失的图像 | 1600万以上 | —— | —— |
| PNG-8 | 适用于标识、重复的图案以及其他颜色较少的图像 | 256 | 支持 | 支持 |
| PNG-24 | 与PNG-8相似，不过支持颜色更多的图像。适用于颜色丰富且质量要求高的照片 | 1600万以上 | 支持 | —— |
| PNG-32 | 与PNG相似，不过支持具有Alpha透明的图像 | 1600万以上 | —— | 支持 |
| GIF | 用法与PNG-8相似，在大多数情况下应使用PNG-8 | 256 | 支持 | —— |
| WebP | 即支持有损压缩又支持无损压缩 | 支持 |
2.颜色
- 标识和其他颜色较少的图像通常保存为PNG-8格式（也可以保存为GIF格式，不过相较之下PNG更好一些）
大多数计算机显示器可以显示数以百万计的颜色，但也有例外的情况。有的图像格式的调色板是有限的。GIF和PNG-8图像只有256种颜色，对标志和图标来说通常这已经足够了
- JPEG、PNG-24和PNG-32均支持超过1600万种的颜色，因此照片和复杂的插图应选择这些格式。
不过，需要指出的是，对于这些图像，大多数情况下应使用JPEG （Cap：目前也应该考虑webp了）
3.大小（尺寸）
- 网站上的图像控制在几百个像素比较合适
图像尺寸越大，文件就越大，网页加载它的时间就越长
打印出来的图像通常比显示器上看到的要小一些。打印机的 每英寸点数（dpi） 通常比显示器的 每英寸像素数（ppi） 要多。屏幕分辨率变大加剧了这一情形。这就是为什么相同的图像在显示器或笔记本上看要比在纸上看要大得多
- 可缩放矢量图形（SVG）
对于使用SVG图像语言创建的图像，无论放大还是缩小都不会影响其质量（以及其他的一些参数） 。而且，对于某个SVG图像来说，无论它在页面中显示的尺寸是多大，其文件大小总是恒定的。目前，几乎所有的现代浏览器都提供基本的SVG支持，因此你可以在网页中使用SVG
4.透明度
- 索引色（基本）透明（index transparency） ：控制一个像素要么透明要么不透明
- Alpha透明：控制一个像素的透明程度
对于透明图像，应使用PNG-8或PNG-32。后者允许使用超过256种颜色 （Cap：目前也应该考虑webp了）
5.动画
动画可以保存为GIF，但不能是JPEG或PNG。实际上，使用图像表现动画已经用得越来越少了。（一种例外的情况是那些好玩的GIF动画，它们在Tumblr这类网站相当流行。）我们通常使用CSS动画、JavaScript、HTML5 Canvas、SVG（可谓是一匹黑马）和Flash创建动画。近几年，使用Flash创建的动画越来越少了。这主要是由于iOS不支持Flash，且其他标准的Web技术的能力和浏览器支持程度都提升了很多
5.5 在页面中插入图像
<img src="image.url">
不要期望你的访问者会长时间等待页面加载和显示。可以对页面进行测试（别忘了你的连接速度可能比访问者的快）。如果你都等不下去，那么访问者也一样等不下去。另一种办法是为大图创建缩略图，让访问者可以通过链接选择查看大图，查看6.3节学习如何创建这种链接。Charles（www.charlesproxy.com）和Fiddler（http://fiddler2.com）是模拟慢连接的两个不错的工具。
提示 可以使用CSS的border简写属性（及相关属性）为图像应用边框样式，这将在第11章讲到。旧的浏览器会对带链接的图像自动加上一个边框，可以在CSS中指定
img { border: none; }移除该边框。
5.6 提供替代文本
alt属性：为图像添加一段描述性文本，当图像出于某种原因不显示的时候，就将这段文字显示出来
如果图像是页面设计的一部分，而不是内容的一部分，则应使用CSS
background-image属性引入该图像，而不是使用img标记
5.7 指定图像尺寸
width="X" height="y"属性：指定以像素为单位的宽度和高度
提示 如果有几个尺寸相同的图像，可以通过样式表同时设置它们的高度和宽度。当然，单个图像也能使用这种方法
5.8 在浏览器中改变图像的尺寸
提示 除了为Retina显示屏准备的图像，使用width和height属性改变图像显示在网页中的大小是一种快捷但有些丑陋的做法。由于文件本身并未改变，因此访问者容易有受骗的感觉——通常用这种方法缩小的图像总是比实际这个尺寸的图像加载得更慢。较好的做法是使用图像编辑器改变图像的尺寸。
5.10 为网站添加图标
我们在浏览器选项卡（参见图5.10.1）、历史记录、书签页、收藏夹和地址栏中看到的（与网站相关）的小图标称为favicon，这个词是favorites icon（收藏夹图标）的简称。我们创建的图标至少应该为16×16（所有图标大小单位均为像素）
- 为网站添加图标
- 创建一个16×16的图像，并保存为ICO格式，文件名为favicon.ico。作为可选步骤，为Retina显示屏创建一个32×32的图像。ICO文件允许在同一个文件中包含多个不同尺寸的同名文件。
- （推荐）为触屏设备至少创建一个图像，并保存为PNG格式。如果只创建了一个，将其命名为apple-touch-icon.png。如有需要，还可以创建其他的触屏图标
- 将图标图像放在网站的根目录里。浏览器会自动在根目录寻找这些特定的文件名，找到后就将图标显示出来。
