[web]webP導入と非対応への対策と。

脱IEできてもついて回る環境別対策。

webPとは

めっちゃ軽い画像。以上。

めっちゃ便利なのに旧macOSのsafariに対応してない上、非対応版の普及率がやばい。そんな拡張子。

対応状況について先日の記事で触れてたりする。

<picture>の範囲内なので、特別難しいことをする必要はない。

<picture>
  <source type="image/webp" srcset="aaaaaa.png.webp">
  <img src="aaaaaa.png">
</picture>

一部の非対応のためにフォローしなきゃいけない。一部っていうのはめちゃくちゃいっぱいあるOSやらブラウザのバリエーションで見た場合の話で、シェア的に見たらめっちゃ強い勢力なので無視できない。なので、上記のように非対応用の処置を併記しなきゃいけない。そこまでする必要はあるのか？

まず、書き出す画像が倍になる。コーディングの手間も増える。

画像が軽くなればページの読み込み速度が上がり、ユーザーのストレスは緩和されるしサーチコンソールとかの評価も上がる。メリットはあるんだけど運営に負荷がかかりまくるなら止めといたほうが良いように思う。このへんのこだわりは制作陣以外にわからない。ということで、却下と言うよりは是々非々で選択する感じに。

たとえば、基本的にwebpは使わないけどファーストビューとかで高画質な透過画像を重ねてめっちゃ凝ったものを使いたいときに、pngだとめっちゃ重くなるからここはwebPを入れてみようか、みたいな。

手間が増えるだけじゃなく地味にサーバーを圧迫するもんで、makeshopとかで組んだら簡単にサーバーを使い切ってしまう。超だるい。やっぱり最低限になるように選別するのが良いように思う。

ちなみにappleはいろんなサイズのpngを用意して環境に最適化してる感じ。

ぶっちゃけめっちゃ重いんでwebP使えばいいのにって感じではある。非対応の大元だからwebP入れないんだなぁって感じ。