tencent cloud

Tencent Cloud EdgeOne

画像のWebP自動適応

ダウンロード
フォーカスモード
フォントサイズ
最終更新日: 2026-10-15 18:25:50
AI翻訳
この例では、リクエストヘッダー Accept を判定し、image/webp が含まれている場合、エッジ関数は画像形式を自動的に WebP 形式に変換し、EdgeOne エッジノードにキャッシュします。お客様の Web アプリケーションで多数の PNG、JPEG 形式の画像を表示しており、エッジで画像を自動的に最適化してトラフィック帯域幅コストを削減したい場合は、エッジ関数を使用してスムーズにアップグレードできます。PNG、JPEG 形式の画像を自動的に WebP 形式に変換し、ビジネスコードは 0 変更です。その他の画像変換形式については、ImageProperties を参照してください。
注意:
この例は、ソースファイルのレスポンスヘッダー Content-Type で指定された MIME タイプが画像(image/*)である場合にのみ、変換機能を正常に実行できます。
この例では、現時点で SVG 形式の画像の変換には対応していません。
エッジ関数のトリガールール設定に、ファイル拡張子 .png、.jpeg、.jpg などの画像拡張子を追加することをお勧めします。
async function handleEvent(event) {
const { request } = event;
クライアントがサポートする画像タイプを取得します。
const accept = request.headers.get('Accept');
const option = { eo: { image: {} } };
クライアントが WebP 形式の画像をサポートしているかどうかをチェックし、サポートしていない場合は元の画像を返します。
if (accept && accept.includes('image/webp')) {
option.eo.image.format = 'webp';
}
const response = await fetch(request, option);
return response;
}

addEventListener('fetch', event => {
関数コードが未処理の例外をスローした場合、エッジ関数はこのリクエストをオリジンサーバーに転送します。
event.passThroughOnException();
event.respondWith(handleEvent(event));
});

サンプルプレビュー

PCおよびモバイル端末のブラウザのアドレスバーに、エッジ関数のトリガールールに一致するURL(例:https://example.com/images-format/ef-1.jpeg)を入力すると、自動的にWebp形式の画像に変換されます。


関連参考



ヘルプとサポート

この記事はお役に立ちましたか?

フィードバック