ようやく…といっていいのか、IE11のサポート終了が発表されましたね（下記リリース参照）。
長年に渡り、Webトレンドの障壁を成してきたIEのサポートが終了することによって、今までは、IE非対応で導入できなかったり、IE対応のためのコストや工数が大きくて却下されていたような機能なども、今後はどんどん採用されていくんじゃないかなと期待しています。
今回はその一つ、gif、jpg、pngに置き換わる画像形式になるかもしれない「WebP（ウェッピー）」について、調べたことをまとめておきたいと思います。
WebP（ウェッピー）の導入方法（概要）と変換ツールについて
WebP（ウェッピー）とは？
Googleが新たに開発した画像フォーマットです。 ファイルの拡張子はそのまま「.webp」となっています。 JPGやPNGよりファイルが軽く表示速度の短縮が期待されている次世代画像フォーマットです。
Google調べ
「新たに」とありますが、発表されたのは2010年の話だったりします。今から10年以上も前に将来起こりうるであろう画像サイズの負荷問題を想定して独自フォーマットまで開発してしまったGoogleの先見の明はすごいなと思うんですが、開発元がGoogleなのもあってか、Chrome以外の主要ブラウザであるSafariやIEの対応がなかなか進まなかったようですね。制作サイドでも、将来的にどうなるかわからないものに工数を裂くのはリスキーだったり、非対応ブラウザ対応が必要になるのでコスト的にも予算と見合わないなどの理由で、提案前に却下されてきたフォーマット・・・という認識でした。
そんなWebPですが、Safariが対応したり、IEのサポート終了を受けてか、また注目されつつあるようで、現場でも採用されているのをちょこちょこ見かけるようになりました。
WebPの対応状況
画像の出し分け用に使う<picture>が、IE対応から解放される影響も大きいのかもしれません。
<picture>の対応状況
WebPの導入方法（HTML）
サイト構築を1から実装する場合や処理範囲が広い場合は、node.jsで画像変換処理セットを一式組んでしまうのがいいかなと思いますが、LPなどの単発制作で対応する場合は、手動で用意したほうが早いと思うので、その導入方法を書いておきます。
まず、
jpg、pngなどの画像をWebPに変換するには？
というところからですが、
jpg、pngなどの画像は、WebPへ変換しないといけないので、下記のようなツールを使って変換します。
個別で書き出す変換ツール
squoosh
「squoosh」は、Google Chrome Labsが開発している画像圧縮ツールです。変換後の画質を目で確認しながら、細かく調整して書き出すことができて便利です。
上図は2枚同じ画像を並べて左右で画質を確認できるようにしたものです。左が元画像、右が圧縮後です。クオリティ（Quality）を50％まで落として、どのくらい画質が落ちるか見てみたのですが、多少シャープさは失われたものの、シャギったりして見た目が汚いということもないので、これはこれで違和感はない感じになりますね。
直感で操作しやすいUIなので、使い方は難しくはないですが、ポイントとして、
初期値は、Compressが「MozJPEG」になっているので、「WebP」に変更しましょう。
（割と忘れます・・・）
他、使いそうな箇所の翻訳も書いておきます。
「Lossless」⇒可逆圧縮にも変更できます。
「Advanced settings」⇒詳細設定（レンダリングをもっと細かく調整できます）
「Preserve transparent data」⇒「透過あり」で書き出す場合はチェックを入れます。
WebPの特徴としては、上図のハートの画像を見ていただくと、影の部分が少し粗くなっているのがわかると思いますが、透過で入れた影やグラデーションの変換は弱い気がしました。
実務ではどのくらいがベストなのかというと、圧縮率80％を切ったあたりからはほとんど圧縮されなくなるので、あとは数キロバイトの差にこだわるかどうかというところでしょうか。クオリティ90％くらいでも通常よりかなり軽量化されるので、80～90％あたりで書き出すのが無難かなと思いました。一括変換の場合は、二度手間のコストを考えると高め設定にしておいたほうが良いかも。
Photoshop用プラグイン
PhotoshopからWebP形式で書き出したい場合は、WebPの公式サイトから、Photoshop用（Win版/Mac版）のプラグインが提供されています。保存時に調整パネルが出るので、クオリティも目で確認しながら調整できて良いのですが、ちょっと残念なのは「書き出し」ではなくて、「保存」なんですよね。assetも使えないので、1ファイルにつき1枚ずつWebP形式で保存していく形になります。
まとめて書き出す変換ツール
サルワカ道具箱
まとめて一括変換できるツールは、サルワカさんの道具箱にありました。かゆいところに手が届くとはこのこと・・・ありがたいです🙏
「サーバーなどにも送信されないため、画像を誰かに見られる心配はありません。」とちゃんと明記されているのも嬉しいです。（圧縮率は書かれていなかったのですが、たぶん80％？）
WebPの導入方法（HTML）
今までは、IE11と非対応ブラウザに対応させるために、全ブラウザで読み込める代替画像（jpgやpng）を用意しておく必要がありました。
非対応ブラウザ用画像との出し分けを行う場合は<picture>を使うのが便利ですが、先に述べたように<picture>もIE11が対応していないので、使いたい場合は「picturefill.js」を読み込んで対応させないといけません。
さらに、PC、SPで出し分けがある場合は画像4枚必要になるので、HTMLは下記のようになります。
<picture>
<source type="image/webp" media="(max-width:767px)" srcset="SP用画像.webp">
<source type="image/webp" media="(min-width:768px)" srcset="PC用画像.webp">
<source media="(max-width:767px)" srcset="SP用画像webp非対応ブラウザ用.jpg">
<img src="PC用画像webp非対応ブラウザ用.jpg" alt="" width="600" height="400">
</picture>画像1枚につき、この記述が必要になるので、修正が入るたびに、書き出し直しの作業とかあると吐きそうですね・・・
現時点で対応しているところは、一括変換とWebP追記はjsで処理したり、htaccessに対応ブラウザならWebP画像に置き換えるような指示を入れておくなどして対応していることがほとんどかなと思います。
IE11のサポートが終了すると、picturefill.jsも画像変換用の仕込みも必要なくなって、PC、SPだけの出し分けだけでよくなるので、扱いとしては、jpgやpngと同じになりますね。HTMLは下記ご参照。
<picture>
<source type="image/webp" media="(max-width:767px)" srcset="SP用画像.webp">
<img src="PC用画像.webp" alt="" width="600" height="400">
</picture>SP用の画像の出し分けもjsで処理する方法もありますが、「_pc」を「_sp」に置き換えるなどの一括変換になると思うので、mediaの数値を変えつつ出し分け調整したいような場合は、<picture>を使ったほうが調整しやすいですかね。
棲み分け的に考えると、高画質jpgはまだ需要がありそうですが、pngやアニメーションgifは置き換わっていくのかな・・・採用が増えれば、Adobeや編集系ソフトからの書き出し形式も対応されていくと思うので、IEサポート終了後、本格的にWebP主流の時代がくるかもしれません。
最後まで読んでくださってありがとうございました！