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制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【jQuery】順番に要素が出てくるアニメーション

【jQuery】順番に要素が出てくるアニメーション

CSSだけでぷよぷよしたアニメーションの実装方法

CSSだけでぷよぷよしたアニメーションの実装方法

【雪を降らせる】particles.jsを使って簡単にアニメーション

【雪を降らせる】particles.jsを使って簡単にアニメーション

Local by Flywheelで本番環境のWordPressをローカルに複製する

Local by Flywheelで本番環境のWordPressをローカルに複製する

Amazonみたいな商品の拡大プレビュー機能を実装

Amazonみたいな商品の拡大プレビュー機能を実装

jQueryでスクロール中か否かを判定する方法

jQueryでスクロール中か否かを判定する方法