【.WebP拡張子】とは？PNGやJPEGとの比較や対応環境と変換ツール

WebP拡張子とは

2010年発表。GoogleがWebMビデオフォーマットの派生で開発している静止画像フォーマット。

ビットマップ形式^※（ラスタ形式）。
※点画でってことぴよ。

開発目的

ウェブサイトのトラフィック量軽減と表示速度短縮を目的。

JPEG、GIF、PNGとの比較

非可逆圧縮^※1のJPEGや可逆圧縮^※２のGIF、PNGの置き換えを意図する規格。JPEGとは異なり、非可逆圧縮でもアルファチャンネル^※３を扱える。

※1 非可逆圧縮とは、元のデータの一部を削除・変形することで高い圧縮率を得る代わりに完全には元に戻せなくなる方式。
※2 可逆圧縮とは、完全に元のデータに戻せる符号列に変換する方式。非可逆圧縮に比べ圧縮率は低い。通常単にデータ圧縮といえば可逆圧縮を指す。
※3 アルファチャンネルとは、各ピクセルに対し色表現のデータとは別にある補助データのこと。一般に不透明度を表現する。

詳しくは、以下に掲載
▶【非可逆圧縮、不可逆圧縮 、 ロッシー圧縮 、 非可逆符号化（JPEG）】と【可逆圧縮、ロスレス圧縮 、可逆符号化（GIF、PNG）】規格とは。

ファイルサイズ

jpgと比べて

ファイルサイズは非可逆圧縮モードで（同一画像、同等画質の）JPEGと比較して25-34%小さくなる。

pngと比べて

可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。

書き出し速度

可逆圧縮は、エンコードはPNGよりも時間がかかるが、デコードはPNGよりも高速であると主張している。一方、非可逆圧縮では、JPEGと変わらない。

最大ピクセル

最大ピクセル数は16383×16383ピクセル。

対応のOSとブラウザ

古い環境のものには対応していないので気をつけよう！

OS

• macOS （Big Sur 以降）
• iOS （14 以降）
• Microsoft Windows 10 Creators Update以降
• Android （非可逆圧縮は 4.0 以降、可逆圧縮は 4.3 以降）

ブラウザ

• Google Chrome
• Mozilla Firefox 65以降
• Microsoft Edge
• Opera
• Safari 14以降

【.WebP拡張子】をPhotoshopで使う方法-プラグインを入れる

こちらのページを確認してね。

【.WebP拡張子】をPhotoshopで使う（開く、保存する）方法-プラグインを入れる

Googleから提供されているプラグインを入れることで Photoshopで.webp画像を開くことも、.webpで保存することも出来るようになる。※このページの画像は全て .webp 形式で作成

piyo-piyo-piyo.com

WEBP変換ツール

JPEGやPNGをWEBPに、WEBPをPNGに変換するウェブサービスです。画質を保ったまま、容量を圧縮できるWEBPをウェブサイトで活用していきましょう。

https://lab.syncer.jp/Tool/Webp-Converter/

lab.syncer.jp

※PNGの透過部分には対応していません。黒で塗りつぶし状態になります。

使用例

試しに写真と文字とイラストををwebp画像に変換した例

写真

（左）before 【jpg】、（右）aftter【webp】

PNG文字

（左）before 【png】、（右）aftter【webp】

イラスト

（左）before 【jpg】、（右）aftter【webp】