画像最適化とは

画像最適化は、画像の品質が目に見えるほど低下しないようにしながらファイルサイズを最小限に保ちつつ、画像にアクセスするデバイスに最適な形式、寸法、解像度に画像を修正して高品質の画像を配信するプロセスを指します。

不可能なタスクのように聞こえるかもしれませんが、レスポンシブな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サイトの読み込み時間を大幅に短縮し、オリジンの負荷を軽減しつつ、最終的にユーザー満足度を高めることができます。最適化された画像と検索エンジンランキングの間に存在する正の相関関係が、画像最適化の重要性をさらに浮き彫りにしています。ユーザーがこれまで以上に高速でスムーズなオンライン体験を求める中、仮想領域で競争力を維持する上で画像最適化は不可欠です。

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

• ライブデモを含むプロダクトページ : https://www.fastly.com/jp/products/image-optimization

• Image Optimizer に関する eブック : https://learn.fastly.com/jp-network-services-Performance-ebook-Image-Optimization.html 

• Image Optimizer の自動化に関するブログ記事 : https://www.fastly.com/jp/blog/its-about-time-to-value-announcing-self-service-image-optimization

• お客様の声 : https://www.fastly.com/jp/video/fastly-image-optimizer 

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