我们经常遇到有很多图片的网页加载的很慢，导致 LCP (Largest Contentful Paint ）时间变长
现在来分享一些图片加载优化的经验
-
采用webP格式，压缩效果比JPEG、PNG小35-35%
Web 最常用的图像格式是：
-
APNG（动态可移植网络图形）——无损动画序列的不错选择（GIF 性能较差）。
-
AVIF（AV1 图像文件格式）——静态图像或动画的不错选择，其性能较好。
-
GIF（图像互换格式）——简单图像和动画的不错选择。
-
JPEG（联合图像专家组）——有损压缩静态图像的不错选择（目前最流行的格式）。
-
PNG（便携式网络图形）——对于无损压缩静态图像而言是不错的选择（质量略好于 JPEG）。
-
SVG（可缩放矢量图形）——矢量图像格式。用于必须以不同尺寸准确描绘的图像。
-
WebP（网络图片格式）——图像和动画的绝佳选择。
Google于2010年9月30日首次公布WebP格式，Webp是静止图像和动画图像的绝佳选择。WebP 的压缩效果比 PNG 或 JPEG 好得多，而且支持更高的色深、动画帧和透明度等。AVIF 的压缩效果稍好，但在浏览器中的支持度不高，而且不支持渐进式渲染。
WebP 支持通过基于 VP8 视频编解码器的预测编码进行有损压缩，以及通过替换重复数据进行无损压缩。有损 WebP 图像比视觉上压缩级别相似的 JPEG 图像平均小 25-35%。无损 WebP 图像通常比 PNG 格式的相同图像小 26%。
在线压缩工具：
TinyPNG（tinypng.com）
- 这是一个非常流行的在线图片压缩工具，支持PNG和JPEG格式。它使用智能压缩算法，能够大幅减小图片文件大小，且压缩后的图像质量几乎不受影响。可以将图片转化WebP格式，一次最多转换3张
-
降低图片像素
一般情况下UI出的图像素都很大，比如1200*2600，如果显示在H5上（或者具有响应式的网页），可能会存在这个问题："Images were larger than their displayed size" ，如下图所示
理想情况下，您的网页不应提供大于在用户屏幕上呈现的版本的图片。超过此大小的任何内容只会导致字节浪费，并减慢网页加载速度。
在线压缩工具：
ResizeImage.net（www.resizeimage.net）
- 这个工具不仅能压缩图片，还可以调整图片的尺寸。你可以设置具体的宽度和高度，来降低图片的像素尺寸，支持JPG、PNG和GIF格式。
