webp画像とは？

webp（ウェッピー）・・・web制作においてjpgに変わる新しい画像フォーマット。

jpgよりも高い圧縮率を誇り、何人かの物好きな人が圧縮率を計測した結果としてもwebpの方若干優れているか同等くらいの評価をしている記事をよく見かけます。

HEIFとは何が違うの？

HEIFはios11以降のiphoneで撮影された画像の形式（拡張子は.HEIC）で使われるもので、web制作のためにHEIFを使うというのは現状まだ行なわれておりません。（ブラウザ非対応）
画像という分類では一緒ですが、用途が異なるのでweb制作の中で現段階では全く別物という認識で問題なさそうです。

対応ブラウザ

macのsafariだけ対応するものしないものが分かれるが、モダンブラウザでは基本表示が可能。
IEさえ無視できるwebサイトであれば、webpは対応しておくべきと言えそう。

※IEは非対応
※safariも一部以外非対応（macOS最新版のBigSurは対応済）

圧縮率は？

「本当に圧縮率が高いの？画質あらいんじゃない？」

実験してみました。
結果をどんっ！

実用可能レベル	画像	画質	圧縮処理	拡張子	ファイルサイズ
◎	png	標準	-	png	83KB
◎	jpg（画質100%）	100%	-	jpg	63KB
◎	png（webp変換）	標準	-	webp	56KB
◎	jpg（画質100%・圧縮）	100%	〇	jpg	38KB
◎	jpg（画質80%）	80%	-	jpg	38KB
◎	jpg（画質80%・圧縮）	80%	〇	jpg	33KB
◎	png（圧縮）	標準	〇	png	21KB
◎	png（圧縮・webp変換）	標準	〇	webp	18KB
使用不可	jpg（画質100%・webp変換）	100%	-	webp	15KB
使用不可	jpg（画質80%・webp変換）	80%	-	webp	15KB
使用不可	jpg（画質100%・圧縮・webp変換）	100%	〇	webp	12KB
使用不可	jpg（画質80%・圧縮・webp変換）	80%	〇	webp	12KB

※圧縮はいつもお世話になってるパンダさんで圧縮しています。（https://tinypng.com/）

写真と文字入りの同じ画像を6種類の書き出しパターン用意し、それぞれのwebp変換と合わせた計12種類の容量を比較してみました。
その結果、実際に目視で画質をチェックした感じでは「jpg書き出しからのwebp変換した画像」は品質的に使用不可レベルまで画質が落ちてしまいました。
（webpでは画質レベルを設定できますが、今回はjpgもpngもデフォルトの75%で書き出ししています。）

この結果から、「基本画像はpng書き出し」からの「webp変換」が一番作業効率と品質のコスパがよさそうというのが私なりの結論になります。
調べたところによるとwebpはpngからの変換の方が向いているようです。（変換する際の細かい設定によって結果は変わるとおもいますが・・・）

webp画像の作り方

###「webp画像の作成ツール」

・コマンドを使った方法。一括変換もあり。
https://developers.google.com/speed/webp （googleが開発 win・mac対応）

・フォトショップの拡張機能でwebpを使えるようにする方法
https://developers.google.com/speed/webp/docs/webpshop （googleが開発 win・mac対応）

・ブラウザ上だけで変換可能なオンラインツール
https://convertio.co/ja/jpg-webp/

設定方法

こちらのサイトの通り設定したところwindows環境では無事動きました。
mac環境でも現在調整中ですので、またチェックが完了したら追記します。

まとめ

~~ウェブピ...~~じゃなくてウェッピーなんてかわいい読み方ですが、google先生がコアウェブバイタル重視していくよって話があるので、IEやSafariの対応だけ注意すれば

ただWordpressなどでは完全に対応していないので、プラグインなどを調べて使っていく方法しかなさそうです。
こちらももう少し情報調べてわかれば追記していきます。

参考・参照↓
https://cookbook.xrea.jp/html-cookbook/image/webp.php
https://convertio.co/ja/jpg-webp/
https://blog.ideamans.com/2020/08/webp-params-2020.html

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ