4. Taco Labs Web サイトを更新する

Fastly IO を有効にし、デフォルト設定を行い、Fastly IO が Web サイト上のすべての画像を自動的に変換していることを確認しました。これで、新しい画像を Taco Labs Web サイトに追加し、Fastly IO のすべての機能を利用することができます。このセクションの終わりまでに、次のことを行います：

• すべてのレシピ、ベースレイヤー、ミックスインページにヒーロー画像を追加し、インデックスページにも同じ画像を表示する
• Markdown ソースで参照する画像を変換するのに役立つ Jekyll プラグインを作成する
• Web サイトの画像を保護するためにウォーターマークを追加する

では、始めましょう！

機能ページでヒーロー画像を操作する

Taco Labs の既存の実装は機能的ではありますが — 何と言えばよいでしょうか — 視覚的に魅力的ではありません。レシピ、ベースレイヤー、ミックスインを含むページには、テキストが多く、画像はありません。Web サイトのデザインと見た目の美しさを向上させるために、これらのページのトップにヒーロー画像を追加します。

このチュートリアルでは、Unsplash を使用して無料の画像を見つけ、その後リポジトリにフルサイズのヒーロー画像を各ページに1つ追加します。このセクションの終わりには、ヒーロー画像は、下記に示すように、コンテナの幅全体を占めます。

beef soft taco ヒーロー画像のソースファイルは、寸法が 5858x3905 ピクセルで容量は 1.19 MB にもなります。明らかに、Taco Labs でこの画像を変換する必要がありますが、どのようにすればよいでしょうか。

ヒーロー画像に関して、主な懸念は3つあります：

• 寸法：選択したソース画像すべてが同じ寸法を持つわけではありません。縦長の画像もあれば、横長の画像もあります。画像をトリミングする方法を見つけ、高さと幅を一致させる必要があります。
• DPR： クライアントデバイスの画面解像度に応じて、画像の DPR を調整する方法を見つける必要があります。
• 品質：DPR に関連して、ファイルサイズを削減するために、より高い DPR 画像の品質を落とす方法を見つける必要があります。

次の HTML から始め、すべてのページでこのサンプルヒーロー画像を使用して、レイアウトのソースコード (default.html) で画像を表示します：

<img src="https://io.tacolabs.com/assets/beef-soft-tacos.jpg">

問題を処理する際に、このコードを修正し続けます。

画像寸法を調整する

Fastly IO は、クライアントデバイス向けに画像を変換することができますが、最も適切な画像バリアントをリクエストするようにクライアントデバイスに促す必要があります。これを行うには、レスポンシブ画像テクノロジーを使用します。このテクノロジーにより、適切なクライアントデバイスに適切な画像を表示することができます。

Taco Labs で使用しているフロントエンドフレームワークの Bootstrap は、ヒーロー画像をレスポンシブ対応にする機能 (class="img-fluid") を提供します。しかし、この機能は、フルサイズの画像を CSS コンテナの寸法にのみ拡張します。これは、画像自体をリサイズするわけではありません。これは、Bootstrap が画面に画像をどう表示するかに関係なく、クライアントデバイスはフルサイズの画像を読み込むことを意味します。この機能を使用することはできますが、どのような場合でも画像をリサイズするためには Fastly IO を使用する必要があります。

そのクラスを追加すると、ソースコードはこのようになります：

<img src="https://io.tacolabs.com/assets/beef-soft-tacos.jpg" class="img-fluid">

これで、画像が Web ページに収まるようになりましたが、1.19 MB で 5858x3905 ピクセルのままです。ソースコードを調べると、Bootstrap が画像を 1296x864 ピクセルにスケールしていることが分かります。これが任意のクライアントデバイスに表示される最大サイズであると仮定することができ、Fastly IO を使用して、width 及び height パラメーターを使用して画像をこの寸法にリサイズすることができます。

もう1つの問題である、ソース画像の寸法が異なる場合に注意してください。提供する幅と高さの値で画像がどのように制約されるかをコントロールするために fit パラメーターを使用することにします。fit パラメーターによって、3つの異なる値のうち1つを使用して、画像をリサイズすることができます。この特定のユースケースでは、 cropが最もよく機能します。fit パラメーターで crop 値を使用し、指定されたリージョンに適合させて画像をリサイズおよびトリミングします。トリミングと同様に、変換が適用された後に画像の一部が切断されている場合がありますが、すべての画像は 1296x864 寸法に完全に適合します。

パラメーターを追加すると、ソースコードは以下のようになります。

<img src="https://io.tacolabs.com/assets/beef-soft-tacos.jpg?width=1296&height=864&fit=crop" class="img-fluid">

DPR の処理

DPR は、論理ピクセル（CSS ピクセルとも呼ばれます）に対する物理デバイスピクセルの比です。DPR で何もしなかった場合、Taco Labs Web サイトの画像は、高解像度のディスプレイでぼやけて表示されます。Fastly IO とdpr パラメーターを使用して、DPR に応じてクライアントデバイスに異なる画像を提供することができます。

Web ブラウザなどのクライアントサイドのソフトウェアは、ユーザーが使用するディスプレイの DPR を決定することができます。以下のように HTML を変更することで、srcset プロパティを使用して、クライアントデバイスにとって適切な画像をリクエストできるようになります。

1<img srcset="https://io.tacolabs.com/assets/beef-soft-tacos.jpg?width=1296&height=864&fit=crop&dpr=1.5 1.5x,
2             https://io.tacolabs.com/assets/beef-soft-tacos.jpg?width=1296&height=864&fit=crop&dpr=2 2x,
3             https://io.tacolabs.com/assets/beef-soft-tacos.jpg?width=1296&height=864&fit=crop&dpr=3 3x"
4             src="https://io.tacolabs.com/assets/beef-soft-tacos.jpg?width=1296&height=864&fit=crop"
5             alt="Beef soft tacos" class="img-fluid"
6/>

このコードは、クライアントデバイスに、ユーザーが使用するディスプレイに適切な画像 (Fastly IO で変換された画像) を自動的に読み込むように指示します。例えば、MacBook Pro で、dpr=2画像が読み込まれ、表示されます。

高い DPR 向けの画像の品質を下げてファイルサイズを抑える

DPR を使用する影響のひとつは、高い DPR 向けの画像はファイルサイズが大きくなるということです。この影響を緩和し、そのような画像のファイルサイズを縮小するために、より高密度のピクセルセットを維持しながら高い DPR 向けの画像の品質を下げることができます。デフォルトの Fastly IO 設定で、すべての画像のqualityが85になるよう指定していることを思い出してください。以下のように品質パラメーターを追加し、高い DPR 向けの画像のquality パラメーターの値を上書きします。

1<img srcset="https://io.tacolabs.com/assets/beef-soft-tacos.jpg?width=1296&height=864&fit=crop&dpr=1.5 1.5x,
2             https://io.tacolabs.com/assets/beef-soft-tacos.jpg?width=1296&height=864&fit=crop&quality=30&dpr=2 2x,
3             https://io.tacolabs.com/assets/beef-soft-tacos.jpg?width=1296&height=864&fit=crop&quality=10&dpr=3 3x"
4             src="https://io.tacolabs.com/assets/beef-soft-tacos.jpg?width=1296&height=864&fit=crop"
5             alt="Beef soft tacos" class="img-fluid"
6/>

品質を設定することは、バランスを見極めることです。低すぎると、ユーザーは品質の低下に気付きます。高すぎると、ユーザーは画像が読み込まれるまで、より長い時間待たされることになります。一般的には、DPR が高いと品質の低さがオフセットされ、実質的にファイルサイズを小さくしても、高解像度ディスプレイで許容範囲の見栄えの画像を表示できると考えられています。

静的サイトジェネレーターでコードを機能させる

これまでのところ、サンプルヒーロー画像を使用してコードをテストしています。これが動作するようになったので、残りのヒーロー画像をリポジトリに追加し、default.html のコードを更新して、各記事に正しいヒーロー画像を表示することができます。

Jekyll の静的サイトジェネレーターを使用しているため、各ページの YAML にヒーロー画像のファイル名を追加し、条件付きロジックと Liquid のテンプレート言語を使用して、画像ファイル名と alt テキストを挿入します。

レシピ、ベースレイヤー、ミックスインのレイアウトのヒーロー画像のdefault.htmlで使用する最終コードは以下のとおりです。

1{% if page.image %}
2<img srcset="https://io.tacolabs.com/assets/{{ page.image }}?width=1296&height=864&fit=crop&dpr=1.5 1.5x,
3             https://io.tacolabs.com/assets/{{ page.image }}?width=1296&height=864&fit=crop&quality=30&dpr=2 2x,
4             https://io.tacolabs.com/assets/{{ page.image }}?width=1296&height=864&fit=crop&quality=10&dpr=3 3x"
5             src="https://io.tacolabs.com/assets/{{ page.image }}?width=1296&height=864&fit=crop"
6             alt="{{ page.title }}" class="img-fluid"
7/>
8{% endif %}

これで、新しい画像とコードをリポジトリに追加およびコミットすることができます。GitHub Action は、生成されたサイトを Amazon S3 バケットに自動的にデプロイし、キャッシュをパージします。ヒーロー画像は、Web サイトにライブされています。

ヒーロー画像を伴うカードを追加してインデックスページを更新する

では、次の作業に移ります。インデックスページを更新して、ヒーロー画像が表示されるようにします。他のページでは、レシピ、ベースレイヤー、ミックスインのすべてが表示されるようになりましたが、Taco Labs の Web サイトの初期バージョンで他のページがそうであったように、インデックスページは味気ないままです。インデックスページにヒーロー画像をサムネイルとして追加して、もっと面白くしてみます。

複数の場所にさまざまな方法でソース画像を使用できることは、画像最適化ツールの主なセールスポイントのひとつです。このチュートリアルでは、最初にレイアウトでヒーロー画像を使用しました。今度は、インデックスページでサムネイル画像として再びヒーロー画像を使用します。Fastly IO は、ソース画像を効果的に2つの異なる画像に変換し、Taco Labs Web サイトのさまざまな部分で使用することができます。

Bootstrap のカード機能と、前のセクションで使用したすべての Fastly IO パラメーターを使用して、以下の HTML を作成し、3つのインデックスページに追加します。

1<div class="col">
2   <div class="card mb-3" style="max-width: 540px;">
3       <div class="row g-0">
4           <div class="col-md-4">
5               <a href="{{ post.url }}">
6                   <img srcset="https://io.tacolabs.com/assets/{{ post.image }}?width=180&height=270&fit=crop&dpr=1.5 1.5x,
7                                https://io.tacolabs.com/assets/{{ post.image }}?width=180&height=270&fit=crop&quality=40&dpr=2 2x,
8                                https://io.tacolabs.com/assets/{{ post.image }}?width=180&height=270&fit=crop&quality=15&dpr=3 3x"
9                                src="https://io.tacolabs.com/assets/{{ post.image }}?width=180&height=270&fit=crop"
10                                alt="{{ post.title }}" width="180" height="270"
11                   />
12               </a>
13           </div>
14           <div class="col-md-8">
15           <div class="card-body">
16               <h5 class="card-title"><a href="{{ post.url }}">{{ post.title }}</a></h5>
17               <p class="card-text">{{ post.excerpt }}</p>
18           </div>
19           </div>
20       </div>
21   </div>
22</div>

カードにとって適切な寸法に合わせて、幅と高さのパラメーター値を変更したことに注意してください。結果は、下記に示します。

変更をコミットし、キャッシュをパージすると、更新されたインデックスページがライブになります。

Markdown で画像を変換する

Taco Labs の Web サイトは、更新されたデザインとプロフェッショナルな画像により、ずっと見やすくなっています。1つ残っている問題は、次のように、Markdown で参照する画像を処理する方法です：

![warming up tortilla](https://io.tacolabs.com/assets/warming.jpg)

デフォルトでは、ビルド時に Jekyll によって、対応する HTML にこれらの行が変換されます。

<img src="https://io.tacolabs.com/assets/warming.jpg" alt="warming up tortilla">

デフォルトの Fastly IO 設定がこれらの画像に適用されるため、85の品質値を持つ WebP 形式で表示されます。では、Markdown ファイル内のすべての画像に他の変換処理を追加する場合、どうすればよいでしょうか。例えば、これらの画像をすべて300ピクセルの幅にリサイズしたいとします。各画像にパラメーターを手動で追加することもできますが、それでも、Markdown ファイルで HTML を使用することなく、DPR を処理する方法はありません。もっと良い方法があります。

Jekyll を使用しているため、カスタム Jekyll プラグインを使用して、画像に使用されるデフォルトの HTML を上書きすることができます。このプラグインによって、include file内にある以下のコードを介して、Markdown ファイル内のすべての画像が送信されます。

1<img srcset="{{ include.url }}?width=300&dpr=1.5 1.5x,
2             {{ include.url }}?width=300&quality=40&dpr=2 2x,
3             {{ include.url }}?width=300&quality=15&dpr=3 3x"
4             src="{{ include.url }}?width=300"
5             alt="{{ include.alt | xml_escape }}" class="img-fluid"
6/>

前とほとんど同じパラメーターを使用しています。1つ大きな違いは、width パラメーターが height パラメーターなしに存在するということです。これにより、Fastly IO は、リクエストされた幅に比例して画像をスケールすることができます。この場合は、300ピクセルです。また、より高い DPR 画像の品質を少し改善します。これらの画像は非常に小さく、品質を少し高めてもファイルサイズはあまり増加しません。

さて、Markdown で画像を参照する場合、Jekyll は構築時に画像に対してインクルードファイルの HTML を使用します。結果として、出力は、下記に示すように、Markdown で参照した画像（下記のヒーロー画像）が期待通りに表示されていることを示しています。

変更をコミットして本番環境にデプロイし、キャッシュをパージします。

ウォーターマークを追加する

Web サイトの画像に関しては、著作権侵害の問題が常に付きまといます。そのため、一部の Web サイトでは、写真にウォーターマークを追加して保護しています。Fastly IO は、まさにこの理由のために、overlay ヘッダーを提供しています。これがどのように機能するかを示すために、overlayヘッダーを使用してヒーロー画像にウォーターマークを追加し、それらの画像が私たちのものであることが分かるようにします。

オーバーレイはヘッダーであり、パラメーターではありませんので、Taco Labs でこれを実装する方法を考慮する必要があります。すべての画像でウォーターマークを有効にしたい場合、Web サイトのすべての画像にヘッダーを追加することができます。しかしここでは、特定の画像が特定のページに表示される場合にのみ、ウォーターマークが表示されるようにしてみます。具体的には、インデックスページでサムネイル画像として使用される場合を除き、ヒーロー画像にウォーターマークが表示されるようにします。

Taco Labs でウォーターマークを実装するには、以下の VCL スニペットを使用します。

1if (querystring.get(req.url, "overlay") == "yes") {
2  set req.http.X-fastly-imageopto-overlay = "overlay=/assets/fastly.png&overlay-height=0.10&overlay-align=bottom,left&overlay-pad=25,25";
3}

このコードは、特定の画像にウォーターマークを追加するために使用するカスタムオーバーレイパラメーターを効果的に作成します。Fastly は、オーバーレイクエリ文字列が追加されていることを確認すると、画像の左下隅に Fastly ロゴを配置します。

これで、次のようにdefault.htmlでコードを更新することができます：

1<img srcset="https://io.tacolabs.com/assets/{{ page.image }}?width=1296&height=864&fit=crop&overlay=yes&dpr=1.5 1.5x,
2             https://io.tacolabs.com/assets/{{ page.image }}?width=1296&height=864&fit=crop&overlay=yes&quality=30&dpr=2 2x,
3             https://io.tacolabs.com/assets/{{ page.image }}?width=1296&height=864&fit=crop&overlay=yes&quality=10&dpr=3 3x"
4             src="https://io.tacolabs.com/assets/{{ page.image }}?width=1296&height=864&fit=crop&overlay=yes"
5             alt="{{ page.title }}" class="img-fluid"
6/>

レンダーされた出力は、以下のようになります：

このアプローチが素晴らしいのは、ウォーターマークが適用されるタイミングと場所を正確にコントロールできることです。もう誰もヒーロー画像を盗むことはできません。

これで Taco Labs コードベースへの変更が終わりました。最後にコミットしてキャッシュをパージし、すべてを本番環境に反映させます。