netlify-image-cdn
作者 netlifynetlify-image-cdn 是一份指南，教你如何透過 Netlify 的 Image CDN，使用 `/.netlify/images` 來調整圖片尺寸、裁切、轉換格式並進行最佳化。內容涵蓋本機資產、響應式圖片標記、遠端圖片 allowlisting、乾淨 URL rewrite，以及搭配 Functions + Blobs 的上傳流程，適用於後端開發。
這個技能評分為 84/100，代表它很適合推薦給需要即用型 Netlify Image CDN 工作流程的目錄使用者。它的觸發條件明確，說明了主要端點與參數，還包含實際可操作的上傳到轉換流程範例，因此使用者能獲得比一般泛用提示更高的價值。不過仍有一些採用上的顧慮，因為它沒有提供安裝指令，且內容主要依賴文件而非自動化。
- 在圖片最佳化、響應式標記與轉換用途上，透過描述與範例具備清楚的可觸發性。
- 操作細節完整：涵蓋 `/.netlify/images`、關鍵查詢參數、遠端圖片 allowlisting，以及乾淨 URL rewrite。
- 包含結合 Functions、Blobs 與 Image CDN 的真實使用者上傳圖片流程參考，能提升代理實作效率。
- `SKILL.md` 裡沒有安裝指令，因此使用者必須從文件自行推敲設定步驟。
- 支援素材只有一個參考檔，對於邊界情況與更廣泛的整合指引著墨不多。
netlify-image-cdn 技能概覽
netlify-image-cdn 是什麼
netlify-image-cdn 技能可協助你使用 Netlify 內建的 Image CDN，透過 /.netlify/images 來調整圖片尺寸、裁切、轉換格式與最佳化。當你需要一份實用的 Netlify Image CDN 指南，來提供本機資產、建立響應式圖片標記，或把使用者上傳的圖片接到最佳化傳遞流程時，這個技能特別有用。
適合誰使用
如果你在 Netlify 網站上做前端或 Backend Development，而且需要可預期的圖片轉換，又不想再多接一套獨立的圖片服務，這個技能會很合適。它特別適用於在意安裝簡單度、圖片效能、遠端圖片 allowlist，或想把上傳儲存與傳遞整合在一起的情境。
採用前要先確認的事
最重要的判斷點，是你的圖片來源是本機還是遠端、是否需要乾淨的 URL rewrite，以及你的應用程式是否需要完整的上傳流程。當你已經部署在 Netlify 上，並希望在 edge 端完成轉換，而不是自己做一套媒體後端時，netlify-image-cdn 的優勢最明顯。
如何使用 netlify-image-cdn 技能
安裝並檢查正確的檔案
先依照你的 skills 系統跑 netlify-image-cdn install 流程，然後先讀 SKILL.md。如果你正在處理上傳功能，請再看 references/user-uploads.md；同時也要用檔案樹確認你的 repo 是否還有其他相關參考檔案。這個 repo 的主要輔助資料集中放在一起，不需要在大量文件中到處翻找。
把模糊目標改寫成可用提示
使用 netlify-image-cdn usage 的提問方式時，請先把來源類型、輸出目標與限制條件講清楚。好的提示會直接指出圖片來源、目標尺寸、格式，以及圖片是本機還是遠端。
範例：
Use netlify-image-cdn to serve a hero image from /photo.jpg at 1200x800, crop with cover, and output webp with quality 80. Include the cleanest Netlify URL and explain any required netlify.toml changes.
如果是使用者上傳，請直接要求完整流程：
Use netlify-image-cdn with Functions + Blobs to store uploaded avatars, expose them at /uploads/:key, and transform them through /.netlify/images. Include the allowlist and rewrite strategy.
讀懂會影響輸出品質的使用細節
最重要的 repo 細節，是查詢參數與遠端圖片 allowlist 規則。請特別留意 url, w, h, fit, position, fm, 和 q，因為它們會決定輸出是被縮放、裁切、自動協商，還是鎖定格式。如果你要提供外部圖片，請仔細看 netlify.toml 裡的 regex 範例；漏掉 allowlist 項目是最常見的卡關原因。
netlify-image-cdn 技能 FAQ
netlify-image-cdn 只做圖片縮放嗎？
不是。netlify-image-cdn 技能涵蓋縮放、裁切、輸出格式控制與最佳化決策。當你需要乾淨的 URL rewrite，或需要使用者上傳圖片流程，而不只是單純改一個 img 標籤時，它也很有幫助。
一定要部署在 Netlify 上嗎？
要，這個技能是針對 Netlify 的 Image CDN 以及相關平台功能設計的。如果你的應用程式不是部署在 Netlify 上，通常用一般性的圖片提示會比 netlify-image-cdn skill 更適合。
對新手友善嗎？
算友善，前提是你想要的是安裝導向的簡明指南，而且你能編輯 HTML、netlify.toml 或 function 檔案。當你已經知道圖片來源和想要的結果時，這個技能會更好用。
什麼情況下不該用它？
如果你需要的是一套完全自訂、且與 Netlify 無關的媒體流程，或你的需求依賴 CDN 參數不支援的轉換，就不要用 netlify-image-cdn。這時候，專門的圖片處理服務，或針對應用程式量身打造的後端，通常會更適合。
如何改進 netlify-image-cdn 技能
給這個技能明確的圖片工作
最好的結果，來自具體輸入：圖片路徑或遠端 URL、目標尺寸、裁切意圖、輸出格式，以及品質應該更偏向檔案大小還是視覺保真。如果你只說「把這張圖最佳化」，輸出通常會比起直接指定頁面版型與裝置目標來得沒那麼有用。
提供會改變實作方式的部署限制
對 netlify-image-cdn for Backend Development 來說，請直接說明你是否需要上傳、公開提供，或以 rewrite 方式送出。這個選擇會決定解法是停留在 HTML 層級，還是需要包含 Functions + Blobs 再加上一層 redirect。
用真實測試案例迭代第一版輸出
如果第一個答案接近但還不能用，請用一個實際失敗案例來收斂：例如被 allowlist 的遠端網域、特定的長寬比，或瀏覽器格式偏好。這比單純要求「更好的 code」更有效，因為它能直接看出問題是出在 URL 語法、Netlify 設定，還是流程設計。