開始使用

本頁面說明如何開始使用 Cloud CDN 圖片最佳化功能，包括如何設定圖片最佳化功能，以及支援的作業清單和範例。

必要條件

如要使用 Cloud CDN 圖片最佳化功能，請確保符合下列必要條件：

  • 您必須在網址路徑或相關聯的後端服務/bucket 中啟用 Cloud CDN 快取政策，並在該網址對應路徑中啟用圖片最佳化功能。

  • 圖片最佳化功能僅適用於全域外部應用程式負載平衡器，不支援傳統版應用程式負載平衡器。

  • 用戶端要求必須包含 Accept 標頭，指出可以接收圖片內容，例如 image/webp、image/avif、image/* 或 */*。

  • 原始伺服器必須傳回 HTTP 200 狀態碼和支援的圖片 Content-Type 標頭。

  • 網址中必須包含 imop 查詢參數，且該參數須包含一或多個有效的轉換作業。

設定圖片最佳化

圖片最佳化功能需要啟用快取功能。請務必設定下列至少一項：

  • 以後端為準的快取：確認後端已勾選「Enable Cloud CDN」(啟用 Cloud CDN)。

  • 網址對應層級快取：請確保在網址對應層級為您打算啟用圖片最佳化的特定路徑設定快取政策。

gcloud

您必須將設定新增至 YAML 檔案，並匯入網址對應，因為圖片最佳化政策是在 routeAction 物件內定義。

將現有的網址對應設定匯出至本機 YAML 檔案：

gcloud beta compute url-maps export YOUR_URL_MAP_NAME \
    --global \
    --destination my-url-map.yaml

在文字編輯器中編輯 my-url-map.yaml 檔案，然後將 imageOptimizationPolicy 欄位新增至所選的 routeAction 或 defaultRouteAction 區段。

name: image-matcher
routeRules:
  - description: ImageOptimizationService
    matchRules:
      - prefixMatch: /images/
    priority: 1
    routeAction:
      imageOptimizationPolicy:
        queryParameterInterpretation: ENABLED

匯入更新後的網址對應

gcloud beta compute url-maps import YOUR_URL_MAP_NAME \
    --global \
    --source my-url-map.yaml

控制台

  1. 前往 Google Cloud 控制台的「Load balancing」(負載平衡) 頁面。

    前往「Load balancing」(負載平衡) 頁面

  2. 按一下全域外部應用程式負載平衡器的名稱。
  3. 按一下「Edit」(編輯)。
  4. 前往「後端設定」分頁。
  5. 設定快取：圖片最佳化功能需要啟用快取，才能順利儲存。請選擇並設定下列其中一個選項， 圖片最佳化功能才能運作。
    • 以後端為準：確認已在後端服務設定中選取「啟用 Cloud CDN」。
    • 網址對應層級：
      1. 前往「轉送規則」，然後選取「進階主機與路徑規則」。
      2. 在啟用圖片最佳化功能的路由上，於網址對應層級定義快取政策。

根據轉送架構，選取其中一項轉送規則：

如要使用預設轉送規則，請按照下列步驟操作：

  1. 在「主機與路徑規則」部分，選取「動作」下方的「將流量轉送至單一後端模式」，然後從清單中選取後端。
  2. 展開「圖片最佳化」部分 (預設為收合)。
  3. 勾選「啟用圖片最佳化」核取方塊。

如要使用自訂路徑規則，請按照下列步驟操作：

  1. 在「Host and path rules」(主機與路徑規則) 部分，選取「Add host and path rule」(新增主機與路徑規則)。
  2. 在「Hosts」欄位中輸入「*」，比對所有主機名稱。
  3. 在「路徑比對器」部分，使用 YAML 編輯器定義設定。
  4. 按一下 YAML 編輯器下方的「程式碼指引」，即可取得程式碼指引。
  5. 複製程式碼片段並貼到 YAML 編輯器。
  6. 更新預留位置值。

查看設定

  1. 檢查設定。
  2. 按一下「完成」即可關閉子編輯器。
  3. 按一下「更新」，儲存設定。

支援的圖片格式

Cloud CDN 圖片最佳化功能支援來源伺服器的各種輸入格式。雖然大多數格式都可用於處理和輸出，但部分格式僅供輸入，無法做為目標輸出格式。

來源伺服器支援下列圖片格式：

格式 Content-Type 標頭 輸入/輸出 模擬情境
GIF image/gif 輸入和輸出 標準動畫/靜態格式。您可以使用 Freeze 作業擷取動畫影格。
png image/png 輸入和輸出 無失真格式，適合透明背景、標誌和數位藝術。
webp image/webp 輸入和輸出 現代化的網路最佳化格式，支援有損和無損壓縮。
jpeg image/jpeg 輸入和輸出 標準相片格式。
brunsli image/x-j 輸入和輸出 高效率無失真 JPEG 重新封裝格式。
tiff image/tiff 輸入和輸出 以標記為基礎的高品質點陣格式。
avif image/avif 輸入和輸出 高效率的新一代圖片格式。
bmp image/bmp 僅限輸入 無法指定為輸出格式。使用 ?imop=Convert,format=webp 轉換為 WEBP 或 JPEG。
ico text/ico、image/ico、image/icon、 application/ico、image/x-icon、image/vnd.microsoft.icon 僅限輸入 圖示容器格式。無法匯出，請轉換為支援的輸出格式再交付。
jp2k image/jp2 僅限輸入 JPEG 2000 格式。必須使用 Convert 作業明確轉換。
heif image/heif 僅限輸入 高效率圖像格式。必須先轉換，才能透過邊緣傳送。

圖片轉換網址

如要執行動態圖片轉換，請在圖片網址中加入 imop 查詢參數。這個參數會保留轉換字串，其中包含依序套用的一或多項作業。

轉換字串採用下列格式規則：

  • 請使用半形分號 (;) 分隔各項作業。
  • 在每個作業中，使用半形逗號 (,) 分隔內部參數。
  • 單一查詢字串只能包含一個特定類型的作業。

基準語法採用下列結構：

?imop=[OPERATION_1];[OPERATION_2];...[OPERATION_N]

如要同時對圖片執行多項動作，請在圖片網址中附加串鏈參數字串。舉例來說，如要將圖片調整為 800 像素寬，請將壓縮品質設為 85，並將格式轉換為 WebP，然後附加參數字串。

例如，假設使用者要求系統 將文字從英文翻譯成法文

https://www.example.com/image.jpg?imop=Resize,width=800;Compress,quality=85;Convert,format=webp;

政策結構

圖片最佳化政策是核心設定包裝函式，包含與圖片最佳化功能相關的所有屬性。

名稱

說明

設定

queryParameterInterpretation

列舉值，用於判斷是否要在資料層中解讀圖片最佳化查詢參數。

必填。如果設為 DISABLED，政策會忽略轉換的查詢參數，有效停用這項功能。如果設為 ENABLED，系統會啟用這項功能。

政策依附元件和驗證

圖片最佳化政策取決於 Cloud CDN 快取。如要使用這項功能，必須在下列其中一個位置明確設定 Cache Policy：

  • 設定圖片最佳化政策的網址對應路徑。

  • 與該確切路徑相關的後端服務或後端 bucket。

圖片最佳化政策會與有效的基礎快取政策一併嚴格套用。

圖片最佳化排序規則

系統會從左到右處理 imop 查詢參數中列出的作業，但下列絕對系統覆寫除外：

  • metadata 和 scale 作業一律會優先執行。
  • 畫布作業一律最後執行。

所有輸入資產都會先經過自動正規化，再執行這些轉換。系統會先將 EXIF 螢幕方向標記和 ICC 色彩設定檔直接套用至圖片像素，再移除任何中繼資料，確保後續結構動作的座標完整性維持準確。

後續步驟