まず最初に自問すべきことは、目的とする効果を実現するために画像が本当に必要かどうかです。ページ上の HTML、CSS、JavaScript などのアセットと比較して多くのバイト数を必要とする画像リソースを削除できる場合は、常に最適化戦略として推奨されます。ただし、適切に配置された画像は、千の言葉よりも多くの情報を伝えることもできます。そのバランスを見つけるのは、あなた次第です。
次に、より効率的な方法でより良い結果をもたらす代替技術があるかどうかを検討する必要があります。
- CSS エフェクト（シャドウやグラデーションなど）と CSS アニメーションを使用すると、解像度とズームレベルに関係なく常にシャープに見える解像度非依存のアセットを作成できます。この場合、画像ファイルに必要なバイト数よりもはるかに少ないバイト数で済むことが多いです。
- ウェブフォントを使用すると、テキストの選択、検索、サイズ変更機能を維持しながら美しいタイポグラフィを使用できるため、ユーザビリティが大幅に向上します。
画像アセットにテキストをエンコードしている場合は、いったん停止して再検討してください。優れたタイポグラフィは、優れたデザイン、ブランディング、読みやすさにとって重要ですが、画像内のテキストはユーザー エクスペリエンスを損ないます。テキストを選択、検索、ズーム、アクセスできず、高 DPI デバイスには適していません。ウェブフォントを使用するには、独自の最適化が必要ですが、これらの懸念事項をすべて解決し、テキストの表示には常に適しています。
適切な画像形式を選択する
画像が適切なオプションであると確信できる場合は、ジョブに適した種類の画像を慎重に選択する必要があります。
- ベクター グラフィックでは、線、点、ポリゴンを使用して画像を表します。
- ラスター グラフィックは、長方形のグリッド内に各ピクセルの個々の値をエンコードすることで画像を表します。
各形式にはそれぞれ独自の長所と短所があります。ベクター形式は、ロゴ、テキスト、アイコンなど、複雑でない幾何学的図形で構成される画像に最適です。すべての解像度とズーム設定でシャープな結果が得られるため、高解像度の画面や、さまざまなサイズで表示する必要があるアセットに最適な形式です。
ただし、シーンが複雑な場合（写真など）は、ベクター形式では不十分です。すべてのシェイプを記述する SVG マークアップの量が非常に大きくなり、出力が「フォトリアル」に見えない可能性があります。その場合は、PNG、JPEG、WebP、AVIF などのラスター画像形式を使用する必要があります。
ラスター画像には、解像度やズームに依存しないという優れた特性がありません。ラスター画像を拡大すると、ギザギザでぼやけたグラフィックが表示されます。そのため、ユーザーに最適なエクスペリエンスを提供するには、さまざまな解像度でラスター画像の複数のバージョンを保存する必要があります。
高解像度画面の影響
ピクセルには、CSS ピクセルとデバイス ピクセルの 2 種類があります。1 つの CSS ピクセルは、1 つのデバイス ピクセルに直接対応する場合もあれば、複数のデバイス ピクセルに裏打ちされている場合もあります。どういうことだ？デバイスのピクセル数が多いほど、画面に表示されるコンテンツの細かさが増します。
高 DPI（HiDPI）画面は美しい結果をもたらしますが、デバイスのピクセル数が大きいことを活用するには、画像アセットに詳細が必要になるという明らかなトレードオフがあります。幸い、ベクター画像は任意の解像度でレンダリングでき、シャープな結果が得られるため、このタスクに最適です。細かいディテールをレンダリングするために処理コストが増加する可能性がありますが、基盤となるアセットは同じで、解像度に依存しません。
一方、ラスター画像はピクセル単位で画像データをエンコードするため、はるかに大きな課題となります。したがって、ピクセル数が多いほど、ラスター画像のファイルサイズが大きくなります。100 x 100（CSS）ピクセルで表示される写真アセットの違いについて考えてみましょう。
| 画面の解像度 | 合計ピクセル数 | 非圧縮ファイルサイズ（ピクセルあたり 4 バイト） |
|---|---|---|
| 1x | 100 x 100 = 10,000 | 40,000 バイト |
| 2 倍 | 100 x 100 x 4 = 40,000 | 160,000 バイト |
| 3 倍 | 100 x 100 x 9 = 90,000 | 360,000 バイト |
物理画面の解像度を 2 倍にすると、ピクセル数の合計は 4 倍になります。これは、水平方向のピクセル数が 2 倍になり、垂直方向のピクセル数が 2 倍になるためです。そのため、「2x」の画面では、必要なピクセル数が 2 倍ではなく 4 倍になります。
では、実際にはどのような意味があるのでしょうか。高解像度の画面では美しい画像を表示できるため、優れた商品機能になります。ただし、高解像度の画面には高解像度の画像も必要です。そのため、次のようにします。
- ベクター画像は解像度に依存せず、常にシャープな結果が得られるため、可能な限りベクター画像を優先してください。
- ラスター画像が必要な場合は、レスポンシブ画像を配信します。
さまざまなラスター画像形式の特徴
画像形式によって、非可逆圧縮アルゴリズムと可逆圧縮アルゴリズムが異なるだけでなく、アニメーションや透明度（アルファ）チャネルなどの機能も異なります。したがって、特定の画像に「適切な形式」を選択するには、適切な視覚効果と機能要件を組み合わせる必要があります。
ラスター画像形式には、PNG と JPEG の 2 種類があります。これらの形式に加えて、最新のブラウザは新しい WebP 形式と AVIF 形式の画像もサポートしています。どちらの新しい形式も、全体的な圧縮率が向上し、機能も充実しています。では、どのフォーマットを使用すればよいですか？
WebP と AVIF は、通常、古い形式よりも圧縮率が高く、可能な場合は使用する必要があります。WebP または AVIF 画像と、JPEG または PNG 画像を代替として使用できます。詳しくは、WebP 画像を使用するをご覧ください。
古い画像形式については、次の点にご注意ください。
- アニメーションは必要ですか？
<video>要素を使用します。- GIF はどうですか？GIF では色パレットが最大 256 色に制限され、
<video>要素よりもファイルサイズが大幅に大きくなります。APNG は GIF よりも多くの色をサポートしていますが、視覚的な品質が同等程度の動画形式よりも大幅にサイズが大きくなります。アニメーション GIF を動画に置き換えるをご覧ください。
- GIF はどうですか？GIF では色パレットが最大 256 色に制限され、
- 最高解像度で細部を保持する必要がありますか？PNG または可逆圧縮の WebP を使用してください。
- PNG では、カラーパレットのサイズを選択する以外に、非可逆圧縮アルゴリズムは適用されません。その結果、最高品質の画像が生成されますが、他の形式よりもファイルサイズが大幅に大きくなります。慎重に使用してください。
- WebP には、PNG よりも効率的な非可逆圧縮モードがあります。
- 画像アセットに幾何学的な図形で構成された画像が含まれている場合は、ベクター（SVG）形式に変換することを検討してください。
- 画像アセットにテキストが含まれている場合は、使用を中止して再検討してください。画像内のテキストは選択、検索、ズームできません。ブランドなどの理由でカスタム ルックを表現する必要がある場合は、代わりにウェブフォントを使用します。
- 写真、スクリーンショット、または類似の画像アセットを最適化していますか？JPEG、非圧縮 WebP、AVIF を使用します。
- JPEG では、非可逆圧縮と可逆圧縮を組み合わせて、画像アセットのファイルサイズを削減します。いくつかの JPEG 品質レベルを試して、アセットに最適な品質とファイルサイズのトレードオフを見つけます。
- 非可逆圧縮の WebP や非可逆圧縮の AVIF は、ウェブ品質の画像に代わる優れた JPEG です。ただし、非可逆圧縮モードでは、画像サイズを小さくするために一部の情報が破棄されます。そのため、一部の色が同等の JPEG と異なる場合があります。
最後に、WebView を使用してプラットフォーム固有のアプリケーションでコンテンツをレンダリングする場合は、クライアントを完全に制御でき、WebP のみを使用できます。Facebook をはじめ、多くの企業が WebP を使用して、アプリ内のすべての画像を配信しています。節約効果は確実に得られます。
Largest Contentful Paint（LCP）への影響
画像は LCP の候補になる場合があります。つまり、画像のサイズは読み込み時間に影響します。画像が LCP の候補である場合、LCP を改善するには、その画像を効率的にエンコードすることが重要です。
すべてのユーザーにとってページの知覚的パフォーマンスを可能な限り高速にするために、このガイドに記載されているアドバイスを適用するよう努めてください。LCP は知覚パフォーマンスの一部です。ページ上で最大の（つまり最も認識しやすい）要素がどのくらいの速さで表示されるかを示します。