ラーニングセンターに戻る

画像最適化とは？

画像最適化とは、画像の品質が目に見えて低下しない範囲で可能な限りファイルサイズを小さく保ちながら、画像にアクセスするデバイスに最適な形式、サイズ、解像度で高品質の画像を調整して配信するプロセスを指します。

不可能なタスクのように聞こえますか？そうかもしれませんが、レスポンシブなWebサイトを配信するためには、残念ながらこれを避けるのは困難です。今日、ユーザーはモバイルデバイスからパソコンまで、さまざまなブラウザを使用して、多くの異なるソースからサイトにアクセスしています。ユーザーはレスポンシブなエクスペリエンスを求めており、画像最適化は配信速度だけでなく、検索におけるサイトのパフォーマンスにも影響する可能性があるため、このプロセスの重要な要素です。

画像最適化が重要な理由

画像最適化は、優れた閲覧者体験にとって重要ですが、必須ではありません。少なくとも、閲覧に使用されるデバイスに関係なく画像が正しく表示される画像形式を選択する必要があります。さらに、画像の品質とサイズの両方に影響する、画像の解像度やエンコードなどにも留意する必要があります。 

画像を物理的に変換するだけでなく、検索エンジン最適化（SEO）を強化するために、ファイル名、ALT タグ、画像メタデータなども考慮する必要があります。

外部ツールを使用してこのタスクに自力で取り組むことはできますが、ビジネスが成長してスケールする必要が生じるにつれて、より困難になり、コストも時間もかかるようになります。（しゃれではありません！）画像最適化ソリューション、特にエッジベースのソリューションは、Webサイト上の画像を最適化するために必要な作業の自動化とスケールを支援し、手動でこれを管理するコストはもちろん、コンピューティング費用の削減または排除にも役立ちます。CDN サービスと組み合わせることで、最適化された画像をキャッシュし、閲覧者への配信を高速化できます。

画像最適化の仕組み

画像最適化ソリューションにより、高解像度の画像をアップロードし、さまざまな設定を定義して、サイトの訪問者に最も効率的に配信できます。画像最適化ソリューションは通常、コンテンツ管理システムのプラグインまたは拡張機能、あるいはスタンドアロン・サービスとして、オンプレミスでもオンラインでも利用できます。これらのソリューションでは、変換設定を指定し、画像を配信する前にその設定をサーバー側で適用できます。

以下は、配信向けに画像を最適化する際の一般的なプラクティスの一部です：

  • 即座にデバイスを検出し、ユーザーの画面サイズに合わせて最適な画像ファイルを配信します。

  • 画像を圧縮し、プラットフォーム、接続性、互換性などに基づいて配信を最適化します

  • 特定のサイズに合わせて画像をスケーリングする

Webサイトを読み込み、画像をリクエストする際、ユーザーの Web クライアントはWebサイトの CSS を使用して、デバイスに最適なバージョンの画像を判断します。それらのパラメータを持つ特定の画像に対するリクエストが送信され、画像最適化ソリューションは最適化された画像を利用可能にする前に変換を適用します。

サイトにアクセスする可能性のあるすべてのデバイスを予測し、それぞれのシナリオに合わせてパラメータを定義しようとする代わりに、JavaScript API を使用してクライアントのブラウザとバージョン番号の詳細をプログラムで検出し、それに応じて最適な変換をリクエストできます。

画像最適化ソリューションとCDN サービスを組み合わせることで、最適化された画像の配信をさらに高速化できます。最初の画像リクエストが処理された後、元の画像と変換後の画像の両方が CDN サーバーにキャッシュされます。その後、同じ変換に対する後続のリクエストは、変更を加えることなくキャッシュから直接処理されます。異なる変換に対するリクエストは、キャッシュ内の元の画像を使用して処理されるため、オリジンへのトラフィックとワークロードが削減されます。

画像最適化ソリューションのメリット

画像最適化ソリューションを使用すると、時間を節約し、インフラストラクチャのコストを削減し、ユーザーエクスペリエンスを向上させ、SEO を改善できます。

1. ワークフローの最適化

サイトで使用されている画像の数によっては、画像の最適化と管理に多くの時間と手間がかかる可能性があります。今日では、ひとつの画像が10以上のバージョンに変換され、それぞれ最も一般的な画面解像度向けに個別のファイルが作成されることが一般的です。画像最適化ソリューションにより、高品質の単一ソースファイルから必要な画像を作成し、時間を節約できます。ワークフローに画像最適化ソリューションを組み込むことで、これを自動的に実行できます。複数の画像ファイルを手動で作成したり、前処理スクリプトを使用したりする必要はもうありません！

2. コストを節約

画像最適化ソリューションを使用すると、サーバー上に各ファイルの複数のバージョンを保存したり、変換を実行するためのコンピューティングリソースに費用をかけたりする必要がなくなるため、インフラストラクチャコストの削減にもつながります。CDN サービスを使用すると、キャッシュから画像を配信し、ニーズの拡大に応じてスケーリングできるため、データ送信コストの削減にもさらに役立ちます。

3. 配信の高速化

画像最適化ソリューションと CDN を併用する最大のメリットは、配信速度です。CDN を利用すると、ユーザーに近いキャッシュから画像を配信できるため、配信時間が短縮され、その結果、サイトの読み込み時間も短縮されます。サイトの配信時間は、全体的なユーザーエクスペリエンスにとって重要であるだけでなく、サイトの SEO にも影響します。Google などの検索エンジンはサイトをクロールし、検索結果でサイトをランク付けする要素のひとつとして読み込み速度を考慮します。画像が原因でサイトの読み込みが遅くなる場合、検索エンジンはそれを理由にサイトの優先順位を下げる可能性があります。画像を最適化すると、ユーザーのデバイスに適した画像をより速くレンダリングして提供でき、その結果、SEO が向上します。

画像最適化プラクティスを採用することで、企業はWebサイトの読み込み時間を大幅に短縮し、オリジンの負荷を軽減し、最終的にはユーザー満足度を向上させることができます。最適化された画像と検索エンジンのランキングとの正の相関関係は、その重要性をさらに裏付けています。ユーザーがこれまで以上に高速でスムーズなオンラインエクスペリエンスを求める中、画像の最適化は、仮想領域で競争優位性を維持するために不可欠な要素となっています。

画像最適化の詳細については、以下のリソースをご覧ください。

Fastly Image Optimizer チュートリアル https://docs.fastly.com/jp/tutorials/fastly-io

Fastly を試してみませんか？

ぜひご連絡ください
お問い合わせ