一、如何处理图像
浏览器向服务器发送请求，服务器查找资源，找到后返回给浏览器html文档，浏览器翻译html文档。浏览器遇到<p>元素这类的，直接把他们中间的元素内容显示出来就可以了，但是对于<img>元素，分为两步，是从服务器获取图片（浏览器向服务器申请src属性指向的资源，服务器找到后返回给浏览器），然后再显示出来。
HTML页面是纯文本，所以图像无法直接作为页面的一部分，它是单独存在的。
二、三种图像格式：JPEG、PNG、GIF
不同的图像格式作用很多，后面补充。
JPEG：复杂的图像和照片、连续色调的照片
PNG、GIF：单色图像、LOGO和几何图形
PNG：需要透明和很多颜色时，既支持照片也支持logo.
| JPEG | 有损 | 不支持透明度 | 文件较小 | 不支持动画 |
| PNG | 无损 | 支持透明度，无锯齿透明区 | 文件较大 | 不支持 |
| GIF | 无损 | 支持透明度，但只允许将一种颜色设置为透明 | 文件较大 | 支持 |
三、<img>元素
void元素，内联元素（所以常把<img>元素内嵌到<p>元素中，或者利用<br>)
1、img元素中的src属性
和href属性类似，属性值分为相对链接（本网站的图片，使用相对链接）和URL（使用web上的图像时，可以使用查看元素来获取该图片的src属性值，不同于href属性，这里没有默认图片，所以URL务必写完整，注意，查看的src可能是别人的相对路径，那么要你自己补充）
2、img元素的alt属性
alt属性值中是对图片的一些描述，在一些情况下，当图片无法正常显示的时候（可能是由于网速问题，浏览器问题，或者图片地址变动），显示alt属性中的文本信息。
3、img元素的weight属性和height属性
属性值的单位是像素，规定图片的宽高，帮助浏览器确定要为这个图片预留多大的空间
1、即使不告诉浏览器图片的大小，在下载图片后也会自动确定，告诉的目的是提前告诉浏览器图片的宽高来方便浏览器进行页面布局，因为浏览器是下载html文件后开始显示页面的时候才下载图像，没告诉图像大小的话，在下载图像后，之前的页面布局还有重新调整。
2、weight height属性设置为图片本来的大小时就是为浏览器提供信息，但是有的人会利用这两个属性来调整图片的大小，不提倡，因为html是提供结构，css提供表现，图片大小的调整最好用css来调整。
四、对图片的调整
1、对图片宽高，大小，格式，质量的调整
原始的图片可能会太大，甚至还要滚动滑轮来查看，那么就需要对宽高进行调整（不能利用width属性、height属性来调整，因为这样是浏览器来调整图像大小，而在浏览器调整大小之前，下载下来的还是整个图片，数据传输依旧这么大）。
图像要是是psd的格式的，需要转为gif jpeg png 中的一种
所有的调整都在图片编辑器里修改，如PS中 save for web。
2、缩略图
当为页面增加很多图片的时候，会减慢访问速度、需要大量滚动。这时候可以用缩略图。
1、步骤：
对每张图片宽高，大小，格式，质量的调整进行调整创建缩略图，将所有缩略图单独存放在一个文件夹中（不能存放在原图片文件夹中，因为大图像和缩略图混杂在一起十分混乱）
将html 中 <img>元素中 src属性值改为对应缩略图的地址。注意<img>元素是内联元素，缩略图可能会并排显示。为了缩略图不被文字环绕，利用<p>或者<br>
为每张缩略图对应的大图创建一个web页面，有个标题概述下这张图片，然后显示这张原图。注意
将每张缩略图链接到它对应的展示大图的web页面：将<img>元素嵌套到<a>元素中， 如：<p>
<a href = "html/picture1.html" >
<img src = "缩略图文件夹/picture1.png" alt = "图片描述">
</a>
<a href = "html/picture2.html" >
<img src = "缩略图文件夹/picture2.png" alt = "图片描述">
</a>
</p>
为了方便，将缩略图的命名和大图html文件的命名统一
2、也可以让缩略图直接链接到原图上，<a href = "原图地址" > <img src = "缩略图地址" alt = "...."> </a>,这样的话点击缩略图的话会在一个空白页面显示这个图像，但是不推荐，因为应该为所显示的图像提供一些文字说明。
3、LOGO
logo 常用png格式，注意透明度和蒙版 ？？我在我目前的PS上好像没那么麻烦。不知道，再说吧。
180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
