图片介绍

[Pomelo1213]

前置知识

计算机中，像素是采用二进制数格式来表示的，不同的图片格式下的像素对应二进制位数的关系是不同的，但是总的来说，二进制位越多，对应格式的图片能展示的颜色就越多。

一个二进制数 0 或者 1 代表着：【黑】或【白】，那么如果有 n 位二进制数，就能展示 2 的 n 次方的颜色。

JPG图片

JPG 图片最大的特点是有损压缩，JPG 以 24 位存储单个图，所以可以展示1600多万的像素。但同时，如果将其压缩为原来的50%的情况下，仍然能保持60%的图片质量，也正是由于压缩的质量损耗并不高，所以多应用于一些颜色丰富且大图的场景，例如【首页 banner 】或者【首页轮播图】等，我们可以看下淘宝的首页：(图片就是电商的命根子ORZ)

但是 JPG 图片并不是那么完美，有些场景它也没办法处理，如果要表现一个线条明显的图片或者带有透明度的图片，JPG 是无法胜任的。因为有损压缩，会是线条表现的模糊，而透明度则是无法展示的。

PNG图片

PNG图片弥补了JPG的缺点，线条明显的图片它能展示的很细腻，也能展示带有透明度的图片，同时还能展示 1600 多万的像素，就是比JPG好。但是它有个很严重的问题，就是 体！积！大！，这简直是硬伤。为什么这么说呢，网页渲染的快慢，很大一部分依赖于网络请求，请求的东西越大，导致传输过程慢，从而影响页面渲染。

那是不是我们就不用了呢？不！要用，主要可以用在小的LOGO，或者显色对比鲜明的图片上

SVG

SVG（可缩放矢量图）与其他图片的区别是：SVG不是基于像素点的，而是对形状的一种描述，它比JPG和PNG具有更高的缩放比，且不会失真。它既可以直接书写在网页里，成为一个DOM，也可以单独保存为文件，以.svg 后缀的文件来进行引用。但是SVG图片的渲染成本很高，适用于对颜色不丰富，但是线条感强烈的小图片，例如：箭头等小图标。

Base64

严格来说这应该不算一种图片格式，应该算是一种图片的编码格式，是一种小图片的解决方案，图片的 src 如果直接使用Base64 可以直接渲染出图片，而不用单独去产生一次HTTP请求。但是不能滥用Base64 。为什么这么说呢，因为Base64编码过后，会使原有体积变大，如果滥用的话，会导致你页面整体体积增大，适得其反，所以是小图片的解决方案 = =。

WebP图片

这个优点很多，它集多种图片文件格式的优点于一身，就像MDN说的

• 我是MDN

但是，唯一缺点是兼容性：

限制我们使用这种格式的不是我们该不该用，而是浏览器支不支持我们用。大多数使用WebP的网页，都会先去做一次判断浏览器是否支持，不支持就采用 PlanB 来兼容。

总结

撒花🎉，终于可以总结了，我们来总结一下图片啥时候该用吧：

JPG：首页banner 、轮播等颜色丰富的大图。

PNG：具有透明度，对比度强烈的图片。例如：LOGO 之类的标志图片

SVG：线条强烈，颜色不丰富的图片。例如：具有几何形状的小图标

Base64：更新不频繁的小图片，编码产生的体积消耗 < 多一次网络请求的消耗的图片

WebP：只要浏览器能用，就用吧，别考虑啥了。

[Pomelo1213]

补充：雪碧图，现在并不是一个最佳方案，多种小图标整合在一张图片上，如果这张图片刚好请求失败，那么会使得多处的图标无法加载。而且，当有一个图标进行了修改（位置可能有变化），可能还需要修改代码，来进行样式上的调整。所以维护的难度上要高于其他的方式。不可否认，在减少请求这块确实有所收益，但并不是目前的最优解。

[Pomelo1213]

补充：其实针对简单的小的图标或者 icon 使用 svg 或者 png 都是可以的，对于简单的图标使用png再进行压缩一下，其实大小上不会和svg相差多少，简单的图标，可进行压缩的空间也会大上许多，如果存在拉伸的问题，还是采用 svg。