もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

する設計判断**です。ここでは、2022年現在、ブラウザーに対応した画像の種類と、その使い分けについて解説します。

画像フォーマットの種類

ラスター画像（ビットマップ）

ピクセルで構成される一般的な画像です。ベクター画像とは違い、解像度を持ち拡大使用には向いていません。

形式	特徴	向いている用途
JPEG	圧縮率高・非可逆	写真
PNG	高画質・透過可	UIパーツ・ロゴ
WebP	高圧縮＋透過	汎用（現代の主力）
AVIF	超高圧縮	高品質画像

ベクター画像

数式ベースで構成された画像。拡大しても劣化せず、ロゴやアイコンなどの使用に向いています。

形式	特徴	用途
SVG	軽量・拡大OK・CSS操作可能	アイコン・ロゴ

実務での使い分け

実務で最も使用頻度の高い写真系

商品画像、ヒーローイメージやブログ画像に推奨する画像フォーマットは、WebP / AVIFになります。他の画像フォーマット（pngやjpg）に比べて軽く、表示速度が向上する上、画像の劣化も少なく、品質も問題ありません。

UIパーツ・ロゴ

アイコン、ロゴやシンプルな画像にお勧めする画像フォーマットは、SVGです。ラスター画像に比べて、とても軽く解像度に依存せず、劣化しません。またcssで色味の変更もできます。

透過が必要な画像

背景透過や複雑な合成が必要な場合の推奨画像フォーマットは、PNG or WebPです。アルファチャンネルを持てるので、きれいに背景との透過合成ができます。

高品質が最優先

ポートフォリオ、写真サイトなど品質が求まられるサイトでの推奨画像フォーマットは、AVIFです。
ただし、ブラウザ対応には注意が必要で、SafariやEdgeでは表示ができません。iOSで表示できないので、iPhoneやiPadでは使えない画像フォーマットです。

画像フォーマット選びのロジック

画像フォーマットの選択はこの順で決めましょう

写真か/図形か

写真であれば、JPEG / WebP / AVIFの順、図形であれば、SVGを選択しましょう。

透過は必要か

透過が必要な場合は、PNG / WebP、不要であれば、JPEG / WebPを選択しましょう。

パフォーマンスが重視か

表示速度や画像のサイズを追求するのであれば、 WebP / AVIFを選択、それほど重要でない場合は、PNG / JPEGを選択しましょう。

2022年から現在においての画像フォーマットのトレンド

ほぼ全ブラウザ対応に対応した、WebPの標準化が進んで、JPEGフォーマットの代替フォーマットになっています。
また、扱いがやや難しいもののAVIFの台頭も著しく、WebPよりさらに軽く表示速度を求めるサイトでは進んで採用したいフォーマットです。

SVGの重要性増加

CSSで表示する、font-awesomeやicomoonなどのアイコンフォントから移行が進んでいます。コンポーネント化しやすく、軽量なのも魅力です。

画像フォーマットと読み込みの設計ポイント

<picture>による出し分けで最適フォーマットを自動で選択

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="">
</picture>

遅延読み込み（Lazy Load）

<img src="image.jpg" loading="lazy">

srcsetによる解像度切り替え

<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w"
     sizes="(max-width: 600px) 100vw, 50vw">

LCP対策として画像フォーマットの選択は重要です

ファーストビュー画像は最適化が必須です。表示速度が遅い場合、SEOに影響します。品質と重さを勘案しながら、最適化に務めましょう。

だめなパターン

• PNGを多用して、サイト自体が重くなり、表示速度が遅くなるパターン
• ラスター画像が必要な箇所の画像をSVGにしてしまうパターン
• 使用サイズを最適化せずに大きいサイズそのまま使用するパターン

まとめ

画像の使い分けは単なる形式選びではなく、「軽さ × 見た目 × 用途」の最適化問題です。
シンプルに使用フォーマットを覚えるなら

• 写真はWebP
• アイコンはSVG
• 透過画像はWebP or PNG
• 最高品質はAVIF