WebPをPNGとJPEGで比較/透過性とアニメーションで比較

WebPの透過性WP 設定
WebPの透過性

WebP とは

WebPはGoogleが開発しているオープンソースの画像形式で、ファイルサイズはWebPの可逆圧縮(元に戻せる圧縮)の場合、PNGと比較して26% 、WebPの非可逆圧縮の場合、JPEG と比較して25~34%小さくなるとのこと。

WebPの可逆圧縮PNGより26%小さい
WebPの非可逆圧縮JPEGより25~34%小さい

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

https://developers.google.com/speed/webp

可逆圧縮(ロスレス圧縮)と非可逆圧縮

非可逆性圧縮は、データを小さくするためにデータを削除したり改変します。そのため非可逆性圧縮は元のデータに戻せません。可逆性圧縮は元のデータに戻せる圧縮方式です。

非可逆性圧縮JPEG(JPG)データを元に戻せない
可逆性圧縮PNGデータを元に戻せる

WebP のメリットとSEO対策

  • データサイズが小さい
  • ウェブページの表示速度が上がり、SEOの評価に反映される
  • ウェブページの表示速度が上げることで、ユーザーがページを閲覧しやすくなる
  • 透過性やアニメーションにも対応

Google PageSpeed Insights でも改善できる項目の中に「次世代フォーマットでの画像配信」が挙げられます。

次世代フォーマットでの画像配信
次世代フォーマットでの画像配信

画像ファイル形式の違い

WebP次世代画像フォーマット(非可逆&可逆)
PNG可逆性圧縮
JPEG(JPG)非可逆性圧縮
GIF透過性GIF・GIFアニメーション
JPEG 2000次世代画像フォーマット(非可逆&可逆)

GIFはかつて特許使用料がかかったために普及せず、現在では透過性GIFやGIFアニメーションとして利用されることが多い。

圧縮透過性アニメーション
WebP非可逆&可逆可能可能
PNG可逆性圧縮可能
JPEG(JPG)非可逆性圧縮
GIFLZW(可逆)可能可能
JPEG 2000非可逆&可逆可能

WebP 対応になったOS、ブラウザ

OSAndroid、Windows 10、macOS、iOS(14以降)
ブラウザGoogle Chrome、Mozilla Firefox、Microsoft Edge、Opera、Safari

WebP は様々なOS、ブラウザで対応できるようになりました。

透過PNG画像とWebP(透過)の比較

背景を透過する「透過PNG画像」をWebPに変換しました。

WebPの透過性
WebPの透過性
画像形式圧縮度サイズ
透過PNGオリジナル520kB
WebP93%35.2kB

透過させる場合は「Preserve transparent data」にチェックを入れます。

GIF アニメーションとWebP アニメーションで比較

WebPはアニメーションにも対応しています。

GIFのアニメーションをWebPに変換した場合

画像形式サイズ
GIFのアニメーション6.00 MB
WebPのアニメーション4.29 MB

GIFのアニメーション

GIFアニメーション
GIFアニメーション

WebPのアニメーション

WebP アニメーション
WebP アニメーション

WebP に変換するウェブサイト Squoosh

Squoosh(スクワッシュ)はGoogleが開発している画像変換サイトです。Squooshを利用すれば、PNGやJPEGを簡単にWebPに変換することができます。

下のリンクにSquooshの利用法など詳しく記載しています。

WebP・透過にも対応/画像変換サイトSquooshで画像圧縮 - PCとスマホとゲーム
Squoosh(スクワッシュ) Squo...

convertioで変換

タイトルとURLをコピーしました