优化加载图片

网页制作会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg，但这些都不能满足我的要求。
科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩
体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经
开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

<picture class="picture">
    <source type="image/webp" srcset="~assets/img/1.png" media="(min-width: 750px)">
    <source type="image/webp" srcset="~assets/img/2.webp" media="(min-width: 650px)">
    <img class="image" src="~assets/img/3.png" width="100%">
</picture>

source 标签包含src、type、media三个属性，分别介绍如下
media：说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介
src：规定媒体文件的URL地址。
type：规定媒体资源的 MIME 类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式

实现思路：

1. 如果浏览器支持webp 并且屏幕宽度大于等于750px显示1.png
2. 如果浏览器支持webp 并且屏幕宽度大于等于650px显示2.webp
3. 如果以上都不支持 默认就显示img标签的图片

标签：浏览器,图片格式,webp,WebP,格式,加载,优化,png,图片
来源： https://blog.csdn.net/weixin_43456275/article/details/119116153