適切な画像形式を選択する

最初に検討すべき点は、目的とする効果を実現するために画像が本当に必要かどうかということです。優れた設計はシンプルで、常に最高のパフォーマンスを発揮します。 ページ上の HTML、CSS、JavaScript などのアセットと比べて大量のバイトが必要になることが多い画像リソースを削減できる場合は、それが最適な最適化戦略となります。とはいえ、画像を適切な場所に配置すれば、1,000 語以上の情報を伝えることができるため、そのバランスを見極めるのはユーザー次第です。

次に、より効率的な方法で望ましい結果を提供できる代替テクノロジーがあるかどうかを検討します。

  • CSS 効果(シャドウやグラデーションなど)と CSS アニメーションを使用すると、どの解像度やズームレベルでも常に鮮明に表示される、解像度に依存しないアセットを作成できます。多くの場合、画像ファイルが必要とするバイト数分の 1 未満で済みます。
  • ウェブフォントを使用すると、美しい書体を使用できると同時に、テキストの選択、検索、サイズ変更も行えるため、ユーザビリティが大幅に向上します。

画像アセットでテキストをエンコードしているのに気づいた場合は、その操作を中断して再検討します。優れたタイポグラフィは、優れたデザイン、ブランディング、読みやすさにとって重要ですが、画像内のテキストはユーザー エクスペリエンスが低下します。テキストは選択できない、検索できない、ズームできない、アクセスできない、高 DPI デバイスには適していません。ウェブフォントを使用するには独自の最適化セットが必要ですが、ウェブフォントはこれらの懸念事項をすべて解決するため、テキストの表示に適しています。

適切な画像形式を選択する

画像が正しいオプションであると確信できる場合は、作業に適した種類の画像を慎重に選択する必要があります。

拡大されたベクター画像とラスター画像
拡大されたベクター画像(L)のラスター画像(R)

各形式には長所と短所があります。ベクター形式は、ロゴ、テキスト、アイコンなどの単純な幾何学的図形で構成される画像に最適です。 すべての解像度とズーム設定で鮮明な結果が得られるため、高解像度画面や、さまざまなサイズで表示する必要があるアセットに最適です。

ただし、シーンが複雑な場合(写真など)はベクター形式ではうまくいきません。すべての形状を記述するための SVG マークアップの量は極めて多くなり、出力が「写真のようにリアル」に見えない可能性があります。その場合は、PNG、JPEG、WebP、AVIF などのラスター画像形式を使用する必要があります。

ラスター画像には、解像度やズームに依存しないという優れた特性はありません。ラスター画像を拡大すると、グラフィックがギザギザでぼやけて表示されます。その結果、ユーザーに最適なエクスペリエンスを提供するために、さまざまな解像度のラスター画像の複数のバージョンを保存しなければならない場合があります。

高解像度画面の意味

ピクセルには、CSS ピクセルとデバイス ピクセルの 2 種類があります。1 つの CSS ピクセルが 1 つのデバイス ピクセルに直接対応する場合もあれば、複数のデバイス ピクセルに対応する場合もあります。 どういうこと?デバイス ピクセルの数が多いほど、画面に表示されるコンテンツの細部は鮮明になります。

CSS ピクセルとデバイス ピクセルの違いを示す 3 つの画像。
CSS ピクセルとデバイス ピクセルの違い

高 DPI(HiDPI)画面では美しい結果が得られますが、明白なトレードオフが 1 つあります。それは、画像アセットで高いデバイス ピクセル数を利用するために、より詳細な情報を必要とすることです。幸いなことに、ベクター画像は、任意の解像度で鮮明な結果でレンダリングできるため、このタスクに最適です。精細な部分をレンダリングするための処理コストが高くなる場合がありますが、基盤となるアセットは同じで、解像度に依存しません。

一方、ラスター画像の場合は、画像データをピクセルごとにエンコードするため、はるかに大きな課題があります。したがって、ピクセル数が多いほど、ラスター画像のファイルサイズが大きくなります。例として、100x100(CSS)ピクセルで表示される写真アセットの違いを考えてみましょう。

画面の解像度 合計ピクセル数 非圧縮ファイルサイズ(1 ピクセルあたり 4 バイト)
1x 100 × 100 = 10,000 40,000 バイト
2 倍速 100 × 100 × 4 = 40,000 160,000 バイト
3 倍 100 × 100 × 9 = 90,000 360,000 バイト

物理画面の解像度を 2 倍にすると、合計ピクセル数は 4 倍になります。つまり、水平方向のピクセル数を 2 倍に、垂直方向のピクセル数を 2 倍にすることです。 したがって、「2x」の画面は 2 倍だけでなく 4 倍のピクセル数になります。

では、これは実際にどのような意味を持つのでしょうか。高解像度の画面では美しい画像を使用できるため、商品の特長として活用できます。 ただし、高解像度の画面には高解像度の画像も必要になるため、次のようなメリットがあります。

  • 可能な限りベクター画像を使用することをおすすめします。ベクター画像は解像度に依存せず、常に鮮明な結果が得られます。
  • ラスター画像が必要な場合は、レスポンシブ画像を提供します。

さまざまなラスター画像形式の機能

さまざまな非可逆圧縮アルゴリズムと可逆圧縮アルゴリズムに加えて、画像形式が異なればアニメーションや透明度(アルファ)チャンネルなどの機能も異なります。そのため、特定の画像に対する「適切な形式」の選択は、望ましい視覚結果と機能要件の組み合わせとなります。

形式 透明性 アニメーション 参照者
PNG はい × すべて
JPEG × × すべて
WebP はい はい すべての最新ブラウザ。使用できますか?をご覧ください。
AVIF はい はい いいえ。使用できますか?をご覧ください。

広くサポートされているラスター画像形式は、PNG と JPEG の 2 つです。最新のブラウザはこれらの形式に加えて、新しい形式の WebP をサポートしていますが、新しい AVIF 形式は一部のブラウザのみをサポートしています。どちらの新しい形式も、全体的な圧縮性能が向上し、機能も増えています。どの形式を使用すべきでしょうか。

通常、WebP と AVIF は古い形式よりも圧縮率が高いため、可能な場合は使用する必要があります。代替として、WebP または AVIF 画像と JPEG または PNG 画像を使用できます。詳しくは、WebP 画像を使用するをご覧ください。

古い画像形式については、次の点を考慮してください。

  1. アニメーションは必要ですか?<video> 要素を使用します。
    • GIF についてはどうですか?GIF の場合、カラーパレットは最大 256 色に制限され、ファイルサイズは <video> 要素よりも大幅に大きくなります。アニメーション GIF を動画に置き換えるをご覧ください。
  2. 最高の解像度で精細なディテールを維持する必要がありますか?PNG または可逆 WebP を使用します。
    • PNG では、選択したカラーパレットのサイズ以外の非可逆圧縮アルゴリズムは適用されません。その結果、最高品質の画像が生成されますが、その代償は他の形式よりも大幅に大きくなります。よく考えて使用しましょう。
    • WebP には可逆エンコード モードがあり、PNG よりも効率的な場合があります。
    • 画像アセットに幾何学的図形で構成された画像が含まれている場合は、ベクター(SVG)形式に変換することを検討してください。
    • 画像アセットにテキストが含まれている場合は、掲載を中止して再検討します。画像内のテキストは、選択、検索、「ズーム」できません。ブランディングなどの目的でカスタムの外観を使う必要がある場合は、代わりにウェブフォントを使用します。
  3. 写真、スクリーンショット、または類似の画像アセットを最適化していますか?JPEG、非可逆 WebP、非可逆 AVIF を使用してください。
    • JPEG では、非可逆最適化と可逆最適化を組み合わせて画像アセットのファイルサイズを縮小します。JPEG の画質レベルをいくつか試して、アセットに最適な画質とファイルサイズのトレードオフを見つけます。
    • 非可逆 WebP または非可逆 AVIF は JPEG の代替形式として許容されますが、特に WebP の非可逆モードは一部の彩度情報を破棄して画像を小さくします。つまり、選択する色が同等の JPEG とは異なる場合があります。

最後に、プラットフォーム固有のアプリで WebView を使用してコンテンツをレンダリングしている場合は、クライアントを完全に制御できるため、WebP のみを使用できます。Facebook など多くの企業が、WebP を使用してすべての画像をアプリケーション内で配信しています。この節約だけの価値は間違いなくあります。

Largest Contentful Paint(LCP)への影響

画像は LCP 候補の可能性があります。つまり、画像のサイズは読み込み時間に影響します。画像が LCP の候補である場合は、画像を効率的にエンコードすることが LCP の改善に不可欠です。

すべてのユーザーにとって可能な限り早くページの知覚パフォーマンスが向上するように、この記事で示されたアドバイスを適用する必要があります。LCP は、ページ上で最も大きい(したがって最も知覚可能な)要素が表示される速さを測定するため、知覚パフォーマンスの一部です。