HTML中常用的图片格式及应用场景

一个萝卜一个坑，不同的图片格式特性不一样，使用场合也有所不同。

一：图片的格式

JPEG(JPG)

- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明

- 一般用来保存照片等颜色丰富的图片

GIF

- GIF支持的颜色少，只支持简单的透明，支持动态图

- 图片颜色单一或者是动态图时可以使用gif

PNG

- PNG支持的颜色多，并且支持复杂的透明，不支持动图

- 可以用来显示颜色复杂的透明的图片

专为网页而生的

webp

-谷歌新推出的专门用来表示网页的一种格式

-它具有其他图片格式的所有优点，而且文件格式还很小

-缺点：兼容性不好

base64

-讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入

-一般都是需要和网页一起加载的图片才会使用base64

二：图片的使用原则：

效果不一致，使用效果好的

效果一致，使用小的

三：网页加载流程

第一次请求：加载网页本身

第二次之后请求，加载外部资源