CSS 判斷加載 WebP 圖片

<picture>
<!-- 判斷瀏覽器是否支持 WebP 格式 -->
<source srcset="example.webp" type="image/webp">
<!-- 如果不支持 WebP 格式，加載 JPEG 格式 -->
<source srcset="example.jpeg" type="image/jpeg">
<!-- 如果都不支持，加載默認圖片 -->
<img src="example.png" alt="Example Image">
</picture>

WebP 格式是由 Google 開發(fā)的一種圖像壓縮格式，可以顯著減小圖片文件大小，提升網頁加載速度。但并非所有瀏覽器都支持 WebP 格式，為了兼容性，我們可以在 CSS 中判斷瀏覽器是否支持 WebP 格式并加載相應的圖片。

以上代碼通過<source>和<img>標簽實現(xiàn)了以下邏輯：

• 優(yōu)先判斷瀏覽器是否支持 WebP 格式，如果支持，則加載example.webp圖片。
• 如果瀏覽器不支持 WebP 格式，則加載example.jpeg圖片。
• 如果瀏覽器同時不支持 WebP 和 JPEG 格式，則加載默認圖片example.png。