第五章 为你的页面加图像
一、图像格式
Web上最常用的的图像格式有三种：JPEG、PNG、GIF。他们的区别：
| JPEG | PNG | GIF | |
| 颜色 | 多达1600万种颜色 | 可以包含上百万种，有三种PNG-8、PNG-24、PNG-32,取决于需要多少颜色 | 最多256种颜色 |
| 质量 | 是一种有损的格式，会因为缩小文件大小而丢掉一些信息 | 不会丢掉信息，是一种无损的格式 | 无损的格式 |
| 文件大小 | 较小 | 比JEPG大，根据颜色数的选择，可能比GIF大也可能比GIF小 | 往往比JEPG大 |
| 其他 | 不支持动画，不允许透明色 | 允许透明色，适合单色图像和线条构成的图像如Logo、剪贴画以及图像中的小文本 | 支持动画，允许透明色但只能支持一种颜色为透明，类似PNG，GIF最适合单色图像和线条构成的图像，GIF是唯一支持动画并得到广泛支持的格式 |
二、引用图像
<img>的src不只是可以引用相对链接，还可以引用URL，因为图像和HTML一同存储在Web服务器上，所以Web上的每一个图像都有自己的URL，如果我们需要指向另一个不同网站上的图像，就可以使用这个图像的URL。但是，在相对链接和URL中，最好选择相对链接。
调整图像的大小，可以在<img>中使用属性width和height。如果没有指定宽度和高度，那么浏览器会自动确定图像的大小（这样显示的图像可能会太大哦）。
想要得到点击缩略图然后打开大图这种效果，可以在将<img>放进<a>元素中，创建一个图像链接。比如：<a href="html/datu.html><img src="photos/suoluetu.jpg" alt="点击这个缩略图可看到大图"></a>，但这个缺点是，点开的大图在一个新的页面出现。
三、如何处理一个Logo
用photoshop处理，打开需要处理的Logo图片，如果背景是一堆灰白棋盘格子，这是透明色的意思。根据自己的颜色需要来选择使用PNG-8/24/32，点击左上角的File下的Save for Web，保存为Web格式。右边有许多选项，可以改变格式、Transparency(是否要透明)、Matter（蒙版，也跟透明度有关）。
蒙版：在将Logo底部设置为透明色之后，Logo的图案变圆可能会出现锯齿状的边缘，这种现象会影响Logo的美观，这时选用和Logo颜色相似的蒙版就可以柔滑图案的边缘，增加美观度。