使用「Thumbor」將圖片最佳化

只要使用「縮圖」，就能視需求調整圖片大小、壓縮和轉換效果。

Katie Hempenius
Katie Hempenius
X

Thumbor 是免費的開放原始碼圖片 CDN，可讓您輕鬆壓縮、調整圖片及轉換圖片。在這篇文章中，你不需要安裝任何東西，就能直接試用「喜歡」。我們已經設定沙箱 Thumbor 伺服器，讓您可在 http://34.67.235.246:8888 試用。要實驗的圖片可透過以下網址取得：http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg。

先決條件

本文假設您已瞭解圖片 CDN 如何改善載入效能。如果不支援，請參閱使用圖片 CDN 最佳化圖片。同時假設您已建立基本網站。

縮圖網址格式

如「使用圖片 CDN 最佳化圖片」一文所述，每個圖片 CDN 為圖片使用的網址格式稍有不同。圖 1 表示「指標」的格式。

縮圖網址具有下列元件：來源、安全金鑰、大小、篩選器和圖片。
「縮圖」的網址格式

來源

如同所有 來源，Thumbor 網址的來源由三個部分組成：配置 (幾乎一律為 http 或 https)、主機和通訊埠。在這個範例中，主機是使用 IP 位址識別，但如果您使用的是 DNS 伺服器，則可能類似於 thumbor-server.my-site.com。根據預設，Thumbor 會使用通訊埠 8888 提供圖片。

安全金鑰

網址的 unsafe 部分表示您在沒有安全金鑰的情況下使用 Thumbor。安全金鑰可防止使用者在未經授權的情況下變更圖片網址。只要變更圖片網址，使用者就能利用您的伺服器 (和代管帳單) 調整圖片的大小，甚至可能惡意對您的伺服器造成超載。本指南不會說明如何設定 Thumbor 的安全金鑰功能。

大小

這部分的網址會指定輸出圖片所需的大小。如果不想變更圖片大小，可以省略。縮圖會採用不同的方法 (例如裁剪或縮放)，以達到所需大小，取決於其他網址參數。本文下一節將說明如何調整圖片大小。

立即試用：

  1. 點選下列網址，即可在新分頁中查看原始大小放送的圖片：http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

    原始大小圖片
    原始圖片

  2. 將圖片大小調整為 100x100 像素：http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg

100x100 像素的圖片
已將圖片大小調整為 100 x 100 像素

篩選器

篩選器可轉換圖片。網址區隔中的篩選器部分以 filters: 開頭，後面接著以半形冒號分隔的篩選器清單；如果您並未使用任何篩選器，則可省略。個別篩選器的語法類似於含有零個或多個引數的函式呼叫 (例如 grayscale())。

立即試用：

  1. 套用單一濾鏡：半徑為 25 像素的高斯「模糊」效果：http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

    模糊的圖片
    模糊的圖片

  2. 套用多個篩選器。將圖片轉換成灰階模式，並旋轉圖片 90 度：http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

灰階圖片已旋轉 90 度
灰階旋轉的圖片

轉換圖片

本節著重在與效能最相關的「Thumbor」功能，像是壓縮、調整大小，以及在不同檔案格式之間轉換。

壓縮

「品質」篩選器會將 JPEG 圖片壓縮成所需的圖片品質等級 (1-100)。如果未提供畫質等級，Thumbor 會將圖片壓縮至 80 的品質等級。我們建議的預設設定是：品質等級 80-85 對影像品質幾乎沒有明顯影響，但通常會將圖片大小縮減 30% 至 40%。

立即試用：

  1. 將圖片壓縮成 1 畫質 (非常差)：http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

    圖片畫質不佳
    圖片畫質不佳

  2. 使用 Thumbor 的預設壓縮設定壓縮圖片：http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

沒有明顯品質問題的壓縮圖片
壓縮圖片

正在調整大小

如要調整圖片大小，同時維持原始比例，請使用網址字串 size 部分內的 $WIDTHx0 或 0x$HEIGHT 格式。

立即試用：

  1. 將圖片寬度調整為 200 像素，同時維持原始比例：http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

    寬度為 200 像素的圖片
    圖片大小已調整為 200 像素

  2. 將圖片調整至 500 像素的高度，同時維持原始比例：http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

高度為 500 像素的圖片
圖片大小已調整為 500 像素

您也可以使用「比例」篩選器，將圖片調整為原始大小的百分比。如果同時使用比例篩選器指定大小，系統會調整圖片大小，然後套用比例濾鏡。

立即試用：

  1. 將圖片調整為原圖 50% 的比例：http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

    圖片為原尺寸 50%
    已將圖片大小調整為原尺寸 50%

  2. 將圖片調整成 1000 像素的寬度，然後將圖片調整為目前大小的 10%：http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg

寬度為 100 像素的圖片
圖片大小已調整為 100 像素

這些方法只是 Thumbor 許多裁剪和調整大小的選項。如要瞭解其他選項，請參閱「用量」一文。

檔案格式

「格式」篩選器會將圖片轉換為 jpeg、webp、gif 或 png。請注意，如要獲得最佳效能，請使用 JPEG 或 WebP，因為 PNG 和 GIF 檔案通常較大且不壓縮。

立即試用：

  1. 將圖片轉換為 WebP。開啟開發人員工具的「網路」面板後，文件的 Content-Type 回應標頭會顯示伺服器傳回 WebP 圖片：http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg
開發人員工具螢幕截圖：顯示圖片的內容類型 (WebP)
開發人員工具中顯示的 content-type 回應標頭

後續步驟

歡迎試用其他篩選器及轉換 hero.jpg 圖片。

如果您想使用自己安裝的 Thumbor，請查看下方的附錄，瞭解使用 thumbor.conf 檔案的方式和原因。

附錄：thumbor.conf

本文討論的許多設定選項和許多其他設定選項都可以透過建立及使用 thumbor.conf 設定檔來建立預設值。除非輸入網址字串參數，否則 thumbor.conf檔案中的設定會套用至所有圖片。

  1. 執行 thumbor-config 指令來建立新的 thumbor.conf 檔案。

    thumbor-config > ./thumbor.conf

  2. 開啟新的 thumbor.conf 檔案。thumbor-config 指令會產生一個檔案，其中列出並說明所有 Thumbor 設定選項。

  3. 如要設定設定，請取消註解行並變更預設值。 調整下列設定可能會對您有所幫助：

    • QUALITY
    • AUTO_WEBP
    • MAX_WIDTH和MAX_HEIGHT
    • ALLOW_ANIMATED_GIFS

  4. 以 --conf 旗標執行 Thumbor，即可使用 thumbor.conf 設定。

    thumbor --conf /path/to/thumbor.conf