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

Ilya Grigorik

Jeremy Wagner

最初に考えるべきことは、画像が次のようなものであるかどうかです。 目指す効果を達成するために必要なものであることを 確認しました 画像リソースを削除すると、その HTML、CSS、JavaScript、ページ上の他のアセットと比較して かなり多くのバイト数が必要になる場合がよくあります これが最適な最適化戦略です とはいえ、適切な場所に画像を配置することで、1,000 語以上の情報を伝えることもできます。 そのバランスを取るかどうかはお客様次第です。

次に、より良い成果を生み出せる代替技術がないか、 次のような方法があります。

• CSS 効果（シャドウやグラデーションなど）と CSS アニメーション を使用すると、解像度やズームレベルを問わず常に鮮明に表示される、解像度に依存しないアセットを生成できます。 ファイルサイズは多くの場合 画像ファイルで必要とされるバイト数の 1 分の 1 になります
• ウェブフォントで美しい書体を使用できる データの選択、検索、 テキストのサイズ変更が可能になり、ユーザビリティが大幅に向上します。

画像アセットにエンコードされているテキストがあれば、一度立ち止まって再検討してください。 優れたタイポグラフィは、優れたデザイン、ブランディング、読みやすさに不可欠です。 画像内テキストはユーザーの利便性を低下させます。 テキストは選択、検索、ズームできませんが、 アクセスできず、高 DPI デバイスには適していません。 ウェブフォントを使用するには、独自の最適化セットが必要です。 ですが、これらの問題をすべて解決できるため、常にテキスト表示に適した選択肢です。

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

イメージが正しいオプションであると確信できる場合は、ジョブに適切な種類のイメージを慎重に選択する必要があります。

</ph>

• ベクター グラフィック ライン、ポイント、ポリゴンを使って画像を表します。
• ラスター グラフィック 長方形のグリッド内で各ピクセルの個々の値をエンコードして画像を表現します。

それぞれの形式にはそれぞれ利点と欠点があります。 ベクター形式は、ロゴ、テキスト、アイコンなど、それほど複雑でない幾何学的形状で構成される画像に最適です。 どんな解像度やズーム設定でも鮮明な画像が得られます。 そのため、さまざまなサイズで表示する必要がある高解像度の画面やアセットに最適なフォーマットとなっています。

ただし、シーンが複雑な場合（写真など）はベクター形式では不十分です。 あらゆるシェイプを記述するための SVG マークアップの量が膨大な量になる可能性がある 出力が「フォトリアリスティック」に見えない場合もあります。 その場合はラスター画像形式を使用してください ファイル形式を指定します

ラスター画像には、解像度やズームに依存しないといった優れた特性がない - ラスター画像を拡大すると、グラフィックがギザギザでぼやけます。 その結果、ラスター画像をさまざまな解像度で保存することが必要になる場合もあります。 ユーザーに最適なエクスペリエンスを提供できます

高解像度画面の影響

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

</ph> CSS ピクセルとデバイス ピクセルの違い。

高 DPI（HiDPI）画面でも美しい結果が得られますが、明らかに次のトレードオフがあります。 デバイスのピクセル数が多いため、画像アセットにはより詳細な情報が必要です。 幸いなことに、このタスクにはベクター画像が最適です。 高解像度で鮮明な画像でレンダリングできます 細部をレンダリングする処理コストが高くなる可能性があります。 基盤となるアセットは同じであり、解像度に依存しない

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

物理画面の解像度を 2 倍にすると ピクセルの総数は 4 倍になります。 横方向のピクセル数を 2 倍に、縦方向のピクセル数を 2 倍にする。 したがって、「2 倍」の画面が 2 倍になるだけでなく、必要なピクセル数が 4 倍になりました。

これは実際には何を意味するでしょうか。 高解像度の画面では美しい画像を表示できるため、これはプロダクトの大きな特長です。 ただし、高解像度画面には高解像度の画像も必要です。

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

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

さまざまな非可逆圧縮アルゴリズムや可逆圧縮アルゴリズムに加え、 画像形式は、アニメーションや透明度（アルファ）チャンネルなど、さまざまな機能をサポートします。 結果として「適切な形式」の選択が適切な視覚的結果と機能要件の組み合わせです。

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

WebP や AVIF は通常、古い形式よりも圧縮率が優れています。 可能な限り使用してください 代替として、JPEG または PNG 画像と一緒に WebP 画像または AVIF 画像を使用できます。 詳しくは、WebP 画像を使用するをご覧ください。

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

1. アニメーションは必要ですか？<video> 要素を使用します。
   • GIF についてはどうですか？GIF ではカラーパレットが最大 256 色に制限されており、 <video> 要素よりもファイルサイズが大幅に大きくなります。APNG GIF よりも色が豊富であるが、動画よりもはるかに大きい 画質がそれと同等のものである必要があります。詳しくは、 アニメーション GIF を動画に置き換える
2. 最大限の解像度で細部を保持する必要がありますか？PNG またはロスレス WebP を使用します。
   • PNG では、カラーパレット サイズ以外の非可逆圧縮アルゴリズムは適用されません。 その結果、高品質の画像が生成されますが、 他の形式よりファイルサイズが著しく大きくなります使用は慎重に行ってください。
   • WebP には可逆エンコード モードがあり、PNG よりも効率的な場合があります。
   • 画像アセットに幾何学的図形で構成された画像が含まれている場合は、ベクター（SVG）形式に変換することを検討してください。
   • 画像アセットにテキストが含まれている場合は、一度停止して再検討してください。画像内のテキストは選択、検索、ズームできません。 ブランディングなどのためにカスタムのデザインを伝える必要がある場合は、代わりにウェブフォントを使用してください。
3. 写真、スクリーンショット、または類似の画像アセットを最適化していますか？JPEG、非可逆 WebP、AVIF のいずれかを使用します。
   • JPEG では、非可逆最適化と可逆最適化を組み合わせて画像アセットのファイルサイズを縮小します。JPEG の品質レベルをいくつか試して、アセットに最適な画質とファイルサイズのトレードオフを見つけてください。
   • 非可逆 WebP や非可逆 AVIF は、JPEG の代替としてウェブ品質の優れた代替手段となりますが、非可逆モードでは一部の情報が破棄され、画像が小さくなることに注意してください。つまり、一部の色は同等の JPEG とは異なる場合があります。

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

Largest Contentful Paint（LCP）への影響

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

このガイドに記載されているアドバイスを適用することで、すべてのユーザーがページの知覚パフォーマンスを可能な限り速く感じられるようにする必要があります。LCP は知覚パフォーマンスの一部です。ページの最大の（つまり最も知覚可能な）要素がどのくらい速く表示されるかを測定します。