画像の最適化と静的生成サイトのパフォーマンス向上
静的に生成されたサイトは、静的データとテンプレートを使用して生成されるHTMLサイトのことを指し、非常に高速なページ読み込み速度など、さまざまな利点を提供します。特に、高トラフィックのランディングページを構築する場合、ベストプラクティスで構築された静的ウェブサイトは、ユーザーにとってページが速く感じられるため、コンバージョンが増加し、検索エンジンのランキングも向上します。Jekyll (opens in a new tab)、Hugo (opens in a new tab)、Gatsby (opens in a new tab)などの静的サイトジェネレータは、静的サイトの速度を組み合わせたものであり、多くの企業が求めるスケーラビリティと柔軟性を提供します。
しかし、速度はしばしばビジュアルエクスペリエンスのコストがかかります。バックエンドコードを書くことができない場合、異なるサイズの画面で良好に見えるページを作成するのは難しいです。静的ウェブサイト上の画像は、一般的に最大の障害となります。異なるユーザーに適切なサイズの画像を提供することは、高速でビジュアルに訴求力のある静的ウェブサイトの鍵ですが、フロントエンドの技術だけを使用してこれを行うことは非常に難しいです。
この記事では、静的サイト上で画像を提供する際の技術的な課題と、imgixを使用してユーザーに適切な品質とフォーマットの画像を提供する方法について説明します。
静的サイトの高速読み込みの理由
静的サイトが動的サイトよりも速いのは、主に次の2つの理由があります。
- 各ページを迅速に生成する能力。 静的サイトは、同じ事前に生成されたページを誰にでも提供することでこれを実現します。JavaScriptコードがすべて取り扱われた状態で、結果としてシンプルで即座に使用可能なHTMLウェブサイトが得られます。これに対して、動的なウェブサイトは、各ページの生成に必要なレイテンシを追加します。
- 高速なホスティング。 静的サイトは、一般的にNetlifyやAmazon S3のようなクラウドストレージサービスに展開され、そのようなクラウドサービスは世界中のどこからでもファイルに高速にアクセスできます。一部の開発者は、エンドユーザーにより近いサーバーにウェブサイトのコピーを配置するコンテンツデリバリーネットワーク（CDN）を使用することも選択します。CDNは、読み込み時間をさらに短縮します。対照的に、動的なウェブサイトのコピーを世界中の100以上のサーバーに配置することは、より難しく、より高価です。
しかし、静的ウェブサイトの典型的なページには、迅速な提供が必要な画像、JavaScript、およびCSSなどのアセットが満載されています。静的サイトは動的アセットを処理したり、レスポンシブデザインを収容するために構築されておらず、これらのコンポーネントを含めるとページのパフォーマンスが低下します。
注：画像がウェブサイトの読み込み速度を低下させているかどうかを確認し、ベースラインを確立したい場合は、ページ重量ツール (opens in a new tab)をチェックすることをお勧めします。
一つのサイズがすべてに適合しない
一つのサイズがすべてのデバイスに適合するわけではありません。単一のサイズの画像がもたらすボトルネックを回避しつつ、レスポンシブ画像を提供するにはどうすればよいでしょうか？
異なるブラウザに対して適切な画像を提供するためには、すべての画像サイズを生成するサーバーサイドスクリプトを作成する必要があります。ただし、サイト全体が静的であり、バックエンドがない場合、画像のサイズ変更のために専用のバックエンドを構築してホストすることは望ましくありません。このようなバックエンドの実装は技術的に複雑であり、事前に生成された画像をクラウドに保存することは非常に高価です。
imgixが静的サイトで画像を迅速に提供する方法
私たちはimgixプラットフォームを開発し、画像を即座に適切なサイズとフォーマットで提供します。imgixは、サーバーサイドスクリプトを待たずに、信じられないほど高速な画像を提供します。imgixのオンザフライ生成は、すべての画像サイズを事前に生成するよりもコストを削減します。
imgixを使用すると、静的サイトをさらに強化できます。
- imgixは画像にインテリジェントな圧縮を適用し、各ウェブサイト訪問者が使用するブラウザに応じて最速の画像ダウンロード速度を実現します。
- デフォルトでは、imgixは最小の画像のサイズさえも簡素化し、不要なメタデータを削除してサイズを削減します（ただし、この動作を上書きすることもできます）。
より高性能なサイトの下流の利点は多岐にわたりますが、おそらく最も重要なのは、より高いコンバージョン率を達成し、より良いユーザーエクスペリエンスを提供することです。imgixは、お客様がお使いのツールやプラットフォームと連携するように設計されています。その結果、ウェブサイトの構築方法を変更することなく、レスポンシブ画像の提供を簡単に最適化できます。
静的サイトにimgix画像を含める3つの方法
imgixでは、静的サイトに画像を含めるためのいくつかの方法が提供されています。ここでは、通常のHTMLを使用する方法、react-imgix (opens in a new tab)ライブラリを使用する方法、Jekyllライブラリを使用する方法について説明します。
HTMLを使用する
まず、imgixを使用せずにHTMLでimgタグを使用する方法を見てみましょう。 srcset属性が、各クライアントに適切な画像を提供する秘訣です。 srcset属性をimgタグ内に配置するのは簡単です。
<img
srcset="pineneedles.jpg 1x, pineneedles-2.jpg 2x, pineneedles-3.jpg 3x"
src="pineneedles.jpg"
/>これにより、ユーザーに適切なサイズが提供されますが、サービスはすべてのアセットの各バージョンを生成して保存する必要があります。大量のアセットやユーザー生成コンテンツがある場合、このアプローチは持続可能ではありません。imgixを使用すると、すべての画像を事前にリサイズする必要なしに、srcsetを統合する簡単な方法が提供されます。
imgixを使用すると、全体のライブラリにwとdpr URLパラメータを使用して、画像のsrcset属性を生成できます。これを確認するには、https://assets.imgix.net/unsplash/pineneedles.jpg (opens in a new tab)にある画像を使用します。
私たちのページデザインでは、最適なユーザーエクスペリエンスのために画像を幅200ピクセルにする必要があるとします。以下は、imgixのURLパラメータを使用してこの幅を指定する方法です:
<img srcset="https://assets.imgix.net/unsplash/pineneedles.jpg?w=200&dpr=1 1x,
https://assets.imgix.net/unsplash/pineneedles.jpg?w=200&dpr=2 2x,
https://assets.imgix.net/unsplash/pineneedles.jpg?w=200&dpr=3 3x"
src="https://assets.imgix.net/unsplash/pineneedles.jpg?w=200"
>このコードを使用することで、device-pixel-ratio（DPR）をパラメータとして使用することで、どんなデバイスにも最適な解像度を提供できます。それほど簡単です！
Reactライブラリの使用
さまざまな画面サイズのためにsrcset属性を管理することは難しい場合があります。しかし、Reactやその他のサポートされている言語を使用している場合は幸運です。imgixは、画像のsrcset属性を自動的に設定するimgixライブラリを作成しました。各ライブラリは、顧客が画像をダウンロードするのにかかる時間を最小限に抑えつつ、画像サイズと品質を最大化する方法でsrcsetの値を構築します。
Reactライブラリには多くの柔軟性があり、<img>や<picture>などの他の要素を利用できるため、クリエイティブな方向性を提供します。これらのHTML要素をimgixと共に使用することで、単に高解像度の画像を提供するだけでなく、アスペクト比やサイズなどのデザイン機能を制御できます。
シンプルな子コンポーネントで画像と見出しをレンダリングする方法を見てみましょう:
export const Pineneedles = () => (
<div className="pineneedles">
<Imgix
sizes="calc(10% - 10px)"
src="https://assets.imgix.net/unsplash/pineneedles.jpg"
/>
<h2>These are pine needles</h2>
</div>
)これは次のHTMLと同等です（簡潔にするために圧縮されています）：
<img
sizes="calc(10% - 10px)"
srcset="https://assets.imgix.net/unsplash/pineneedles.jpg?auto=format&ixlib=react-9.0.2&w=100 100w,
https://assets.imgix.net/unsplash/pineneedles.jpg?auto=format&ixlib=react-9.0.2&w=116 116w,
https://assets.imgix.net/unsplash/pineneedles.jpg?auto=format&ixlib=react-9.0.2&w=134 134w,
...
https://assets.imgix.net/unsplash/pineneedles.jpg?auto=format&ixlib=react-9.0.2&w=7400 7400w,
https://assets.imgix.net/unsplash/pineneedles.jpg?auto=format&ixlib=react-9.0.2&w=8192 8192w"
src="https://assets.imgix.net/unsplash/pineneedles.jpg?auto=format&ixlib=react-9.0.2"
/>このコードは、react-imgixライブラリから<Imgix/>要素を使用して画像をレンダリングします。この要素はsrcsetとsizesを使用し、ユーザーが指定した寸法を使用して画像を適切に即座にレンダリングできるようにします。
Reactライブラリに関しては、上記の使用例は氷山の一角に過ぎません。画像をマッピングするか、背景モードを使用してDOM内の背景コンテナの自然な寸法に最適化された画像をレンダリングするなど、より複雑な目標も達成できます。
Jekyllプラグインの使用
Jekyllは人気のある静的サイトジェネレータで、独自のimgixフレームワークを持っています。単一のJekyllフィルターであるimgix_urlは、ライブラリの機能を処理します。変数に画像パスを渡すだけです。ベースURLとしてhttps://assets.imgix.netを使用します。
これで、imgタグで望ましい画像とオプションのパラメータを指定します：
<img srcset="{{ '/unsplash/pineneedles.jpg' | imgix_url: w: 800, h: 600 }} 1x,
{{ '/unsplash/pineneedles.jpg' | imgix_url: w: 800, h: 600, dpr: 2 }} 2x, {{
'/unsplash/pineneedles.jpg' | imgix_url: w: 800, h: 600, dpr: 3 }} 3x" src={{
"/unsplash/pineneedles.jpg" | imgix_url: w: 800, h: 600 }} sizes="100vw" >このSandbox (opens in a new tab)を参照して、先ほどの松の針の画像を使用したimgタグの例をご覧ください。
これは以下のHTMLに相当します：
<img
srcset="
https://assets.imgix.net/unsplash/pineneedles.jpg?w=800&h=600 1x,
https://assets.imgix.net/unsplash/pineneedles.jpg?w=800&h=600&dpr=2 2x,
https://assets.imgix.net/unsplash/pineneedles.jpg?w=800&h=600&dpr=3 3x
"
src="https://assets.imgix.net/unsplash/pineneedles.jpg?w=800&h=600"
sizes="100vw"
/>それほど難しいことではありません！
結論
この記事では、静的サイトの利点とそれらを使用する際に発生する一般的な問題について説明しました。imgixを使用することで、ウェブサイトの速度を最大限に高め、すべての画像を正確なサイズで提供することで最適なユーザーエクスペリエンスを提供する方法を説明しました。また、静的ウェブサイトでimgixを使用するための3つの方法についても説明しました。
始めてみたいですか？ imgixのセットアップ方法をチェックしてください。