HTML 網頁顯示 WebP 圖片
Table of contents
1 WebP 簡介
好似 JPG、PNG、GIF、TIFF、BMP 等等傳統既圖片格式，WebP 係 Google 發展出黎既一隻具有更高壓縮率既圖片格式。如果用喺網頁，例如網購平台，因為用戶可以快啲下載到啲圖片，用戶體驗就會有所提升。
主流既網頁瀏覽器都已經可以顯示到 WebP，而且 HTML 有 fallback 機制，就算個瀏覽器唔支援顯示 WebP 格式，都可以 fallback 去顯示其他格式既圖片，從而避免到死圖。
2 格式轉換程式
Google 提供左 WebP 既壓縮、解壓縮工具。
Google WebP 官網下載：Downloading and Installing WebP
2.1 cwebp 壓縮工具
./cwebp "/path/to/input.png" -q 50 -o "/path/to/output.webp"
CLI 選項：
| 選項 | 解釋 |
|---|---|
-q | 壓縮比例，數值由 0 至 100，可以有小數點 |
-o | 輸出檔案路徑 |
2.2 dwebp 解壓縮工具
./dwebp "/path/to/input.webp" -o "/path/to/output.png"
CLI 選項：
| 選項 | 解釋 |
|---|---|
-o | 輸出檔案路徑 |
3 寫 HTML code
3.1 <picture> tag
3.1.1 純 HTML
<picture> <source srcset="picture.webp" type="image/webp" /> <img src="picture.png" /> </picture>
解釋：如果瀏覽器支援顯示 WebP 格式，就會下載
<source> 既 srcset attribute 既 WebP 圖片；否則，就會下載 <img> 既 src attribute 既傳統格式圖片。3.1.2 React 既 JSX
要注意一點：用 React JSX 既話，要將
srcset 寫成 srcSet。<picture> <source srcSet="picture.webp" type="image/webp" /> <img src="picture.png" /> </picture>
參考資料：
- StackOverflow - picture tag in React
- StackOverflow - Why is React.js removing the srcset tag on
?
- React 官網 - All Supported HTML Attributes
3.2 background-image CSS
3.2.1 純 HTML
<div style="background-image: url('picture.png'); background-image: -webkit-image-set(url('picture-1x.webp') 1x, url('picture-2x.webp') 2x)" ></div>
註：
1x、2x 等等既數字係以 window.devicePixelRatio.toFixed(0) 黎計。參考資料：