Home
HTML
pictureタグで画像を出し分けてWebP非対応ブラウザ対策をする方法

pictureタグで画像を出し分けてWebP非対応ブラウザ対策をする方法

pictureタグで画像を出し分けてWebP非対応ブラウザ対策をする方法

どうも!かけちまるです!

昨今、ほとんどのブラウザがサポートされたWebP。
しかし、WebPがサポートされていないIEや古いバージョンを使用しているユーザーもいるでしょう。
そんなユーザーにも画像を表示させるためにpictureタグを使用して、WebPがサポートされていない場合はjpgpngなどを、サポートされている場合はWebPを表示させるように対応しましょう。

この記事では、

  • ・WebPのブラウザ対応状況
  • ・pictureタグを使った出し分けの方法
  • ・ブレイクポイントで画像を切り替える方法
  • ・画像をWebPに変換する方法

がわかります。

Webpのブラウザ対応状況

WebPのブラウザ対応状況は次のような感じです。

現在(2022年11月19日)サポートされていないブラウザはIEくらいです。
しかも、IEは世界的かつ日本的にもあまり使われていないのでWebP一本で良い気がします。
しかし、古いバージョンのブラウザを使っているユーザーもいると思うので、一応WebPがサポートされていない場合の対応も必要かなと思います。

pictureタグを使った出し分けの方法

pictureタグを使って、

  • WebPがサポートされていない場合はjpgpngを表示
  • サポートされている場合はWebPを表示する

という方法を解説します。

次のように記述するだけです。

HTML
開く&閉じるコピー
<picture> <source srcset="./images/example.webp" type="image/webp"> <img src="./images/example.jpg"> </picture>
ポイント
  • sourceタグにtype属性を設定すること
  • pictureタグ内の上から表示できるかチェックしていくのでWebPを先に記述すること

ブレイクポイントで画像を切り替える方法

pictureタグはPCとスマホの出し分けも可能です。

次のように記述します。

HTML
開く&閉じるコピー
<picture> <source srcset="./images/example_sp.webp" media="(max-width:500px)" type="image/webp"> <source srcset="./images/example_sp.jpg" media="(max-width:500px)"> <source srcset="./images/example.webp" type="image/webp"> <img src="./images/example.jpg"> </picture>
ポイント
  • sourceタグにmedia属性を設定すること

【告知】画像をWebPに変換する方法

jpgpngなどをWebPに変換するツールの紹介です。

この度、WebP変換ツールをリリースしました。

主な機能
  • ・Web上で完結(アプリインストール不要)
  • ・最大25ファイルの画像を一括変換
  • ・ファイルサイズがどれだけ軽量化されたか確認できる
  • ・変換前後の画像の劣化を確認できる
  • ※随時、機能追加予定です。
ToImgリリース

とはいえ、他にも変換ツールはあるので、便利だと思ったら使ってください🙇‍♂️

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

Contact Form7の入力エラー表示をCSSのみでカスタマイズ

Contact Form7の入力エラー表示をCSSのみでカスタマイズ

【WordPress】PHPテンプレートでショートコードを使う方法

【WordPress】PHPテンプレートでショートコードを使う方法

【コーディング効率化】VSCodeにコードスニペットを登録しよう

【コーディング効率化】VSCodeにコードスニペットを登録しよう

clamp関数がSafariで効かない時の対処法

clamp関数がSafariで効かない時の対処法

WP REST APIを使用してWordPress記事を外部サイトで表示する方法

WP REST APIを使用してWordPress記事を外部サイトで表示する方法

【videoタグ】HTMLでWebサイトに動画を埋め込む

【videoタグ】HTMLでWebサイトに動画を埋め込む