1. はじめに

画像は、Web サイトまたはアプリケーションの重要な部分です。高速に画像が読み込まれるよう、各クライアントデバイスに対して各画像を最適化する必要があります。Fastly のイメージオプティマイザー (Fastly IO) は、オンデマンドで画像を自動的に最適化できる有料のアドオンです。画像の読み込み時間の短縮、Web サイトの検索エンジンランキングの改善、オリジンのコンピューティングおよびストレージ要件の削減を実現します。

Fastly IO の使用を開始する際に参考にしていただけるよう、このステップバイステップのチュートリアルを作成しましたこれは、Fastly の CDN の紹介で説明した概念をベースに、例として前述した静的 Web サイト「Taco Labs」の画像を最適化する手順を説明するものです。このチュートリアルの最後には、Fastly IO を使用して画像を最適化する方法を理解できます。

前提条件

このチュートリアルでは、Fastly の CDN の紹介を完了していて、以下のテクノロジーと概念をよく理解していることを前提としています。

• Fastly CDN: 当社は、Fastly の配信プロダクトを使用し続けることで、Web サイトの配信をキャッシュおよび最適化します。
• 静的サイトの生成： Fastly は、HTML ファイルとして Markdown ソースを出力するのに Jekyll の静的サイトジェネレーターを使用します。
• バージョンコントロール： バージョンコントロールに Git を、リモートストレージと継続的インテグレーションにGitHubを使用します。
• Amazon Web Services (AWS): 当社は、ファイルを保存し、Web サイトとして配信するために S3 を使用します。
• コマンドラインインターフェース： curlを使用して HTTP ヘッダーを検証します。

仕組みを理解するために

自分で試して学ぶのが最良の方法です！仕組みを解説するために、チュートリアル全体を通じて特定のドメイン名 (io.tacolabs.com) を例として使用しています。効率的に理解を深めるため、始めはサンプル Web サイトを利用し、その後、独自のドメイン名、DNS レコード、Web ホスティングプロバイダーを使用して試すことをお勧めします。ドメイン名の例が使用されている場所に、ご自身のドメイン名を使用してください。

最適化された画像の必要性

平均的に画像は Web ページの読み込みに必要とされるバイトの60%以上を占めていますが、Web の画像の最適化は困難であることが知られています。考慮すべき要因はたくさんあります。例えば Google のパフォーマンス監査では、適切な画像サイズに調整されているか、画像が効率的にエンコードされているか、画像が最新の形式で配信されているかをチェックされます。

Web サイト上の画像が監査に通らない場合、検索エンジンでの Web サイトのランキングに影響が及ぶ可能性があります。モバイルネットワークを使用している場合も含めて、訪問者は Web サイトを迅速かつ効率的に読み込めることを期待していると Google は認識しています。 遅いサイトは Google の検索結果では優先順位が低くなります。

以前は必ずしもそうとは限りませんでした。例えば、2009 年の Web サイトへのトラフィックのほとんどは、デスクトップコンピューターから発生していました。以下に示すように、単一の画像をアップロードする際、読み込みが遅くても、ほとんどのデスクトップディスプレイできれいに画像が表示されるだろうと比較的自信を持つことができました。

しかし、iPhone や iPad などのモバイルデバイスの登場に加え、解像度の高い Retina ディスプレイや Bootstrap などの応答性の高い CSS フレームワークが導入され始め、Web 上の画像に対する新しいアプローチが必要になりました。Web サイトの所有者は、単一の画像をアップロードする代わりに、デバイスやディスプレイの種類に合わせて適切にサイズが調節され、最適化された画像が配信されるよう、各画像について複数の異なるバージョンをアップロードする必要性が生じました。

この問題を解決するために、さまざまなソリューションが開発されました。もちろん、Gimp や Adobe Photoshop などの画像編集アプリケーションで、手動で画像をリサイズして、ImageOptimize のようなアプリケーションを使用して画像を最適化できます。この面倒で時間のかかる作業を軽減するため、画像がサーバーにアップロードされる前に、このプロセスを自動化するスクリプトをデスクトップコンピューターで実行できるソリューションもありました。もう1つのソリューションは、サーバーサイドの拡張機能を使用して画像を最適化し、変換されたすべての画像をオリジンサーバーに保存することでした。

現在、最も広く使用されている画面解像度の場合、1つの画像を10以上のバージョン (それぞれ異なるファイル) にリサイズおよび最適化する必要があります。クライアントの Web ブラウザは、Web サイトの JavaScript と CSS と組み合わせて動作し、クライアントデバイスに適切なサイズの画像のバージョンを自動的に決定し、下記に示すように、そのバージョンを読み込むことができます。

問題と落とし穴

手作業やスクリプトで事前処理して画像最適化に対応するアプローチは、小規模な Web サイトでは可能ですが、スケールアップすることはできません。大規模な Web サイトには、別のソリューションが必要です。WordPress Web サイトに貢献しているチームがいる場合、アップロードしたすべての画像を手動でリサイズおよび最適化することを期待することは非現実的です。一方で、サーバーサイドのソリューションでは、膨大な量のコンピューティングとストレージのリソースが消費される可能性があります。

何百万人ものユーザーを抱える Web アプリケーションの場合、これらのアプローチでは無理があることが明らかです。例えば、人気のバケーションホームレンタルの Web サイトを考えてみてください。

バケーションレンタルホストがプロパティの画像をアップロードする際、city index やプロパティのホームページなど、さまざまな Web ページに画像を表示する必要があります。そのため、Web ページのレイアウトに応じて画像をリサイズする必要があります。また、ユーザーのデバイスと画面の解像度に応じて、画像の品質を調整する必要があります。画像のローテーションなど、他の変換も実行する必要がある場合があります。これらのタスクは、バケーションホームレンタル Web サイトにアップロードされたすべての画像に対して実行する必要があります。

これらすべてを自動的に処理できる効率的な画像最適化のソリューションが必要です。適切なコストで、手動による介入なしにこれらのタスクをすべて処理できるソリューションが理想的です。サーバーサイドのソリューションは、自動化コンポーネントを管理しますが、多くの画像を扱う場合、コンピューターとストレージの要件は、コストが抑制される可能性があります。

Fastly IO を使用する理由

Fastly は、画像の最適化に便利なソリューションを提供します。Fastly IO プロダクトは、オリジンサーバーから単一のフルサイズのソース画像を取得し、指定されたパラメーターを使用して自動的に変換します。 この変換は、サーバーとクライアントの間にあるthe edgeと呼ばれる場所で、リアルタイムに行われます。以下に示すように、Fastly IO による変換後、Fastly CDN で変換済みの画像がキャッシュされるため、今後ユーザーは画像をさらに高速に取得することができます。現在、サーバーサイドの画像の最適化ソリューションを使用している場合、Fastly IO はコンピューターとストレージのリソースに費やすコストを大幅に削減することができます。

Taco Labs Web サイトを使用して仮説的な例を見てみましょう。各レシピのメイン画像を追加して、Web サイトを更新するとします。これらのメイン画像は、2つの異なるページに表示されます。レシピページでは100%のレイアウト幅で表示され、レシピの目次ページではサムネイル画像として表示されます。

Fastly IO を使用すれば、元の画像を手動で変更し、変更された画像を保存する必要がなくなります。代わりに、リポジトリにフルサイズの画像を追加するだけで、後は Fastly IO に処理を任せることができます。

品質の設定、アップスケーリング、デフォルトの形式としてwebpを使用するなど、一部の画像変換設定は、すべての画像に自動的に適用されます。他の変換設定を使用するには、画像パスの末尾にクエリ文字列パラメータを追加する必要があります。例えば、画像をリサイズする場合、 imgタグに width=200を追加して、画像を 200px の幅にリサイズすることができます。

<img src="image.png?width=200">

この場合、画像の高さも、幅に比例して自動的に拡大されます。画像のいずれかを変換するためにパラメータを追加することができ、画像の最適化プロセスを迅速かつ簡単に実行できます。パラメータを追加すると、Fastly IO によって画像が自動的に変換されます。

Fastly IO を Taco Labs で使用する方法

Fastly の CDN の紹介を最後まで完了した場合、Fastly CDN の使用できるよう設定済みで、完全に機能する Web サイトが既に存在しています。

このチュートリアルでは、Fastly の CDN の紹介で使用した Web サイト上に構築していきます。Fastly IO が Taco Labs の Web サイト上の画像を自動的に変換できるようにするので、元のフルサイズの加増を手動で処理する必要は完全になくなります。Fastly IO によって画像サイズが縮小されるため、Taco Labs Web サイトの全体的な配信スピードを効果的にアップできます。

このチュートリアルですべての変更を段階に沿って見ていき、最終的な成果は https://io.tacolabs.com で確認できます。コードは、GitHub の Taco Labs リポジトリで利用できます。まだチェックしていない方は、ぜひご利用のコンピューターでリポジトリをお試しください。

初期設定

画像を最適化するために、Fastly IO を使用する前に、現在の設定のスナップショットを取ってみましょう：

• ドメイン: io.tacolabs.com
• S3 バケット名： io.tacolabs.com
• オリジンホスト名： io.tacolabs.com.s3-website.us-east-2.amazonaws.com
• エイリアス DNS レコード: io.tacolabs.com から s3-website.us-east-2.amazonaws.com まで