有这样的句子：“图片比视频更简洁，图像比文字更重要。”这句话指出了图片的巨大优势。因此，图片已成为网站基本要素的重要元素之一。
但是，图片还具有我们必须注意的缺点，也就是说，与其他JavaScript文件，CSS文件和其他静态资源相比，图片太大了。如果我们可以从图片中进行优化，我相信它可以大大提高网站网站的访问。Speed.phsss，可以说图片是我们优化的亮点。
PNG是网页中使用最广泛的图片格式之一。当我们使用Photoshop指导图纸时，我们将选择它作为Web使用的格式。目前，Photoshop给出的格式是PNG。这是对的。
PNG是一种使用非破坏性压缩的图片格式，因此PNG格式的颜色性能优于其他格式的图片。
图片的应用程序方案与其优势更加链接。PNG的优势是无损的压缩，颜色很强。然后，根据其，其主要应用方案在以下方面：
JPG/JPEG是另一种使用网站中较高频率的格式。这是一种损坏和压缩的格式。如果不影响人们的情况可以区分图片的质量，则文件的大小尽可能多。这意味着JPG/JPEG删除了图片的一部分的原始信息。因此，PNG在颜色表达式中优于JPG/JPEG。
尽管JPG/JPEG受到损坏和压缩，但是当它是60％-70％时，其性能仍然非常好，并且文件大小要小得多。换句话说，您可以使用最小磁盘空间获得更好的图像质量。在这些优势上，其主要的应用程序方案在以下方面：
JPG/JPEG格式中图片的大小不会太大，并且图像质量是中等的。它是当前图片的主要解决方案。
GIF的应用程序场景主要由某些动画显示，例如一些简短图片。目前，需要使用视频引入视频组件，这增加了项目的数量。我们可以使用GIF动画替换它。例如：在项目进入之前，加载加载效果。
WebP格式是由Google开发的图片格式开发的图片格式，以加快图片加载速度。Webp为网络图片提供无损和损坏的压缩功能，同时支持在损害条件下透明的渠道。根据官方实验，降低了无损的WebP。与PNG相比，增长了26％；与JPG/JPEG相比，WebP的损失增长了25％至34％；WebP的丢失还支持透明的渠道。大小通常约为1/3，对应于相应的pngessence的1/3
但是，除了更好地支持WebP格式外，另一个浏览器对WebP的支持显然还不够好，这也是WebP的缺点之一。
尽管WebP的兼容性不是很好，但由于其巨大的优势，我们提出了各种解决方案来解决此问题。在下面，我们主要介绍主流网站如何使用WebP格式的图片。
我们可以看到，此图片请求具有2种格式后缀，即JPG和WebP。这是此图片的两种形式。Format，如果支持，请返回WebPack格式。
您需要指定访问标题以支持WebP格式
可以说，WebP是当前图片的最佳解决方案。我们可以在横幅图，列表图，内容图和其他方案中使用此格式，但请注意降级处理。
base64不是加密算法，尽管编码的字符串看起来有点像加密。它实际上是“二进制到文本”编码方法。它可以将任何二进制数据转换（映射）转换为ASCII字符串，以便在仅支持文本的环境中平稳传输二进制数据。
应用程序方案：对于一些非常小的矢量图标和徽标，根本没有浪费请求，我们可以将base64格式使用到HTML文档中。
图片懒惰加载是最常用的性能优化方法之一。对于在第一个屏幕中无法使用的图片，当用户掉落到相应的位置时，我们可以使用懒惰加载。
仍然定义最基本的HTML结构，如下所示：
原始：https：//juejin.cn/post/709488593687340965