WebP(ウェッピー)次世代画像フォーマットについて
この記事を読むのに必要な時間は約 17 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
WebP(ウェッピー)は、JPEGやPNG,GIFと同じように、Webで利用できる新しい画像形式です。
この記事ではWebP(ウェッピー)の活用や作成なども含め解説していきます。
今後のWEBサイト製作で重宝されるであろうWebP(ウェッピー)とはどんな画像なのか
これを機会にしっかり覚えてください。
WebP(ウェッピー)とは
Webp(ウェッピー)とはGoogleが開発した高圧縮率の次世代の静止画フォーマットです。 圧縮率の高い非可逆圧縮を採用しており、透過書き出しも可能。 GIFのようなアニメーションにも対応しており、拡張子は「.webp」になります。 但し、WebPはビットマップ画像のため、画像を拡大すると画質は劣化します。
Googleの解説ページでは英語のページになります。
WordPress5.8よりサポートされていることもあり今後の記事で使う頻度が高くなりそうな画像形式です。
画像形式の比較
ファイルの種類 | 読み方 | 色数 | 透明度 | 圧縮方式 | MIME type | 拡張子 |
---|---|---|---|---|---|---|
BMP | ビットマップ(ビーエムピー) | フルカラー | × | 非圧縮 | image/bmp |
.bmp |
GIF | ジフ | 256色 | 〇 | 可逆圧縮 | image/gif |
.gif |
JPEG | ジェイペグ | フルカラー | × | 可逆圧縮/非可逆圧縮 | image/jpeg |
.jpg , .jpeg |
PNG | ピング | 最大フルカラー | 〇 | 可逆圧縮 | image/png |
.png |
APNG | エーピング | 最大フルカラー | 〇 | 可逆圧縮 | image/apng |
.apng |
SVG(ベクタ形式) | エスブイジー | フルカラー | 〇 | – | image/svg+xml |
.svg |
WebP | ウェッピー | フルカラー | 〇 | 可逆圧縮/非可逆圧縮 | image/webp |
.webp |
WebP(ウェッピー)を使うメリット
WebPのメリットとしてまず挙げられるのは、非可逆圧縮であるにもかかわらずアルファチャンネルを扱えることです。
非可逆圧縮とは、画像を拡大したり縮小したりできない、ということです。非可逆圧縮の画像フォーマットでは、たとえばデータ画像の一部をカットして保存した場合、もう元のデータには戻せなくなります。また、サイズ変更や上書き保存をすることで画質が劣化します。代表的な非可逆圧縮の画像フォーマットとしてJPGが挙げられます。
WebPもJPGと同じく非可逆圧縮の画像フォーマットですが、アルファチャンネルを扱えるメリットがあります。画像処理においてアルファチャンネルを扱えると、たとえば背景を透明にできるなどのメリットがあります。可逆圧縮であるPNGやGIFは背景透過ができることが大きなメリットとされています。
WebPは非可逆圧縮でありながら背景透過ができるのです。JPGとPNGやGIFのメリットを併せ持つ画像フォーマットだといえるでしょう。
いいところどりだけでなくファイルサイズをPNGと比較してサイズが26%小さくなり、JPEG画像よりも25〜34%小さくすることができるということは、表示速度の向上にもつながるでしょう。
WebP(ウェッピー)を使うデメリット
これまで大きなデメリットとされてきた、対応ブラウザの少なさですが、現在は主要ブラウザの多くで対応できるようになり、非対応のブラウザはIEのみとなります。
非対応のIEだけならまぁいいかと思っていたのですが・・・
上記画像は、iPad Air(A1474)で下記の記事を開いた画像です。
2015iMacの Safariバージョン15.0でも表示してない
iOSはiOS 14以降、MacOSのSafariもBig Sur以降であればWebPに対応しています。
確かに表示してないが、筆者の環境だけの事で最新なら問題なく表示可能。
画像編集ソフトが対応していない場合があるなど、既存フォーマットと比べて使いにくい部分はまだありますが、大きなデメリットは無くなってきたといえます。
WebP(ウェッピー)画像の作成について
ここでは、Windows環境でWebP画像を作成することができる公式ツールのダウンロードを行います。
使いこなすまでには難易度高いですが・・・
赤枠をクリックして次へ
Windowsの場合は、赤枠のファイルをダウンロードします。
macOSの場合は赤枠のファイルをダウンロードします。
以降は、下記のサイト参照
Tool使ってみる
公式ツールで難しいと思われる方は、これから紹介するアプリがおすすめです。
「WebP画像を作る君」は、超簡単でしたね。
Windowsも macOSも使えるこのアプリは楽でいいです。
この章の最初の写真を試しにwebpに変換してみました。
1000X500ピクセル
jpeg 59.1kb
webp 34.2kb
より軽くすることが可能になるんですね
また、gifアニメーションも変換することが可能なために今後のWordPressだけでなくWEBサイトでは重宝されることは間違いないと思っています。
まとめ
webp画像を使うと画像がかなり軽量化できることがわかりました。
これは使わない手はないでしょう。
なぜなら画像をすべてwebp画像にして軽量化することで表示速度アップできます。
表示速度アップは、Googleでの評価アップにつながるのです。
それが無料で手に入るならやらない理由を見つけるほうが難しい
そんな気もします。
アメブロやはてなブログでは2021年9月20日現在、使えないWebP(ウェッピー)ですが、 WordPressではバンバン使っていきたいですね。
![]() |
くまはちLABのご利用ありがとうございます! |