全部產品
Search
文件中心

CDN:圖片處理操作方法

更新時間:Dec 27, 2024

如果有圖片自適應WEBP、自動旋轉(僅自動調正功能)和自動瘦身需求,可通過控制台直接開啟;您也可以通過在請求URL中添加圖片處理參數,對圖片檔案進行更豐富的處理,例如圖片裁剪、圖片添加浮水印等。

說明
  • 阿里雲CDN、DCDN和OSS的圖片處理都是獨立的功能,不能相互混用。

  • 影像處理為付費服務,當前免費使用,收費時間另行通知。

  • 當您使用影像處理功能時,由於不同圖片格式在壓縮演算法上存在較大差異,因此不同圖片格式之間相互轉換可能會導致圖片體積變大,例如:jpeg轉webp、jpeg轉png、png轉webp。如果您需要降低圖片檔案的體積,建議您通過調整品質參數quality降低圖片品質來實現。

開啟影像處理

  1. 登入CDN控制台

  2. 在左側導覽列,單擊域名管理

  3. 域名管理頁面,找到目標網域名稱,單擊操作列的管理

  4. 在指定網域名稱的左側導覽列,單擊性能优化

  5. 影像處理地區框中,開啟影像處理開關,選擇您需要轉換的圖片類型。

    說明
    • 選擇支援的圖片類型後,表示開啟圖片處理功能。開啟影像處理後,通過檔案URL處理圖片時,URL中攜帶的影像處理參數才會生效,否則為無效參數。

    • 控制台上是否開啟自適應WEBP、圖片自動旋轉(僅自動調正功能)和圖片自動瘦身功能,根據自身業務決定。

    picture_process-cn.jpg

    參數

    說明

    支援轉換的圖片類型

    選擇您需要轉換的圖片類型(必選參數,可多選)。

    自適應WEBP

    開啟後,通過對要求標頭Accept進行判斷,如果要求標頭Accept包含image/webp,則CDN會將其他格式圖片自動轉換為WEBP格式進行緩衝。

    說明

    開啟該功能後,短時間內會導致命中率下降,過後會自動回復正常,請勿在業務高峰期開啟。

    圖片自動旋轉

    開啟圖片自動旋轉,可自動調正圖片,方便使用者查看。

    說明
    • 圖片自動旋轉只對帶有旋轉參數auto-orient的圖片生效。

    • 開啟該功能後,短時間內會導致命中率下降,過後會自動回復正常,請勿在業務高峰期開啟。

    圖片自動瘦身

    開啟後(預設不開啟),在不改變解析度、尺寸和格式的前提下對圖片進行壓縮,節省訪問流量。

    • 0(預設值):表示不開啟。

    • 1~100:表示開啟。例如,填寫90%表示保留原圖品質的90%。

    說明

    僅支援JPEG和WEBP格式。

    原圖緩衝

    當一個原圖存在多個轉換後副本時,開啟原圖緩衝將減少回源次數。

  6. 單擊確定,完成開通。

通過檔案URL處理圖片

  1. 已選擇支援轉換的圖片類型,請參考開啟影像處理

  2. 通過請求URL傳參來完成自訂功能。

    • 格式:http://example.com/image_01.png?image_process=action,param_value/action,param_value

      欄位

      說明

      example.com

      您的CDN加速網域名稱。

      image_01.png

      圖片名稱。

      image_process

      image_process為固定參數,標明使用圖片處理參數對圖片檔案進行處理。

      action,param_value

      圖片處理的操作(action)、參數(param)和值(value),用於定義圖片處理的方式。多個操作以正斜線(/)隔開,CDN將按圖片處理參數的順序處理圖片。圖片處理支援的參數,請參見圖片處理參數

    • 樣本:http://example.com/image_01.png?image_process=resize,w_200/rotate,90/format,webp

    • 圖片處理效果:圖片先按比例縮放至寬200 px,再將圖片旋轉90°,最終儲存為WEBP格式。

支援的圖片處理參數

通過在請求URL中添加圖片處理參數可實現更豐富的影像處理功能。CDN支援攜帶一個或多個轉換參數處理圖片,支援的參數請參見下表。

圖片處理功能

處理參數

說明

格式轉換

format

轉換圖片格式。

品質轉換

quality

調整圖片品質。

圖片裁剪

crop

裁剪指定大小的圖片。

圖片縮放

resize

將圖片縮放至指定大小(目前只支援將原圖縮小處理,暫不支援將原圖放大處理)。

圖片旋轉

  • 圖片自動旋轉:auto-orient

  • 指定旋轉方向:rotate

將攜帶旋轉參數的圖片進行自適應旋轉或按指定角度以順時針方向旋轉圖片。

圖片色彩

  • 圖片亮度:bright

  • 圖片對比:contrast

  • 圖片銳利化:sharpen

調整圖片的亮度、對比和清晰度。

添加浮水印

watermark

為圖片添加圖片浮水印或文字浮水印。

擷取資訊

info

擷取圖片資訊,包括圖片的長、寬、高、圖片格式和圖片品質等資訊。