画像最適化とは？

画像最適化は、ファイルサイズを可能な限り最小に抑えながら、アクセスするすべてのデバイスに対して適切な形式、寸法、解像度で高品質の画像を生成して配信するプロセスを意味します。

不可能なタスクのように思えるかもしれません。残念ながら、首尾よく処理するのが難しい課題ではあります。今日のユーザーは、モバイルデバイスからパーソナルコンピューターにいたるまでの、さまざまなソースからサイトを訪問しています。何を使用しているのであれ、ユーザーは共通して、サイトの最も良いバージョンを可能な限り素早く表示したいと思っています。画像最適化は、配信速度と検索エンジンでのサイトのパフォーマンスの両方に影響を与えます。

少なくとも、表示するデバイスが何であれ正しく表示されるように、画像をフォーマットする必要があります。さらに、画像の解像度やエンコーディングなどを考慮する必要があり、どちらも画像の品質とサイズに影響を与えます。また、単に画像を変換するだけでなく、検索エンジン最適化 (SEO) を強化するために、ファイル名、ALT タグ、画像メタデータなども考慮する必要があります。

外部ツールを使用して自分自身でこのタスクを行うこともできますが、拡張する必要がある場合にはより困難になり、コストも時間もかかります。画像最適化ソリューション、特にエッジベースのソリューションは、Web サイトで画像を最適化する際に必要となる作業の一部を自動化および拡張しながら、同時にコンピューティングにかかるコストを削減または解消するのに役立ちます。CDN サービスと組み合わせることで、最適化された画像をキャッシュし、配信を高速化できます。

始める前に

CDN とは？エッセンシャルガイドを確認し、このガイドで使用される重要な概念や用語について理解しておくことをお勧めします。

画像最適化ソリューションの仕組み

画像最適化ソリューションは、プラグイン、コンテンツ管理システム (CMS) の拡張機能、またはスタンドアロンサービスとして利用できます。これらのソリューションでは、変換設定を指定して、画像を配信する前にこれらの設定をサーバー側に適用することができます。

以下は、一般的なパラメーターの一例です。

• クロップ：画像からピクセルを削除する
• 幅：画像の幅をリサイズする
• 品質：画像の圧縮レベルを設定する

サイトの訪問者が使用するさまざまな画面サイズに対応するために、複数の設定を定義することができます。Web サイトを読み込んで画像のリクエストを送信する際、ユーザーの Web クライアントは、Web サイトの CSS を使用して、デバイスにとって適切な画像のバージョンを決定します。このクライアントは画像を取得するためにこれらのパラメーターを含むリクエストをサーバーに送信し、画像最適化ソリューションによって画像レスポンスに変換処理が適用されます。

サイトにアクセスする可能性のあるすべてのデバイスを予測し、各シナリオ向けにパラメーターを定義する代わりに、JavaScript API を活用して、クライアントのブラウザに関する詳細をプログラムで検出し、それに応じて適切な変換処理をリクエストすることができます。

画像最適化ソリューションと CDN サービスを組み合わせることで、最適化された画像の配信をさらに加速させることができます。画像に対する最初のリクエストが送信されると、元の画像と変換された画像の両方が CDN サーバーにキャッシュされ、同じ変換を求める今後のリクエストはキャッシュから直接提供されます。別の変換リクエストがあれば、キャッシュにある元の画像を使用して提供されるため、オリジンへのヒット回数が削減されます。

画像最適化ソリューションの利点

画像最適化ソリューションを使用することで、作業時間やインフラコストを削減できるだけでなく、ユーザーエクスペリエンスを強化し、SEO を改善することができます。

サイトで使用されている画像の数によっては、画像を最適化して管理する作業が非常に時間のかかるものになる場合があります。今日の最先端のインターネットでは、通常1つの画像を10以上のバージョンに最適化する必要があり、その結果、最も一般的な画面解像度向けに個別のファイルが作成されます。画像最適化ソリューションでは、1つの高品質のソースファイルから必要となる画像を作成するため、作業時間を節約できます。ワークフローに画像最適化ソリューションを組み込むことで、自動的に実行することができます。複数の画像ファイルを手動で作成したり、事前処理スクリプトを使用したりする必要はありません。

画像最適化ソリューションを使用すると、各ファイルの複数のバージョンをサーバーに保存する必要がなくなり、変換を実行するためにコンピューティングリソースにコストをかける必要もなくなるため、インフラコストを節約することができます。CDN サービスを使用することで、キャッシュから画像を提供し、ニーズの増加に応じて拡張することができるため、配信にかかるコストを削減することができます。

画像最適化ソリューションを CDN と併用することの最大の利点は、配信の速度にあります。CDN ではオリジンよりもユーザーに近いキャッシュから画像を配信できるため、配信を高速化し、サイトの読み込み時間を短縮することができます。

配信にかかる時間は、ユーザーエクスペリエンスにとって重要なだけでなく、サイトの SEO にも影響します。Google のような検索エンジンはサイトをクロールし、検索結果でサイトのランキングを決める要因の1つとしてサイトの読み込み速度を測定します。画像がサイトの読み込みを遅くする原因となっている場合、検索エンジンがサイトの優先順位を下げる可能性があります。最適化された画像を使用することは、ユーザーのデバイスに適切な画像を表示し、より速くレンダリングして、SEO を改善することにつながります。

Fastly を選ぶ理由

Fastly のイメージオプティマイザー (Fastly IO) は、上記すべてのメリットを提供するだけでなく、最先端の CDN ネットワークと完全に統合することができます。

他のイメージオプティマイザーのサービスと同様に、Fastly IO はオリジンからソース画像ファイルを取得し、指定したパラメーターを使用して変換します。しかしながら、Fastly IO では、サーバーとクライアントの間のエッジで画像変換が実行されるため、画像の配信を高速化できます。

Fastly IO は、オリジンシールドと連動し、1つの POP を指定してオリジンからコンテンツをプルし、他のキャッシュサーバーに配信します。変換処理が行われると、元の画像と変換された画像の両方が、シールド POP にキャッシュされます。ネットワーク内の POP がキャッシュにない画像変換のリクエストを受け取ると、リクエストは (オリジンではなく) シールド POP に転送され、変換はシールドで実行されます。これにより、画像を取得するのにかかる時間を短縮し、オリジンへのヒットを防ぎます。さらに、最も重要なことは、その画像がネットワーク全体の POP で利用できるようになることで、このためキャッシュからより多くの画像を提供できるようになります。

クエリ文字列パラメーターを使用すれば、変換処理をさらにカスタマイズし、自動化することができます。Fastly IO では、さまざまな画像形式をサポートする複数のパラメーターが定義されています。さらに、Fastly IO では、変換クラスと呼ばれる事前に構成済みの IO クエリを採用しています。変換クラスは、1つのクエリで複数のパラメーターを自動的に定義します。例えば、クエリ文字列パラメーター class=large を使用すると、画像は一括で 16:9 のアスペクト比にトリミングされ、幅は 640px へとリサイズされて、75% の品質へと圧縮された後に配信されます。これは、画像に対して crop=16:9&width=640&quality=75 と定義した場合と同じです。これにより、画像をより簡単に変換できるだけでなく、画像最適化のパラメーターを公表したくない場合に便利です。

Fastly サイトにあるインタラクティブなサンプルを使用すれば、これらの変換クラスとその他のパラメーターをリアルタイムで試すことができます。

次のステップ

Fastly のイメージオプティマイザーを使用して、画像を変換しキャッシュする方法についてカバーする包括的なチュートリアルである「Fastly イメージオプティマイザーの説明」をご覧ください。Fastly IO を使い始める準備ができたら、セールスチームまでお問い合わせください。