webp非対応のブラウザに画像を表示

WebP は表示が速い画像形式ですが、古いブラウザでは表示できないことがあります。picture タグを使うと、WebP に対応したブラウザには WebP を、対応していないブラウザには PNG や JPG を、自動で出し分けられます。

WebP と PNG の両方を書いて自動で切り替える

<picture>
  <source type="image/webp" srcset="/images/sample.webp">
  <img src="/images/sample.png" alt="サンプルの画像">
</picture>

source に WebP の画像、img に今までの形式（PNG・JPG）の画像を指定します。ブラウザが WebP に対応していれば source の画像が、対応していなければ img の画像が使われるので、ブラウザにあわせて自動的に表示を切り替えてくれます。

WebP は Google が開発した画像形式で、圧縮率が高く、サイトの表示が速くなります。

※ 今は（2026 年 10 月時点）、主要なブラウザ（Chrome・Edge・Firefox・Safari 14 以降）がすべて WebP に対応しています。picture タグは、古いブラウザで見る人への備えとして使うとよいでしょう。alt（画像の説明）は img タグに付けます。