Skip to main content

[note] 網頁圖片優化工具 Image

使用 WebP#

一般圖片#

<picture>  <source type="image/webp" srcset="images/flower1.webp" />  <source type="image/jpeg" srcset="images/flower1.jpg" />  <img src="images/flower1.jpg" /></picture>
<picture>  <source type="image/webp" srcset="images/flower2.webp" />  <source type="image/jpeg" srcset="images/flower2.jpg" />  <img src="images/flower2.jpg" /></picture>
<picture>  <source type="image/webp" srcset="images/flower3.webp" />  <source type="image/png" srcset="images/flower3.png" />  <img src="images/flower3.png" /></picture>

背景圖片#

背景圖片的使用可以搭配 Modernizr 這個輕量的工具,選擇要支援的特性後,複製貼上即可使用。

當瀏覽器有支援 webp 時,會在 <html> 加上 .webp 的 class;若瀏覽器不支援,則會加上 .no-webp 的 class。

Webp:將圖片轉成 WebP 的工具#

下載#

# 透過 brew 安裝$ brew install webp

轉檔#

# 單檔轉換$ cwebp -q 50 images/flower1.jpg -o images/flower1.webp
# 批次轉檔$ `for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

dwebp:將 WebP 轉成其他圖片的工具#

dwebp @ Google Developers

其他實用工具#

優化圖片工具#

ImageOptim

安裝#

$ brew install --cask imageoptim

使用#

$ open -a ImageOptim .        # 優化資料夾內所有檔案$ open -a ImageOptim *.png    # 優化某一支檔案

alias#

# 加到 ~/.zshrc 中,執行 imageOptim 即可對該資料夾內的所有圖片轉檔alias imageOptim="open -a ImageOptim ."

WebPQuickLook:在 Mac 上可以預覽 WebP 圖片#

WebpQuickLook @ Github

# 透過 brew cask 安裝$ brew install --cask WebPQuickLook

方便在 Mac 上檢視 WebP 的圖片。

PNGQuant:優化 PNG 的 CLI 工具#

$ brew install pngquant
# 加到 ~/.zshrc 中,執行 createWebp 即可對該資料夾內的所有圖片轉檔alias createWebp='for file in ./*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done'