jpgやpngよりも画質を保ったまま画像サイズを軽量化できるWebP(ウェッピー)。画像をたくさんWebサイトで使うならWebPにした方がいいかもよ!とメンバーからアドバイスをいただいたのですが、知識が浅かったので調べてみました。
WebP(ウェッピー)とは
WebP(ウェッピー)は、Googleが開発したWebページ向けの画像フォーマット。2010年頃から開発しているのだとか。同じレベルの画質のJPEG画像より25~34%、PNG画像より26%ファイルサイズを軽量化できるとされています。
軽量化しつつも画質を維持でき、透過処理にも対応するため、PNGやJPEGなど従来の画像の置き換えに利用が進みつつあります。
機能 |
JPEG |
PNG |
GIF |
WebP |
画像の軽量化 |
◯ |
- |
- |
◯ |
透過 |
- |
◯ |
- |
◯ |
アニメーション |
- |
△(APNG) |
◯ |
◯ |
WordやExcelでWebPは読み込みできるの?
Webサイトでは利用が進んでいるようですが、アプリケーションの対応はあまり進んでいないという噂を耳にしました。そこで、代表的なアプリケーションの対応状況を確認してみました。(2022年3月28日現在)
読み込み |
書き出し |
|
Word |
× |
- |
Excel |
× |
- |
PowerPoint |
× |
- |
Googleドキュメント |
× |
- |
Googleスプレッドシート |
× |
- |
Googleスライド |
× |
- |
Photoshop2022 |
◯ |
◯ |
Illustrator 2022 |
◯ |
× |
Adobe XD |
× |
- |
Figma |
◯ |
× |
ペイント |
◯ |
× |
JPEGやPNGからWebPに変換する方法
アプリケーションの対応はまだまだ発展途上という状況なようです。しかしながら、WebPに変換できる無料ツールがあるので、JPEGやPNGで書き出し、そのあと別のツールを用いてWebPを作成すれば簡単にWebPに変換できます。
Webサービスなので手軽につかえる:Syncer WEBP変換ツール
大量のファイルを変換するなら:Google Official WebP Tools
Gulp/Webppackで利用するなら:ImageMagick
WebP画像のブラウザ対応状況
新しい画像フォーマットであるWebPは、すべてのブラウザのすべてのバージョンで対応しているわけではありません。
2022年3月現在、WebPの対応状況は下記のような状況です。
出展:WebP image format | Can I use... Support tables for HTML5, CSS3, etc
主要なWebブラウザの最新版はWebP画像の表示に対応しているようですね。グローバルではすでに94%がWebP対応のブラウザを使用しています。
それでも6%はWebPだけでWebサイトを構築すると一部の端末で画像が表示できなくなるので、工数をかけてでも非対応のブラウザには従来のjpeg、png形式を表示するように出し分けする方針にするか、非対応のブラウザは対象外とするかは、Webサイトの目的やターゲットによって判断がわかれそうです。
Wordpressでサイトを構築する場合は、WebP Converter for Media というWebP変換プラグWebP変換プラグインの活用を検討するもの良さそうですね。
まとめ
軽量化しつつも画質を維持できる上に、透過処理にも対応しているWebPはとても魅力的。しかしながら、セールスと画像を共有したり、パワーポイントで作成する資料にはWebPは使えないので、2つの形式で画像を用意しなくてはならないなどデメリットもありますね。
一部サイトには意図的にWebPを採用しますが、Web以外でも使う可能性が高い画像についてはjpgやPNGで書き出すといったように使い分けていきたいと思います。