CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSとpicture要素でWebP画像をフォールバック表示する方法

WebP形式とは？導入のメリット

Webサイトで大量の画像を表示する場合には、圧縮効率に優れたWebP形式の採用をおすすめします。WebPはJPEGやPNGと比較して、同等の画質でありながらファイルサイズを大幅に小さくできるため、ページの読み込み速度向上やサーバー負荷の軽減、通信量の削減につながります。

しかし、古いブラウザの中にはWebPに対応していないものも存在します。そこで活躍するのが、HTML5の<picture>要素です。この要素を利用すれば、WebP非対応のブラウザに対して自動的にJPEGやPNGなどの代替画像（フォールバック）を表示できます。

<picture>要素によるフォールバックの基本構文

<picture>要素を使うと、ブラウザの対応状況に応じて最適な画像を出し分けられます。基本的な書き方は以下のとおりです。

<picture>
   <source srcset="filename.webp" type="image/webp">
   <source srcset="filename.jpg" type="image/jpeg">
   <img src="filename.jpg">
</picture>

ブラウザは<source>要素を上から順に評価し、自身がサポートしている画像形式が見つかればそれを読み込みます。どの<source>も利用できない場合は、最終的に<img>タグで指定された画像が表示される仕組みです。

サンプルコード1：シンプルなフォールバック

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 2%;
}
</style>
</head>
<body>
<picture>
   <source srcset="sky.webp">
   <img src="sky.jpg" />
</picture>
</body>
</html>

この例では、ブラウザがWebPに対応していれば「sky.webp」が表示され、非対応の場合は自動的に「sky.jpg」へ切り替わります。

出力結果

上記のコードを実行すると、以下のように空の画像が表示されます。

CSSとpicture要素でWebP画像をフォールバック表示する方法

サンプルコード2：type属性で対応形式を明示する

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 10px;
}
</style>
</head>
<body>
<picture>
   <source srcset="tree.webp" type="image/webp" />
   <source srcset="tree.jpg" type="image/jpeg" />
   <img src="tree.jpg" />
</picture>
</body>
</html>

こちらの例では、各<source>要素にtype属性を明示的に指定しています。type属性でMIMEタイプを伝えることで、ブラウザは画像を実際にダウンロードする前に対応形式を判断でき、より確実かつ効率的に出し分けが行えます。

出力結果

上記のコードを実行すると、以下のように木の画像が表示されます。

CSSとpicture要素でWebP画像をフォールバック表示する方法

まとめ

WebPは圧縮性能に優れた次世代画像形式ですが、すべてのブラウザ環境で表示できるわけではありません。<picture>要素と組み合わせてフォールバックを用意しておけば、最新ブラウザには高効率なWebPを配信しつつ、非対応ブラウザにもJPEGやPNGを確実に表示できます。サイト全体の表示速度やパフォーマンスを改善したい方は、ぜひこのテクニックを活用してみてください。

  1. CSSのobject-fitとobject-positionを使って画像を切り抜く方法

    CSSのobject-fitプロパティとobject-positionプロパティを組み合わせることで、要素内に表示する画像を切り抜いたり、表示位置を細かく調整したりできます。レスポンシブデザインにおいて、画像のアスペクト比を保ちながらレイアウトに収めたい場合に非常に便利な機能です。 基本構文 CSSのobject-fitプロパティおよびobject-positionプロパティの構文は以下の通りです。 Selector { object-fit: /*値*/; object-position: /*値*/; } object-fitの主な値 cover: アスペクト比を維持した

  2. RailsでTailwind CSSを使う方法｜導入から実践的なスタイリングまで徹底解説

    CSSは魔法のような存在ですが、同時に時間のかかる作業でもあります。美しく、機能的で、アクセシブルなサイトは使っていて心地よいものですが、自分でCSSを一から書くのは骨の折れる仕事です。近年はBootstrapをはじめとする多くのCSSフレームワークが登場し、その中でもTailwind CSSは特に注目を集めています。 RailsにはTailwindが標準搭載されていませんが、この記事では新しいRuby on RailsプロジェクトにTailwind CSSを追加する方法を解説します。これにより、デザイン実装にかかる時間を大幅に節約できるでしょう。さらに、Tailwindのユーティリティクラス