画像最適化とは何か？

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

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

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

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

設定前の注意点

CDNとは？を確認することを推奨します。このガイドで使用される重要な概念や用語を理解しておくことをお勧めします。

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

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

いくつかの一般的なパラメーターには、次のようなものが含まれます：

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

サイトの訪問者が使用するさまざまな画面サイズに対応するために、複数の設定を定義することができます。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 を始める準備ができたら、セールスチームまでお問い合わせください。