美しい写真、洗練されたグラフィック、細部まで作り込まれたイラスト――Webデザインにおいてビジュアルはユーザーの感情を動かす強力な武器です。しかし、どれだけ素晴らしいビジュアルであっても、ページの読み込み速度を低下させてしまっては本末転倒です。Googleの調査によると、ページの表示速度が1秒から3秒に落ちるだけで、ユーザーの離脱率は32%も上昇するとされています。本記事では、デザインの美しさを1ピクセルも損なうことなく、サイトのファイル容量を極限まで軽量化するモダンな画像最適化テクニックを徹底解説します。
1. なぜ今、従来の「JPEG」や「PNG」では不十分なのか？
長年、Webの画像といえば写真ならJPEG、背景透過やイラストならPNGを選ぶのが定石でした。しかし、これらのフォーマットは数十年前の技術をベースにしており、現代の高解像度ディスプレイ（Retinaディスプレイなど）に対応するために高画質なまま書き出すと、ファイル容量が肥大化してしまいます。
そこで現代のWeb制作において必須となっているのが、次世代画像フォーマットである「WebP（ウェッピー）」と「AVIF（エィヴィアイエフ）」です。
- WebP（.webp）：Googleが開発したフォーマットで、JPEGと同等の画質を保ちながらファイルサイズを約25〜34%軽量化できます。また、PNGのように透明度（アルファチャンネル）を保持したまま高圧縮できるため、現在はほぼすべてのWebサイトで標準採用されています。
- AVIF（.avif）：次世代動画コーデック「AV1」をベースにした、さらに新しい超高圧縮フォーマットです。WebPよりもさらに20〜30%ファイルサイズを削減でき、特に赤色やグラデーションなどの「色がなめらかに変化する部分」のブロックノイズが美しく処理されます。主要ブラウザの対応も完全に整ったため、2026年現在の最速サイト構築には欠かせない技術です。
2. プロが実践する画像書き出しと最適化のワークフロー
デザインツール（FigmaやAdobe Photoshopなど）から直接WebPやAVIFで書き出すことも可能ですが、より完璧な最適化を行うためには以下のステップを推奨します。
- 適切な等倍・2倍サイズでの書き出し：高解像度画面でのボケを防ぐため、実際に表示させる画面上のサイズ（横幅800pxなら、書き出しは1600px）の「2倍」の大きさで、まずはマスターデータとして高品質なPNGまたはJPEGで書き出します。
- オンラインコンバーター・最適化ツールの活用：「Squoosh（スクーシュ）」などのツールを使い、画質（Quality）を「75〜80」を目安に調整しながらWebPやAVIFに変換します。人間の目では100%と75%の画質の違いはほぼ判別できませんが、ファイル容量は半分以下に落とすことができます。
3. 古いブラウザを切り捨てないHTML <picture> タグによる実装
すべてのユーザーに最高の体験を提供するためには、最先端のAVIFを表示しつつ、万が一対応していない環境があればWebP、それもダメなら従来のJPEGを表示させるという「プログレッシブ・エンハンスメント（段階的発展）」のコーディングが求められます。これらを実現するのがHTMLの <picture> タグです。
<picture> <!-- ブラウザがAVIFに対応していれば読み込む --> <source srcset="images/hero-visual.avif" type="image/avif"> <!-- AVIF非対応で、WebPに対応していれば読み込む --> <source srcset="images/hero-visual.webp" type="image/webp"> <!-- どちらも非対応の場合のセーフティネット --> <img src="images/hero-visual.jpg" alt="メインビジュアル" width="800" height="600" loading="lazy"> </picture>
この記述により、ブラウザは「自分が解釈できる最も軽くて高画質な画像」を上から順に自動選択してダウンロードします。また、 <img> タグ内に loading="lazy" （遅延読み込み）を指定することで、ユーザーがスクロールしてその画像が画面に近づくまで読み込みを保留させ、ファーストビューの驚異的な表示速度を達成することができます。
