Webp 導入記、８段階サンプル付き

前から存在は知っていましたが・・・

　Webp 導入しました。結果から言えば大満足です。条件にもよりますが、見た目変更なしでファイルサイズが１／１０以下にできる場合があります。

　大抵のサイトが当てはまると思いますが、ファイル転送所要のほとんどは画像や動画であり、我がサイトのように動画がなければ、ほとんどが画像であり、それを１／１０以下にできるって、スマホから自分のギガを使って見ているユーザーさんには大きいと思います。

　文字データなんて UTF-8 なら１文字３バイトなので、仮に１万字書いても約３０キロバイト、このサイトで３０キロバイトの画像なんてひとつもありませんよ。（１万字書いた記事もないですが）

　スマホから見るユーザーさんのことを考えるならば導入は必須だと思われます。数日前までは、jpg　や png で充分だと思ってたのが恥ずかしいくらいです。
　技術の進歩って恐ろしいです。

　Google が webp （ウェッピーと読む）を開発したのが２０１０年、もう１０年以上前です。ファイルサイズが旧来の jpg や png と比較して２５％程度小さいというのが最大のメリット。ただ普及は簡単ではなかったみたいです。

　開発元の Google のブラウザである Google Chrome でサポートされたのが２０１４年、Microsoft Edge が２０１８年、Firefox が２０１９年、Safari が２０２０年となっており、ブラウザだけとっても１０年以上の歳月がかかってます。

　また、定番の商用画像ソフト Photoshop が webp をサポートしたのが２０２２年です。

　もやはサポートの終了している Internet Explorer や、テキストブラウザの Lynx や w3m は、今後もサポートしないでしょう。（当然ですが）

　現状では普通にパソコンやスマホやタブレットを買ってくれば、webp が閲覧可能な状況が整っていると言えます。

　上記のリンクをクリックして下さい。

　記事のなかに、かびた風呂の写真があるかと思いますが、あれ jpg だとひとつあたり２MBくらいあります。それが、１５０KBほどに圧縮できました。１／１０以下ですね。

　あと、アイキャッチの豪華なお風呂の画像、元の png は５００KBを超えてますが、こちらも１５０KBほどになってます。ただし、こちらについては可逆圧縮から不可逆圧縮に変更しての数字です。
　１／３ほどになってます。

　当然、不可逆圧縮の jpg を可逆圧縮にしちゃうと逆にファイルサイズが増加してしまいますが、そのへん注意して使用すれば、かなりの圧縮が見込めます。

※　可逆圧縮　：元の画像をそのまま劣化無しで圧縮する方法
※　不可逆圧縮：ファイルサイズを小さくするため元の画像を変更して圧縮する方法

　２５６☓２５６の画像をそれぞれの品質で圧縮しました。元の png は９９KBですが、最大に圧縮をかけると１KB、１／１００です。自分のホームページで使用したいとは思えない画質ですが、まだ人の顔だとわかります。

　圧縮率と画像の綺麗さを考えれば、品質８０くらいが妥当でしょうか、それでもサイズは７KB、元の画像の１／１０ないです。

　たしかに、古いソフトにこだわりのある方には向いてはいないのでしょうし、今後もすべてのソフトウェアでサポートされることもないのでしょう。

　ただ、９割を超えるブラウザが現状で webp に対応しているのでユーザーさんのことを考えるのであれば導入が必須と言えます。