1. はじめに

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

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

前提条件

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

• Fastly CDN： 引き続き Fastly の配信プロダクトを使用して、Web サイトの配信をキャッシュ化および最適化します。
• 静的サイトの生成： 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つの画像を10以上のバージョン (それぞれ異なるファイル) にリサイズし最適化する必要があります。クライアントの Web ブラウザは、Web サイトの JavaScript と CSS と連動することで、下記に示すように、クライアントデバイスに適切なサイズの画像のバージョンを自動的に特定し、そのバージョンを読み込むことができます。

問題と落とし穴

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

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

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

これらすべてを自動的に処理できる、効率的な画像最適化ソリューションが必要となるのは明白です。妥当な価格で、手動による介入なしにこれらのタスクをすべて処理できるソリューションが理想的です。サーバー側のソリューションであれば、自動化という点は任すことができますが、多くの画像を扱う場合、コンピューターとストレージの要件によってコスト面で不可能となる可能性があります。

Fastly IO を使用する理由とは？

Fastly は、画像最適化向けの使いやすいソリューションを提供します。Fastly IO プロダクト製は、オリジンサーバーから単一のフルサイズのソース画像を取得して、指定されたパラメーターを使用して自動的に変換します。 この変換は、サーバーとクライアントの間にあるエッジと呼ばれる場所で、リアルタイムで行われます。以下に示されているように、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 によって画像が自動的に変換されます。

Taco Labs で Fastly IO が使用されている様子

「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まで