图片
位图和矢量图
位图：又叫像素图或光栅图，通过记录图像中每个点的颜色、深度、透明度等信息来存储和显示图像的；位图可以展示色彩丰富的写实图像，但是位图文件较大，缩放的时候图像会失真；JPG、PNG、webP都是位图。
矢量图：是通过组成图形的一些基本元素，如点、线、面、边框、填充颜色等信息通过计算的方式来显示图形；矢量图文件体检相对较小，缩放的时候不会失真，但是表现力上很难表现自然度高的写实图像；SVG是一种矢量图。
有损压缩和无损压缩
无损压缩会记录真实图像上的每个像素点信息，采用一些特殊算法进行压缩的压缩。无损压缩先是判断图形上哪些区域的颜色是相同的，然后提取编码，然后记录编码的颜色和像素点的颜色编码。
有损压缩是根据人眼对光线的敏感度要比对于颜色的敏感度高，在某些颜色缺失的情况下人脑能够利用附近的颜色自动填补缺失颜色的原理，有损压缩算法会去掉图形上会被人眼忽略的细节，使用附近的颜色通过渐变或者其它形式进行填充，这样大大降低了图像的信息量，又不会影响图形解码后的显示效。
网页中常用的图片格式
jpeg
采用有损压缩算法，jpeg 会把图像分解成 8*8 的栅格，然后对每个栅格进行压缩处理，压缩率高。 不支持动画、不支持透明。 适用于色彩丰富的摄影图形和写实图像，不适合包含颜色较少，具有较大颜色相近区域和亮度差异十分明显的简单图片
- 渐进式 jpeg(progressive jpeg)
- 在编码时对图片进行多次扫描，并把每次扫描的结果按顺序存储到文件中
- 加载显示的时候，每读取到一层就显示一层，这样图片显示就会从模糊到清晰。
- 使用渐进式 jpeg 可以缩短用户等待时间，可以替换缩略图方案。
- baseline jpeg
- 在编码的时候从上到下，从左到右逐行编码，
- 加载显示的时候也是逐行显示
gif
无损压缩，支持动画，支持半透明，兼容性好，支持交错（部分接受到的文件可以以较低的质量显示） 采用8位索引色，色姐过渡糟糕，图片有颗粒感，所以不适合色彩丰富图片处理。
png
采用无损压缩，压缩的过程中会对图片中的颜色进行采集，生成索引色。但是 png 能够保存的索引色有限(png8 能够保存 256 种，png24 能够保存 1600 多万种)，当图片上的颜色种类超过索引色上限就会发送图新信息丢失。 为取代 gif 而生，压缩算法优于 gif；支持透明，不支持动画； 可以无损压缩保存高保真图片，但是图片文件较大，不适合在 web 页面使用，适合保存颜色相对简单的图片，以纯色或平滑过渡进行填充。
- png 8
- png 24
- png 32
webp
webp支持有损压缩和无损压缩，支持透明和动画。 webp 是 webm 技术的一部分；webm 是 Google 推出的开源、无专利的多媒体文件格式。支 webp 采用更高效的压缩算法，同等质量下比 jpeg 节省 30%空间。在合适的条件下可以用来替换 JPEG 和 PNG
SVG
矢量图形，使用 XML 描述文件 图像伸缩不影响展示效果，支持动画，可以使用CSS和JS操作