浅析HTML中的图片格式
浅析HTML中的图片格式
- 1.概述
- 2.位图
- 3.矢量图
1.概述
在网页中，图片格式有两种，一种是“位图”；另一种是“矢量图”
2.位图
位图，又叫作“像素图”，它是由像素点组成的图片。对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真
在实际开发中，最常见的位图的图片格式有3种：jpg（或jpeg）、png、gif
- jpg格式可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg格式的图片体积较大，并且不支持保存透明背景
- png格式是一种无损格式，可以无损压缩以保证页面打开速度。此外，png格式的图片体积较小，并且支持保存透明背景，不过不适合存储颜色丰富的图片
- gif格式的图片效果最差，不过它适合制作动画
3.矢量图
矢量图，又叫作“向量图”，是以一种数学描述的方式来记录内容的图片格式。举个例子，我们可以使用y=kx来绘制一条直线，当k取不同值时可以绘制不同角度的直线，这就是矢量图的构图原理
矢量图最大的优点是图片无论放大、缩小或旋转等，都不会失真。最大的缺点是难以表现色彩丰富的图片
矢量图的常见格式有“.ai”“.cdr”“.fh”“.swf”。其中“.swf”格式比较常见，它指的是Flash动画