网络大图优化
传送现代格式的图片
名词来源：谷歌lighthouse-性能提升机会 Lighthouse 报告的“优化建议”部分列出了采用旧版图片格式的所有图片，显示了提供这些图片的 AVIF 版本可能节省的费用：
为什么要投放 AVIF 或 WebP 格式的图片？
与旧版 JPEG 和 PNG 相比，AVIF 和 WebP 这两种图片格式具有更优的压缩和质量特性。采用这些格式（而非 JPEG 或 PNG）对图片进行编码，可以提高图片的加载速度，并消耗更少的移动数据网络。
实际案例分享：
AVIF浏览器兼容性：
Chrome、Firefox 和 Opera 支持 AVIF，并且与具有相同画质设置的其他格式相比，AVIF 的大小会更小。 如需详细了解 AVIF，请参阅“提供 AVIF 图片”Codelab。
WebP浏览器兼容性：
最新版本的 Chrome、Firefox、Safari、Edge 和 Opera 支持 WebP，可为网络上的图片提供更好的有损和无损压缩。 如需详细了解 WebP，请参阅新的 Web 图片格式。
代码实践
HTML5 <picture>元素
picture工作原理：
- 现代浏览器会根据
<source>标签的media或type加载适当的图片。 - 旧版浏览器忽略
<source>标签，直接加载<img>标签中的图片。
<-- 第一个 source 元素指向采用新 AVIF 格式的图片。如果浏览器能够呈现 AVIF 图片，
那么它就是会选择的图片文件。否则，它会移至下一个 source 元素。
第二个 source 元素指向采用 WebP 格式的图片。如果浏览器能够呈现 WebP 图片，就会使用该图片文件。
否则，浏览器将回退到使用 img 元素的 src 属性中的图片文件。该图片是 JPEG 格式。
这意味着您可以开始使用新的图片格式，而不会影响向后兼容性。
在该示例中，type 属性用于告知浏览器指定了哪种图片格式。
!-->
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async">
</picture>
<--除了切换图片格式之外，您还可以切换图片尺寸。使用 media 属性告知浏览器图片的显示宽度。
将媒体查询放在 media 属性中。在这里，您可以告知浏览器，如果视口宽度大于 75em，则必须使用大图片。
在 40em 和 75em 之间，浏览器必须使用中等图片。在 40em 下，浏览器必须使用小图片。 !-->
<picture>
<source srcset="large.png" media="(min-width: 75em)">
<source srcset="medium.png" media="(min-width: 40em)">
<img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async">
</picture>
<--您还可以在 source 元素的 srcset 属性中使用像素密度描述符。
在该示例中，您仍然是告知浏览器在不同断点处应执行的操作，但现在，
浏览器可以选择最适合设备的像素密度的图片。 !-->
<picture>
<source srcset="https://storage.googleapis.com/web-dev-uploads/image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/ehboim8g0fQYR5Q39rbl.jpg" media="(min-width: 75em)">
<source srcset="https://storage.googleapis.com/web-dev-uploads/image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/7jLnRoFUlcDBkm6kkaT5.jpg" media="(min-width: 40em)">
<img
src="https://storage.googleapis.com/web-dev-uploads/image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/PEK3BODIcHQdpOLSc3Gg.jpg"
alt="Portrait of a happy-looking handsome dog with a ball in its mouth."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="https://storage.googleapis.com/web-dev-uploads/image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/PEK3BODIcHQdpOLSc3Gg.jpg 1x,
https://storage.googleapis.com/web-dev-uploads/image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/7jLnRoFUlcDBkm6kkaT5.jpg 2x,
https://storage.googleapis.com/web-dev-uploads/image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/ehboim8g0fQYR5Q39rbl.jpg 3x"
>
</picture>
<--如果您只需要为同一张图片投放不同尺寸的版本，srcset 是最佳选择。
但如果图片在较小尺寸下的显示效果不理想，则可尝试对图片进行剪裁。
不同的图片可能会具有不同的宽高比，以便更好地适应其背景。
例如，在移动浏览器中，您可能希望剪裁为较窄且较高的内容，而在桌面浏览器上，
您可能想要显示较宽和较短的剪裁内容。
下例中的主打图片会根据视口宽度更改其内容和形状。
为每个 source 元素添加 width 和 height 属性。!-->
<picture>
<source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
<source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
<img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>
