2020-10-25

Photoshop 如何輸出 webp 圖片格式

什麼時候會需要 Webp 圖片格式?

先簡單說明一下,圖片格式是啥?
就是我們常說的 jpg檔、png檔等等...,如果你下載一張圖片檔名長這樣:mypicture.jpg,代表這張圖片格式為jpg,有興趣了解每個格式的差異用途,可以參考:圖形檔案格式比較
Webp 圖片格式的應用面大多在網站,因為它可以讓檔案變小,超有感...畫質卻一樣好,這樣一來就大幅提升使用者體驗,白話講就是讓你網站跑得更快!
我利用 Google 提供的網站效能測試工具(PageSpeed Insights),來確定網站圖片真的還很有優化的空間。
Site Performance

Photoshop 如何輸出 Webp? 要加外掛(Plugin)

Photoshop 本身不支援 Webp 圖片格式,要如何安裝外掛,讓輸出選項多 Webp 呢?以下說明適用 Mac 版的 Photoshop:

  1. 下載外掛(Plugin)檔案,點此下載
  2. 解壓縮後,將檔案放至Applications/Adobe Photoshop/Plug-ins
  3. 重啟 Photoshop,在另存新檔(Save as)或輸出檔案(Export)時,就會多出 Webp 的選項
install Webp Plugin for Photoshop
將檔案放到 Plugin 資料夾
另存新檔多了 Webp

如果是其他環境也有對應的安裝方式,請參考 Google 針對WebPShop 說明文件
請注意目前 Safari 尚未支援 Webp
查看目前支援的瀏覽器:https://developers.google.com/speed/webp/docs/webpshop

請我喝杯咖啡吧 ^^

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

PeiYing Tsai
author
愛藝術,喜歡以科技解決問題的數位產品設計師。 堅持信念,任何困難事,必有搞定的一天,Just try it! 隨手紀錄日常學習到的知識心得,希望對妳/你有幫助。
coffee-cup linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram