2024-10-16 前端图片加载方式优化（webp）

把上传的图片文件格式转化为webp图片格式。

前置条件：图片文件存在阿里云oss。

阿里云的对象存储服务（OSS）支持在 URL 中直接指定图片处理参数，这样可以在不下载原始图片到服务器的情况下，直接由 OSS 服务端处理图片。

假设你有一张存在阿里云的图片链接，那么只需要在该链接的末尾加上?x-oss-process=image/format,webp即可优化加载速度。

注意：这个是不直接把图片文件转成webp格式的处理方式，如果后端直接把图片源文件转化成.webp格式则不需要前端处理。

使用webp格式的好处：与 JPEG 和 PNG 相比，WebP 可以在相同的视觉质量下提供更小的文件大小，或者在相同文件大小下提供更高的图像质量。

与webp类似的格式有JPEG XL、AVIF等，后者先比webp在压缩图片质量更强一点，但缺点就是支持的浏览器较少，而由google推出的webp兼容性较强，且为图片格式优化主流。

除了webp外，还有懒加载、预加载、图片算法压缩、图片转base64存CSS、CDN、img标签的现代属性、picture标签