優れたソフトウェアと実用的なチュートリアル

Cloudflare Images + proxy-goによる無料の画像最適化avif webp

テクノロジーオタク

uzbox
2024-12-11

Cloudflare Imagesは毎月5,000件の無料コンバージョンを提供しています


サブスクリプション: https://www.cloudflare.com/developer-platform/products/cloudflare-images/ にログインし、左側の「Images-Overview」に移動して、Self-Storage を選択します。

左側の「Images-Conversion」では、使用する必要があるドメインを有効にします。これは、画像の元のドメイン名とオンライン変換リンクのルートドメイン名を表します。ドメイン名はCloudFlareでホストされている必要があります。

ここで、スプライシングリンクを使用してイメージを最適化できます。たとえば、有効なドメイン名が https://test.com の場合 (cloudflare CDN を有効にする必要があります。ルートドメイン名が Cloudflare の CDN を使用していない場合は、https://anyone.test.com などの任意の第 2 レベルドメイン名も使用できます)。イメージのアクセスドメイン名は https://s3.test.com/666.jpg です。その後、次のリンクから最適化されたイメージにアクセスできます。https://test.com/cdn-cgi/image/format=auto,metadata=none/https://s3.test.com/666.jpg proxy-go をデプロイします。最も単純なプロキシだけが必要な場合は、nginx でも実行できるはずです。accept の透過的な伝送に注意して適切なフォーマットを選択し、CF-Image-Format: auto ヘッダーを追加して CSP を削除する必要があります。これを書く AI を見つけることができます。使用していないため、調査していません。 Proxy-Goのデプロイメントは、中国本土のルートに直接接続された海外のサーバーに適しており、速度が向上します。アリババ・テンセントの日本と香港でも、このチュートリアルのProxy-Goデプロイメント方法に従うことができます（https://q58.org/t/topic/165）。デプロイメントプロジェクトのconfig.jsonの一部は次のように記述されています。

"MAP":{ "/s3": { "DefaultTarget": "https://s3.test.com", "ExtensionMap": { "jpg、png、jpeg、webp": "https://test.com/cdn-cgi/image/format=auto、metadata=none/https://s3.test.com" } } }...

プロキシゴー cdn.test.com ドメイン名をバインドすると、次のようにイメージにアクセスできるようになります。 https://cdn.test.com/s3/666.jpg ユーザーの閲覧環境や圧縮画像のサイズに応じて、avif を自動的に提供します。ウェブページ、jpegなど

オリジナルエフェクト画像：

最適化後:

なぜavifではないのですか?

スクリーンショットには、「警告:cf-images 299 "image too large for AVIF"」という文が表示されています。avif の方が大きいため、最適なファイルサイズである webp が使用されます。avif または webp が元の画像より大きい場合は、元の画像が使用されます。たとえば、一部の jpeg ファイルは変換後に大きくなります。この場合、元の画像が使用されます。avif の方が小さい場合は、avif が使用されます。

例えば：

そして、 Cloudflareの画像「変換の同時実行性は非常に高く、数十枚、数百枚の画像を同時に変換してもほとんど遅延がなく、素晴らしいです。これは私が開発したwebp-server-goよりも優れています。https://q58.org/t/topic/134) ははるかに使いやすく、サーバーのリソースを消費しません。