Image Resizing

正式推出 Image Resizing

隨著 Image Resizing 的推出，Cloudflare 的影像最佳化產品套件新增了另一款重要產品。透過這款產品，客戶能夠對影像執行一組豐富的重要動作。

調整大小 - 將來源影像調整為指定的高度和寬度。此動作可以為每種特定用途建立多個不同尺寸的變體。

裁剪 - 將來源影像調整為新的大小，不會維持原始長寬比，且會移除影像的一部分。這在製作僅保留影像的一部分以獲得不同格式的頭像或產品影像時十分有用。

壓縮 - 透過套用有損壓縮技術，減少來源影像的檔案大小。當可以接受以輕微降低畫質為代價來減少檔案大小時，可使用此功能。

轉換為 [WebP](https://en.wikipedia.org/wiki/WebP) - 若使用者的瀏覽器支援，將來源影像將轉換為 WebP 格式。WebP 影像利用了現代的高度最佳化影像格式。

透過結合使用這些動作，客戶只需在其伺服器上儲存一張高品質影像，即可使用 Image Resizing 為每種特定使用案例建立專門的變體。無需任何額外工作，即可自動從 Cloudflare 的全域快取中獲得每種變體。

範例

電子商務縮圖

電子商務網站通常會儲存每個產品的高品質影像。他們需要根據呈現產品的方式，建立該影像的不同變體。一個範例是建立用於目錄檢視的縮圖。使用 Image Resizing，如果高品質影像位於此處：

https://example.com/images/shoe123.jpg

下面是使用 Image Resizing 顯示的一張 75x75 像素的縮圖：

<img src="/cdn-cgi/image/width=75,height=75/images/shoe123.jpg"/>

回應式影像

當定制網站以使其在各種不同裝置類型上以不同尺寸顯示時，始終使用正確大小的影像十分重要。當影像需要佔據螢幕的特定百分比時，這可能會很困難。為解決此問題，可以使用 。 如果沒有 Image Resizing，則需要建立並儲存同一影像的多個版本。在此範例中，僅儲存了一張高品質的 hero.jpg 複本，然後使用 Image Resizing 根據需要將其調整為特定的大小。

<img width="100%" srcset=" /cdn-cgi/image/fit=contain,width=320/assets/hero.jpg 320w, /cdn-cgi/image/fit=contain,width=640/assets/hero.jpg 640w, /cdn-cgi/image/fit=contain,width=960/assets/hero.jpg 960w, /cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w, /cdn-cgi/image/fit=contain,width=2560/assets/hero.jpg 2560w, " src="/cdn-cgi/image/width=960/assets/hero.jpg"/>

在不變更 URL 的情況下強制執行最大大小

Image Resizing 還可在 Cloudflare Worker 中使用。Worker 讓您能夠編寫在全球各地的使用者附近執行的程式碼。例如，您可能想要在保持同一 URL 的同時將 Image Resizing 新增到您的影像。您的使用者和用戶端將能夠像往常一樣使用相同的影像 URL，但影像將以您需要的任何方式透明地修改。

您可以在與您的影像 URL 相符的路線上安裝一個 Worker，並調整任何大於限制的影像的尺寸：

addEventListener('fetch',event=>{event.respondWith(handleRequest(event.request))})

async function handleRequest(request) {
  return fetch(request, {
    cf: {
      image: {
        width: 800,
        height: 800,
        fit: 'scale-down'
      }
    }
  });
}

由於 Worker 只是程式碼，因此僅在帶有影像副檔名的 URL 上執行該 Worker 也很簡單，甚至是僅將影像調整為可交付至行動用戶端的大小也很輕鬆。

Cloudflare 和影像

Cloudflare 在構建影像加速工具方面有著悠久的歷史。我們的快取透過在更靠近使用者的地方儲存影像複本來幫助減少延遲。[Polish](https://blog.cloudflare.com/introducing-polish-automatic-image-optimizati/) 自動執行無損和有損影像壓縮選項，以從影像中移除不必要的位元組。[Mirage](https://www.cloudflare.com/website-optimization/mirage/) 基於裝置類型加速影像交付。我們將會繼續投資於所有這些工具，因為它們在改善 Web 上的影像體驗方面都有著獨特的功能。

Image Resizing 的不同之處在於，它是 Cloudflare 的第一個讓開發人員能夠完全控制其影像服務方式的影像產品。如果您想要提前或在 Cloudflare Worker 中定義您希望提供的影像大小，Image Resizing 是您的最佳選擇。

後續步驟和簡單定價

Image Resizing 如今可供 Business 和 Enterprise 方案的客戶使用。要啟用此功能，請登入 Cloudflare 儀表板並導覽至 [速度] 索引標籤。您可以在這裡找到 Image Resizing 並一鍵啟用。

本產品包含在 Business 和 Enterprise 方案中，免費提供超大使用量。Business 客戶每月有 10 萬個請求的限度，如有超出，則每 10 萬個請求收費 10 美元。Enterprise 客戶每月有 1000 萬個請求的限度，如有超出，將提供折扣等級。請求的定義是點擊包含 Image Resizing 的 URI 或從 Worker 調用 Image Resizing。

現在您已啟用 Image Resizing，可以開始調整第一張影像的大小了。

1. 使用您的現有網站，將一張影像儲存在此處：

https://yoursite.com/images/yourimage.jpg

2. 使用此 URL 調整該影像的大小：

https://yoursite.com/cdn-cgi/image/width=100,height=100,quality=75/images/yourimage.jpg

3. 嘗試變更

width=, height=, and quality=.

上述指示使用 Image Resizing 的預設 URL 格式。如需選項、使用案例和相容性的詳細資料，請參閱我們的開發人員文件。