WebP対応でサイトをスピード化！

WebPは、Googleが開発した画像フォーマットで、優れた圧縮率と画質を提供します。以下に、あなたの<picture>要素におけるWebP対応について説明します。

<picture>要素の構造

1. <source>タグ:
   • <source>タグは、特定の条件に基づいて異なる画像をブラウザに提供するために使用されます。
   • media属性で条件を設定し、srcset属性で提供する画像を指定します。
   • type属性で画像の形式を指定することができます。

コードの解説

<picture>
    <source media="(max-width: 768px)" srcset="assets/img/sample-sp.webp" width='200' height='200' type="image/webp">
    <source media="(max-width: 768px)" srcset="assets/img/sample-sp.png">
    <source srcset="assets/img/sample.webp" type="image/webp">
    <img src="assets/img/sample.png" alt='' width='300' height='300' loading="lazy">
</picture>

• 1つ目の<source>:
  • 条件: ビューポート幅が768px以下の場合。
  • 画像: assets/img/sample-sp.webp (WebP形式)。
  • 形式: type="image/webp"なので、WebPに対応しているブラウザであればこの画像が優先的に表示されます。
• 2つ目の<source>:
  • 条件: 同じくビューポート幅が768px以下の場合。
  • 画像: assets/img/sample-sp.png (PNG形式)。
  • WebPが未対応のブラウザ向けに指定されています。
• 3つ目の<source>:
  • 条件: 特に指定がないため、すべてのサイズに適用されます。
  • 画像: assets/img/sample.webp (WebP形式)。
  • 対応ブラウザ向けにWebPを提供します。
• <img>タグ:
  • フォールバック: 上記の条件を満たす画像が表示されない場合、最終的に表示されるのはassets/img/sample.png (PNG形式)。
  • loading="lazy": 画像の遅延読み込みを指定しています。これにより、ページのパフォーマンスが向上します。

WebPの利点

• 圧縮率: WebPは、JPEGやPNGよりも高い圧縮率を持ち、同じ画質の画像をより小さなサイズで提供できます。
• 透明度とアニメーション: WebPは、透明度のサポートやアニメーションも可能です。

注意点

• ブラウザの互換性: WebP形式は、すべてのブラウザでサポートされているわけではありません。特に古いブラウザや一部の非主流なブラウザでは未対応の場合があります。そのため、フォールバックとしてPNGやJPEGを用意することが重要です。

このように、<picture>要素を使用してWebP画像を提供することで、ユーザーのブラウザに応じた最適な画像形式を表示でき、ページの読み込み速度やパフォーマンスを向上させることができます。