Webpのブラウザ対応状況

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

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

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

pictureタグを使って、

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

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

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

HTML
<picture>
   <source srcset="./images/example.webp" type="image/webp">
   <img src="./images/example.jpg">
</picture>

記述量が増えてめんどくさい

imgタグだけなら1行で済むのに4行も書かないとなんてめんどくさいという方はスニペットを登録して効率化しましょう。
※Visual Studio Code解説しかありません🙇‍♂️

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

Webサイトをコーディングするとき、何度も同じ記述を1から手書きしていて嫌になっていませんか？VSCodeでは、キーを設定してコードを登録することで、少ない記述で使い回しができるスニペットという機能があります。プログラミングをしていて「何度も書いてるなぁ」というコードは、スニペット登録して効率化していきましょう。

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

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>

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

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

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

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

画像形式をWebPに変換するツール6選

従来の画像形式よりもファイルサイズが小さく、画質低下も最小限のWebP。画像のファイルサイズはWebサイトの表示スピードに関わる部分なのでWebPを導入する方が良いことがわかります。この記事では、画像形式をWebPに変換できるツールをいくつか紹介したいと思います。