画像最適化
概要
画像は通常、バイト数とHTTPリクエスト数の両方で、Webページの最も重いコンポーネントです。ウェブサイト上の画像を最適化することは、ユーザー体験の向上、配信コストの削減、検索エンジンのランキングでの地位向上のために重要です。たとえば、Googleの検索ランキングアルゴリズムにおける最大コンテンツフルペイントの指標は、ウェブサイト上の画像をどれだけ最適化するかに大きく影響されます。
アーキテクチャ上の決定
画像最適化ソリューションは、コスト、柔軟性、パフォーマンスの観点からの要件に基づいて、さまざまな方法で設計できます。画像最適化ソリューションを設計する際には、次の技術的決定を行う必要があります。
- どのような画像変換が必要ですか？ フォーマット、サイズ変更、トリミングなどですか？
- 特定の画像リクエストにどの変換を適用するかは、どこで決めればよいのでしょうか？ クライアント側のフロントエンド（静的、レスポンシブデザインなど）、サーバー側（デバイスなどのリクエストコンテンツに基づく）、またはその両方の組み合わせですか？
- 変換はどこで実行しますか? 中心的な場所にあるのか、それとも分散した場所にあるのか？
- 変換はいつ実行しますか? 変換された画像は毎回保存しますか、それとも短期間保存しますか？ 同期的に実行されますか、それとも非同期で実行されますか？
もう 1 つ重要な決定事項は、AWS サービスを使用してソリューションを構築するか、サードパーティのマネージドソリューションを購入するかです。
一般的ユースケース
クラウドフロント、S3、ラムダをベースにしたカスタマーマネージドソリューション
画像最適化の最も一般的な用途は、ユーザーのブラウザ機能に基づいて自動的にフォーマットし、フロントエンドが画像のサイズを変更できるようにすることです。Next.JS などの一般的な Web 開発フレームワークには、デバイスのビューポートに基づいて画像サイズを自動的に選択できるレスポンシブ画像コンポーネントが用意されています。この一般的なユースケースの推奨アーキテクチャは、次の図で説明されています。
- ユーザーは、エンコーディングやサイズなど、特定の変換を加えた画像の HTTP リクエストを送信します。変換は URL にエンコードされ、正確にはクエリパラメータとしてエンコードされます。URL の例は https://exmaples.com/images/cats/mycat.jpg?format=webp&width=200 のようになります。
- リクエストは近くの CloudFront エッジロケーションで処理され、最高のパフォーマンスが得られます。リクエストをアップストリームに渡す前に、ビューワーのリクエストイベントで CloudFront Function が実行され、リクエスト URL が書き換えられます。CloudFront Functions は CloudFront の機能の 1 つで、JavaScript で軽量な関数を記述して、大規模でレイテンシーの影響を受けやすい CDN のカスタマイズを行うことができます。このアーキテクチャでは、URL を書き換えてリクエストされた変換を検証し、変換を順序付けて URL を正規化し、キャッシュヒット率を高めるために小文字に変換します。自動変換が要求されると、関数は適用する最適な変換も決定します。たとえば、ユーザーが format=auto ディレクティブを使用して最も最適化された画像形式 (JPEG、WebP、または AVIF) を要求した場合、CloudFront Function はリクエストに含まれる Accept ヘッダーに基づいて最適な形式を選択します。
- リクエストされた画像がすでに CloudFront にキャッシュされている場合、キャッシュヒットが発生し、画像は CloudFront キャッシュから返されます。キャッシュヒット率を高めるため、オリジンの前にキャッシュの追加レイヤーとして機能する CloudFront の機能である Origin Shield を有効にして、リクエストからの負荷をさらに軽減します。イメージが CloudFront キャッシュにない場合、リクエストは変換されたイメージを保存するために作成された S3 バケットに転送されます。リクエストされたイメージが既に S3 に変換されて保存されている場合、そのイメージは CloudFront で提供され、キャッシュされるだけです。
- そうしないと、S3 は 403 エラーコードで応答します。これは CloudFront のオリジンフェイルオーバーによって検出されます。このネイティブ機能のおかげで、CloudFront は同じ URL を再試行しますが、今回は Lambda 関数 URL に基づくセカンダリソースを使用します。呼び出されると、Lambda 関数は元の画像が保存されている別の S3 バケットから元の画像をダウンロードし、 Sharp ライブラリを使用して変換し、変換された画像を S3 に保存して、CloudFront を通じて配信し、将来のリクエストに備えてキャッシュします。
このソリューションを導入するには、このブログの手順に従ってください。また、このブログでは、Next.JS の Image コンポーネントでの in の使用方法も紹介しています。このソリューションでは、変換された画像を S3 に保存することを無効にして、変換された画像の提供を CloudFront キャッシュのみに依存させることができることに注意してください。
サードパーティのマネージドソリューション
サードパーティのマネージドイメージ最適化ソリューションを使用したい場合は、 Cloudinary、 ImageKit.io 、Cloudimage など、AWS マーケットプレイスで入手可能なソリューションを検討してください。この3つは、CloudFrontを使用しているか、独自のCloudFrontディストリビューションを管理したい場合はCloudFrontと統合されています。このようなサードパーティプロバイダーは画像最適化に特化しており、高度なSaaS機能を提供できますが、追加料金がかかります。