safariでWebP(うぇっぴー)が使えるようになるので改めて使い方を調べてみた

WebPは、Chrome、Firefox、Microsoft Edgeなどのブラウザでサポートされていますが、Safariでサポートされていませんでした。しかしAppleが今秋に発表を予定しているiOS 14や、macOS Big Surに搭載される「Safari 14」に、WebP形式の画像フォーマットをサポートするとの発表がありましたので、
これを機にWebPの需要が高くなるだろうなと思いましたので改めて使い方を調べてみました。

WebPとは

まずは読み方はWebP(うぇっぴー)と読むようです。
WebPはgoogleが手動となって開発した新しい画像形式です。新しいとはいっても2010年から仕様が公表され、各種ツールと共に提供が開始されたみたいです。
非可逆圧縮で、拡張子は.webp、同じ非可逆圧縮のJPEGとは違い、非可逆圧縮でありながらアルファチャンネルを扱えます。
Googleの示した事例では、JPEGと比較して25-34%ファイルサイズが小さくなり、pngと比較しても28%小さくなります。

WepP画像の作り方

Google が提供する画像軽量化サービスsquooshを利用してWebPに変換することができます。

またはデザイナーならphotoshopで変換したいと思うのでしょうが、photoshopだけではWebPに変換することができません。しかし専用のプラグインをインストールすれば可能です。
WebPの開発チームによるphotoshopのプラグインがGitHub上に公開されていますので、そこからダウンロードすることができます。
ダウンロードやインストール方法につきましては下記のリンクに書いてあります。
https://developers.google.com/speed/webp/docs/webpshop - WebPShop

WebPをブラウザ対応させる

WebPが対応できないブラウザに対しては、picture 要素を使ってpngを表示するようにします。
IEではpicture要素が使えないので picturefill.js などを利用して表示させることができます。

sample.html

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

さいごに

safariも対応すると言っても新しいバージョンになっていない人もいるだろうし、最新のiOSのバージョンにしてない人もいると思います。
また、未だにieを使っている人もいるでしょうし、まだまだ悩まされるところはあるとは思いますが、どんどん軽量のWebPが使われていくといいですよね。