エッジでの画像のサイズ変更

Cloudflare画像のサイズ変更について

Cloudflare Image Resizing は、Cloudflare が提供する動的サービスで、Web アプリケーションに画像の最適化とサイズ変更をエッジにオフロードする機能を提供するように設計されています。 これにより、Web サイトは画像のサイズを手動で変更したり、キャッシュしたり、将来のリクエストに備えて保存したりする責任を放棄できます。

さらに、Cloudflareのエッジソリューションは、画像を最適化するためのカスタマイズ可能なオプションを提供します。 これらには、画質の調整、再フォーマット、サイズ変更が含まれており、特定のニーズに基づいた柔軟性が提供されます。 実装戦略に応じて、これらの調整は画像ごとに適用することも、すべての画像に均一に適用することもでき、最適なパフォーマンスと視覚的品質を保証します。

Optimizely DXP とセルフホスティングのメリット

セルフホスティングで CDN として CloudFlare を使用している場合、画像の最適化と画像のサイズ変更を統合するのは簡単です。 用途に応じて拡張できるアドオンです。 設定された数のサイズ変更アクションから始めて、サイトの需要が増大し、このクォータを超えると、追加コストが適用されます。 これは、さまざまな Web サイトのさまざまなニーズに合わせて調整されたスケーラブルなソリューションです。

Optimizely DXP を使用しているユーザーにとって朗報です。画像のサイズ変更はパッケージの一部となり、現在はベータ版です。 興味がある？ サインアップ ここ。 このプロセスは自己ホスト型のシナリオを反映しており、開発者はコード内で画像のサイズ変更をシームレスに活用できます。

実装が簡単に

DXP かセルフホスティングかに関係なく、Cloudflare 画像のサイズ変更を始めるのは簡単です。 私たちの推奨事項: URL 変換を実行してください。 これには、画像 URL に特定のセグメントを追加することが含まれます。Cloudflare はこれを認識し、ユーザーに提供する前にエッジで最適化するために処理します。

URL 構造のクイックガイドは次のとおりです。

• ゾーン: これはあなたのドメインです。
• /cdn-cgi/画像/: このセグメントは、最適化プロセスを開始する Cloudflare のトリガーです。
• : 最適化をカスタマイズできるカンマ区切りのリスト。
• : 画像の実際のパス。絶対パスまたは相対パスのいずれかになります。

たとえば、サイトで画像がホストされているとします。 元の URL は次のようになります。

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

Cloudflareを使用して最適化するには、URLを次のように変換します。

https://example.com/cdn-cgi/image/format=auto,quality=80/images/photo.jpg

この URL は、Cloudflare に、最適な形式を自動的に選択し、という名前の画像の品質を 80% に設定するように指示します。 photo.jpg。

元の画像:

https://www.hiddenfoundry.com/globalassets/stock-images/uploadtograph.png

サイズ1.3MB

CloudFlare 経由でサイズ変更:

https://www.hiddenfoundry.com/cdn-cgi/image/f=webp,fit=scale-down,width=420/globalassets/stock-images/uploadtograph.png

サイズ 19.3KB

画像のサイズ変更に関する追加リソース

画像のサイズ変更についてさらに詳しく知りたい方のために、この分野の専門家から入手できる貴重なリソースがあります。

Erik Henningson は、画像処理を強化するために特別に設計された注目すべき NuGet パッケージを開発しました。 このパッケージは、レンダリングするときに特に便利です。 CloudFlare のサポートが組み込まれた要素と srcset。 この統合により、さまざまな画面サイズやデバイスに最適化されたレスポンシブ画像を作成するプロセスが大幅に簡素化され、Web サイトの高速性と効率性が確保されます。 ここで: https://github.com/ErikHen/PictureRenderer.Optimizely

さらに、より技術的な探究のために、Minesh Shah がエッジでのレスポンシブなイメージ レンダリングの実装について詳しく説明しています。 彼の詳細なブログ投稿は次の場所にあります。 エッジでのレスポンシブ画像レンダリング by Minesh Shah。 Shah の記事は包括的な技術的な詳細を提供しており、このテクノロジーをプロジェクトに効果的に実装する方法の基本を理解したい人に最適です。