次世代画像形式 WebPの使い方

What’s WebP?

WebP(ウェッピー)ってなんだろう?

ウェブサイトの製作過程で必ずといっていいほど使う写真やイラストなどの静止画。現在主流なのはJPEG/GIF/PNGといった画像形式ですが、次世代の標準画像形式として登場したのがWebP(ウェッピー)という形式です。

WebP(ウェッピー)とは

WebPは、米Googleが開発しているオープンな静止画像フォーマット。ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。

wikipediaより

非可逆圧縮でもアルファチャンネルを扱えるということは、PNGのように透過した画像を作ってもWebPで書き出せるということになります。これはいいですね。

iOS 14版SafariがWebPをサポート開始

これまで対応ブラウザが少なくなかなか使いづらかったWebPですが、昨年(2020年)9月にiOS 14版SafariがWebPのサポートを開始しました。近いうちにMac版Safariも対応すると思われますので、モダンブラウザはほぼWebP対応済みということになります。

現在の各ブラウザ対応状況

WebP対応状況の画像
Can I useより

WebP(ウェッピー)の使い方

現在画像制作で主流となっているadobeのIllustratorもPhotoshopもWebPをサポートしていませんが、PhotoshopにはGoogle Developersが提供しているプラグインを入れる事で使用可能になります。

WebPShop | Google Developers
https://developers.google.com/speed/webp/docs/webpshop

GitHub
https://github.com/webmproject/WebPShop

インストールは他のプラグインと同じで、PhotoshopのPlug-insフォルダーにダウンロードしたWebPShop-master/binの中にある各OSのファイルを入れてPhotoshopを再起動するだけです。

WebP(ウェッピー)の使い分け

とはいえ誰もが最新バージョンのブラウザを使っているわけではないので、今使うなら従来の画像形式とWebPを出し分ける必要ああります。

たとえばこんな感じです。picture要素で使い分けます。

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

またhtaccessを使った出し分け方法もあります。こちらの方が簡単でしょうか。

.htaccessによるWebPの選択的レスポンスとその問題点と改善案

※ nginx向けの設定をこちらに書きました。 Webサーバー上のJpegやPNGファイルについて、そのWebP版ファイルがある場合はそちらを返す(もちろんブラ…
qiita.com

WebP(ウェッピー)のまとめ

完全なる普及にはもう少し時間がかかりそうですが、WebPが普及すればJPEG/GIF/PNGといった画像ごとの変換方法の違いもなくなり、すべてWebPで統一できかつ画像が軽くなるというメリットがあります。

IllustratorがWebP対応を完了すれば、いっきに標準形式へと駆け上がりそうですね。