#どうも7noteです。今日から始めるwebp対応と題して、これからSEO対策やUI・UX改善のためにwebpを使いたい人必見の内容です。
ウェブピ...じゃなかった、webp（ウェッピー）を始めたいと思った時に
・webpって何？
・どうやって画像つくるの？
・そもそも対応必要？
そんな方向けにwebpのいろはを解説します！
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制作のちょいテク詰め合わせ