架構作者的影像最佳化整合 - AWS Amplify 託管
了解映像最佳化 API

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

架構作者的影像最佳化整合

架構作者可以使用 Amplify Hosting 部署規格來整合 Amplify 的映像最佳化功能。若要啟用映像最佳化，您的部署資訊清單必須包含以映像最佳化服務為目標的路由規則。下列範例示範如何設定路由規則。

// .amplify-hosting/deploy-manifest.json

{
  "routes": [
    {
      "path": "/images/*",
      "target": {
        "kind": "ImageOptimization",
        "cacheControl": "public, max-age=31536000, immutable"
      }
    }
  ]
}

如需使用部署規格設定映像最佳化設定的詳細資訊，請參閱 使用 Amplify Hosting 部署規格來設定建置輸出 。

了解映像最佳化 API

映像最佳化可以透過 Amplify 應用程式的網域 URL在路由規則定義的路徑，在執行期叫用。

GET https://{appDomainName}/{path}?{queryParams}

映像最佳化會在映像上施加下列規則。

  • Amplify 無法最佳化 GIF，APNG也無法將SVG它們格式化或轉換為其他格式。

  • SVG 除非啟用dangerouslyAllowSVG設定，否則不會提供映像。

  • 來源映像的寬度或高度不能超過 11 MB 或 9，000 像素。

  • 最佳化映像的大小限制為 4 MB。

  • HTTP 或 HTTPS 是唯一支援使用遠端 來源映像的通訊協定URLs。

HTTP 標頭

接受請求HTTP標頭用於指定用戶端 （通常是 Web 瀏覽器） 允許的影像格式，以MIME類型表示。映像最佳化服務將嘗試將映像轉換為指定的格式。為此標頭指定的值具有比格式查詢參數更高的優先順序。例如，接受標頭的有效值為 image/png, image/webp, */* 。Amplify 部署資訊清單中指定的格式設定會將格式限制為清單中的格式。即使接受標頭要求特定格式，如果格式不在允許清單中，也會忽略該格式。

URI 請求參數

下表說明映像最佳化的URI請求參數。

查詢參數 Type 必要 描述 範例

url

字串

是

來源映像URL的相對路徑或絕對值。對於遠端 URL，支援 http 和 https 通訊協定。值必須URL編碼。

?url=https%3A%2F%2Fwww.example.com%2Fbuffalo.png

width

Number

是

最佳化映像的像素寬度。

?width=800

height

Number

否

最佳化映像的像素高度。如果未指定，則影像將自動擴展以符合寬度。

?height=600

適合

列舉值：cover、contain、fill、inside、 outside

否

如何調整映像的大小以符合指定的寬度和高度。

?width=800&height=600&fit=cover

position

列舉值：center、top、right、bottom、 left

否

適合時要使用的位置為 cover或 contain。

?fit=contain&position=centre

trim

Number

否

從包含類似於左上圖指定背景顏色的值的所有邊緣修剪像素。

?trim=50

擴充

物件

否

使用從最接近的邊緣像素衍生的顏色，將像素新增至影像的邊緣。格式 {top}_{right}_{bottom}_{left}是每個值要新增的像素數。

?extend=10_0_5_0

擷取

物件

否

將影像裁剪為以頂端、左側、寬度和高度分隔的指定矩形。格式為 {left}_{top}_{width}_{right}，其中每個值都是要裁剪的像素數。

?extract=10_0_5_0

格式

字串

否

最佳化映像所需的輸出格式。

?format=webp

quality

Number

否

映像的品質，從 1 到 100。僅在轉換映像的格式時使用。

?quality=50

rotate

Number

否

依指定的角度旋轉影像，以度為單位。

?rotate=45

翻轉

Boolean

否

在 x 軸上垂直鏡像 （上移） 映像。如果有，這一律會在輪換之前發生。

?flip

軟碟

Boolean

否

在 y 軸上水平鏡射影像 （左-右）。如果有，這一律會在輪換之前發生。

?flop

銳利化

Number

否

銳化可增強影像中邊緣的定義。有效值介於 0.000001 和 10 之間。

?sharpen=1

median

Number

否

套用中位數篩選條件。這可消除雜訊或平滑影像的邊緣。

?sharpen=3

模糊

Number

否

套用指定標準差的高斯模糊。有效值介於 0.3 到 1，000 之間。

?blur=20

Gamma

Number

否

套用 gamma 修正，以改善調整大小影像的感知亮度。值必須介於 1.0 和 3.0 之間。

?gamma=1

否定

Boolean

否

反轉影像的顏色。

?negate

標準化

Boolean

否

透過延伸其亮度來涵蓋完整的動態範圍，增強影像對比度。

?normalize

threshold

Number

否

如果影像中的任意像素強度小於指定的閾值，則以黑色像素取代。如果大於閾值，則使用白色像素。有效值介於 0 到 255 之間。

?threshold=155

染色

字串

否

使用提供的 來調整映像，RGB同時保留映像亮度。

?tint=#7743CE

灰階

Boolean

否

將映像變成灰階 （黑色和白色）。

?grayscale

回應狀態碼

下列清單說明影像最佳化的回應狀態碼。

成功 - HTTP 狀態碼 200

請求已成功完成。

BadRequest - HTTP 狀態碼 400

  • 輸入查詢參數的指定不正確。

  • 遠端 URL 不會在remotePatterns設定中列為允許。

  • 遠端 URL 不會解析為映像。

  • 請求的寬度或高度不會在sizes設定中列為允許。

  • 請求的映像是 ，SVG但dangerouslyAllowSvg設定已停用。

找不到 - HTTP 狀態碼 404

找不到來源映像。

內容太大 - HTTP 狀態碼 413

來源映像或最佳化映像超過允許的位元組大小上限。

了解最佳化映像快取

Amplify Hosting 會快取 上的最佳化映像，CDN以便從快取提供對相同映像的後續請求，以及相同的查詢參數。快取存留時間 （TTL） 由 Cache-Control 標頭控制。下列清單說明您指定 Cache-Control 標頭的選項。

  • 在目標為映像最佳化的路由規則中使用 Cache-Control金鑰。

  • 使用 Amplify 應用程式中定義的自訂標頭。

  • 對於遠端映像，遠端映像傳回的Cache-Control標頭會承兌。

映像最佳化設定中minimumCacheTTL指定的 定義 的下限 Cache-Control max-age 指令。例如，如果遠端映像URL回應為 Cache-Control s-max-age=10，但值minimumCacheTTL為 60，則會使用 60。