Webの画像形式は、写真のような画質重視ならJPEG XL、図形がはっきりしたイラストならAVIF、ビルドが多い運用ならWebPを選ぶ

テキストの背景に敷くファーストビューの写真など画質が大事なものはJPEG XL、従来PNGで出していたイラストはAVIFが向く。AVIFは変換が重いので、頻繁にビルドするならWebPも選択肢。

どんな問題を解決するか / いつ使うか

画像の書き出し形式を何となく決めていて、表示が重い・画質が粗い。AIが作ったサイトが「表示が重い」と言われる原因にもなりやすい。

選び方

画像の種類	向いている形式	理由
ファーストビューの背景写真など、画質が大事な写真	JPEG XL	画質を保ったまま軽くしやすい
図形がはっきりしたイラスト（従来PNGで出していたもの）	AVIF	輪郭や平らな色をきれいに小さくできる
頻繁にビルドする運用	WebP	AVIFは変換（ビルド）がとても重い

書き方（対応していないブラウザへの保険）

html

<picture>
  <source srcset="hero.jxl"  type="image/jxl">
  <source srcset="hero.avif" type="image/avif">
  <img src="hero.webp" alt="…" width="1600" height="900">
</picture>

注意点

JPEG XLはブラウザの対応状況にまだ差がある。<picture> で別形式を必ず用意する。
ロゴやアイコンなど単純な図形はSVGが最適。
width / height を書いて、読み込み時のレイアウトのズレを防ぐ。
<picture> の例は一般的な書き方で補ったもの。

出典

投稿者: @tak_dcxi
投稿: @tak_dcxi · 2026-10-15
収集日: 2026-10-16（JST、10/15・10/16分の巡回をまとめて実施）