web前端开发基础教程：图片标签img及图片类型的选择

<imgsrc="图片的路径"alt="图片不显示的时候，会显示alt属性的文本"  title="图片的标题">

Title：对网站的SEO有很大的影响，当鼠标挪移在上面的时候，图片会显示title提示的文本内容

图片格式

Gif图片

Gif最突出的地方就是支持动画，同时gif也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎无损失。再加上gif支持透明（全透明或者全不透明），因此很适合在互联网上使用。但gif只能处理256种颜色，在网页制作中，gif格式常常用于logo、小图标及其他色彩相对单一的图像。

总结：图片小、兼容性好、支持透明、色彩太多不行

Jpg格式

Gpeg格式是网络上比较流行的一种格式，其文件扩展名为.jpg或.jpeg。JPEG是一种有损压缩格式，其文件体积非常小，非常有利于网络传输，但由于是有损压缩，所以将一副图像转换为JPEG格式后图像质量会降低

一般用于广告、大的宣传图片、照片等

Png格式

PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）,相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明、半透明、全不透明），并且颜色过渡更平滑，但PNG不支持动画。同时需要注意的是IE6是可以支持PNG-8的，但在处理PNG-24的透明时会显示为灰色。通常，图片保存为PNG-8会在同等质量下获得比GIF更小的体积，而半透明的图片只能使用PNG-24.

Web网页图片的选择

——jpg：色彩还原高，适合复杂颜色图片，比如banner

——gif：色彩效果最低，支持透明，支持动画，适合颜色比较少，不适合渐变色，一般应用于logo等

——png：png的有点事清晰、无损压缩，压缩比率高，可渐变透明，具备几乎所有gif的优点，缺点是不如jpg的颜色丰富，图片体积也比JPG略大。

另外PNG可以逐次逼近显示即传输图像文件的同时，可以先把整个轮廓显示出来，然后逐步显示图片的细节，也就是说先显示低分辨率图像，模糊到清晰慢慢显示。

小结：Gif和PNG基本差不多，色彩比较少的时候选择gif，如果图片动画必须用gif，要求图片质量的一般选择jpg,

• 上一篇：Web前端开发基础教程：url协议和编码
• 下一篇：Web前端开发基础教程-html文档常用标签的说明