netlify-image-cdn

netlify-image-cdn スキルの概要

netlify-image-cdn でできること

netlify-image-cdn スキルは、Netlify の標準 Image CDN を使って /.netlify/images 経由で画像のリサイズ、トリミング、再フォーマット、最適化を行うためのスキルです。ローカルアセットを配信したいとき、レスポンシブな画像マークアップを組みたいとき、ユーザーアップロード画像を最適化された配信経路に乗せたいときに、実用的な Netlify Image CDN ガイドとして特に役立ちます。

どんな人に向いているか

このスキルは、別の画像サービスを追加せずに予測しやすい画像変換を使いたい Netlify サイトの frontend および Backend Development に向いています。とくに、導入のしやすさ、画像パフォーマンス、リモート画像の allowlist 管理、アップロード保存と配信の組み合わせを重視する場合に適しています。

導入前に確認すべきこと

主な判断ポイントは、画像がローカルかリモートか、きれいな URL rewrite が必要かどうか、アプリに完全なアップロードパイプラインが必要かどうかです。netlify-image-cdn が最も強いのは、すでに Netlify にデプロイしていて、独自のメディアバックエンドではなくエッジ側で変換したい場合です。

netlify-image-cdn スキルの使い方

インストールして、読むべきファイルを確認する

まずはスキルシステムに対して netlify-image-cdn install の流れを実行し、そのあと最初に SKILL.md を読みます。アップロード機能を作るなら、より詳しい背景として references/user-uploads.md を確認してください。さらにファイルツリーを見て、この repo に紐づく追加の reference files がないかも確かめます。この repo では補足資料がまとまっているため、大きなドキュメント群を探し回る必要はありません。

漠然とした目的を、使える prompt に落とし込む

netlify-image-cdn usage のパターンに沿って、ソースの種類、欲しい出力、制約を最初に明示します。よい prompt では、画像のソース、ターゲットサイズ、format、そしてローカルかリモートかをはっきり書きます。

例:

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.

出力品質を左右する usage の詳細を読む

最も重要なのは、query parameters とリモート画像の allowlist ルールです。url、w、h、fit、position、fm、q に注意してください。これらによって、出力がリサイズされるのか、トリミングされるのか、自動で最適形式に切り替わるのか、あるいは format が固定されるのかが決まります。外部画像を配信する場合は、netlify.toml の regex 例を丁寧に読みます。allowlist の1件漏れが、最もよくある詰まりポイントです。

netlify-image-cdn スキル FAQ

これは画像リサイズ専用ですか？

いいえ。netlify-image-cdn スキルは、リサイズ、トリミング、出力 format の制御、最適化の判断までカバーします。単なる img タグの微調整ではなく、きれいな URL rewrite やユーザーアップロード画像のフローが必要なときにも役立ちます。

Netlify 上で使う必要がありますか？

はい。このスキルは Netlify の Image CDN と関連するプラットフォーム機能に特化しています。アプリが Netlify にデプロイされていないなら、netlify-image-cdn skill よりも一般的な画像 prompt のほうが適している場合があります。

初心者でも使いやすいですか？

はい。インストール中心のシンプルなガイドが欲しく、HTML、netlify.toml、または function file を編集できるなら使いやすいです。画像ソースと欲しい結果がすでに分かっているほど、このスキルは扱いやすくなります。

どんなときに使わないほうがいいですか？

Netlify とは無関係な完全に独自の media pipeline が必要な場合や、CDN parameters で対応できない変換に要件が依存する場合は、netlify-image-cdn を使わないでください。その場合は、専用の image processing service や、アプリ固有の backend のほうが合っています。

netlify-image-cdn スキルを改善するには

スキルに、画像の仕事を具体的に渡す

最もよい結果は、具体的な入力から生まれます。画像パスまたは remote URL、目標サイズ、crop の意図、出力 format、そして quality をファイルサイズ優先にするのか見た目優先にするのかをはっきり伝えてください。単に「この画像を最適化して」とだけ伝えると、ページのレイアウトやデバイスの想定まで書いた prompt より、出力の実用性は下がりがちです。

実装を変える制約条件を先に伝える

netlify-image-cdn for Backend Development では、uploads が必要か、public serving が必要か、rewrite ベースの配信が必要かをスキルに伝えてください。その選択によって、解決策を HTML 層で完結させるか、Functions + Blobs に redirect layer を組み合わせるかが決まります。

最初の出力は、実際の失敗ケースで詰める

最初の回答が惜しいけれど使えない場合は、ひとつだけ失敗例を添えて詰めます。たとえば、allowlist 済みの remote domain、特定の aspect ratio、あるいは browser format preference などです。これは「よりよい code を」と頼むより効果的で、問題が URL syntax なのか、Netlify の config なのか、パイプライン設計なのかを切り分けやすくなります。