图片插入在css与html的区别

1.写在css里面的图片是以背景图形式存在的，而写在html里的是以<img>标签形式存在的，在网页加载的过程中，以css背景图存在的图片会等到结构加载完成（网页的内容全部显示以后）才开始加载。

而html中的<img>标签是网页结构（内容）的一部分会在加载结构的过程中加载，换句话讲，网页会先加载<img>标签的内容，再加载背景图片，如果你用<img>引入了一个很大的图片，那么在这个图片下载完成之前，<img>之后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。

2.如果是装饰性的图片就写在css里面，如果是内容性的图片就写在html里面。

打个比方，你要做一个有漂亮边框的相册。那么修饰边框的图片就写在css里面，相框里面的内容照片就写在html里面。

二. 平时使用图片有以下几种方式：

1. 图片内联 （base 64）          减少http请求

2. 图片雪碧图（多张图片合并）  减少http请求

3. webp     在压缩方面比 JPEG 格式更优越，并能节省大量的服务器带宽资源和数据空间。与 JPEG 相同，WebP 也是一种有损压缩，主要优势在于高效率。在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%。