WebP(ウェッピー)次世代画像フォーマットについて

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 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(ウェッピー)を使うメリット

Windowsでのファイル表示
WebPのメリットとしてまず挙げられるのは、非可逆圧縮であるにもかかわらずアルファチャンネルを扱えることです。

非可逆圧縮とは、画像を拡大したり縮小したりできない、ということです。非可逆圧縮の画像フォーマットでは、たとえばデータ画像の一部をカットして保存した場合、もう元のデータには戻せなくなります。また、サイズ変更や上書き保存をすることで画質が劣化します。代表的な非可逆圧縮の画像フォーマットとしてJPGが挙げられます。

WebPもJPGと同じく非可逆圧縮の画像フォーマットですが、アルファチャンネルを扱えるメリットがあります。画像処理においてアルファチャンネルを扱えると、たとえば背景を透明にできるなどのメリットがあります。可逆圧縮であるPNGやGIFは背景透過ができることが大きなメリットとされています。

WebPは非可逆圧縮でありながら背景透過ができるのです。JPGとPNGやGIFのメリットを併せ持つ画像フォーマットだといえるでしょう。

いいところどりだけでなくファイルサイズをPNGと比較してサイズが26%小さくなり、JPEG画像よりも25〜34%小さくすることができるということは、表示速度の向上にもつながるでしょう。

 

WebP(ウェッピー)を使うデメリット

WebP
これまで大きなデメリットとされてきた、対応ブラウザの少なさですが、現在は主要ブラウザの多くで対応できるようになり、非対応のブラウザはIEのみとなります。
非対応のIEだけならまぁいいかと思っていたのですが・・・

iPadでの表示
上記画像は、iPad Air(A1474)で下記の記事を開いた画像です。

確かに表示してないが、筆者の環境だけの事で最新なら問題なく表示可能。

画像編集ソフトが対応していない場合があるなど、既存フォーマットと比べて使いにくい部分はまだありますが、大きなデメリットは無くなってきたといえます。

 

WebP(ウェッピー)画像の作成について

次世代画像フォーマット
ここでは、Windows環境でWebP画像を作成することができる公式ツールのダウンロードを行います。
使いこなすまでには難易度高いですが・・・

公式ツール
赤枠をクリックして次へ

Windowsダウンロードファイル
 Windowsの場合は、赤枠のファイルをダウンロードします。

Macダウンロードファイル
macOSの場合は赤枠のファイルをダウンロードします。

以降は、下記のサイト参照

Tool使ってみる

webPサンプルファイル
公式ツールで難しいと思われる方は、これから紹介するアプリがおすすめです。
「WebP画像を作る君」は、超簡単でしたね。

WebP画像を作る君
 Windows macOSも使えるこのアプリは楽でいいです。
この章の最初の写真を試しにwebpに変換してみました。
1000X500ピクセル
jpeg 59.1kb
webp 34.2kb
より軽くすることが可能になるんですね
また、gifアニメーションも変換することが可能なために今後のWordPressだけでなくWEBサイトでは重宝されることは間違いないと思っています。

 

まとめ

WordPressでwebP画像を使う
webp画像を使うと画像がかなり軽量化できることがわかりました。
これは使わない手はないでしょう。
なぜなら画像をすべてwebp画像にして軽量化することで表示速度アップできます。
表示速度アップは、Googleでの評価アップにつながるのです。
それが無料で手に入るならやらない理由を見つけるほうが難しい
そんな気もします。
アメブロはてなブログでは2021年9月20日現在、使えないWebP(ウェッピー)ですが、 WordPressではバンバン使っていきたいですね。

 


 

チャンネル登録

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!