Suzuki Blog Written by Yuki Suzuki

画像フォーマット「WebP」とは【特徴や変換ツールの紹介】

web制作

画像フォーマットの「WebP」についてまとめました。

この記事の内容

  • WebPとは
  • メリット
  • デメリット
  • ツール紹介
  • まとめ

スポンサードサーチ

WebPとは

WebPとはGoogleが開発した画像フォーマットのことです。

拡張子は「.webp」です。

以下のような特徴があります。

  • 高い圧縮率
  • 非可逆圧縮でありながら背景透過ができる
  • アニメーションが使える

高い圧縮率

WebPを使用した場合、PNGと比べて26%、JPEGと比べて25~34%画像の容量を圧縮できるとされています。

非可逆圧縮でありながら背景透過ができる

非可逆圧縮とは容量の小ささを重視し、一度圧縮すると元に戻せない圧縮のことです。

極めて効率的に圧縮できる方法で、JPEGも非可逆圧縮の画像フォーマットです。

また、WebPは背景を透過させることもできます。

透過できる画像フォーマットの代表例はPNGです。

つまりWebPはJPEGとPNGの特徴を併せ持っており、使い分ける必要がなくなります。

アニメーションが使える

WebPはアニメーションも使えます。

アニメーションフォーマットであるAPNGよりも高圧縮率なので、画質を保ったまま軽量なアニメーションを作成できます。

メリット

WebPを利用するメリットとして画像の軽量化による、表示時間の短縮が挙げられます。

これによりユーザー満足度の向上、SEO対策などが期待できます。

スポンサードサーチ

デメリット

デメリットは対応ブラウザの少なさです。

ただ、2020年9月にSafari 14がWebPのサポートを開始し、非対応のブラウザはIEのみとなりました。

ツール紹介

WebPを利用するには、用紙した画像をWebP形式に変換する必要があります。

以下のような変換ツールがあります。

Squoosh

Syncer

Photoshop用プラグイン「WebPShop」

スポンサードサーチ

まとめ

WebPには「表示速度を高めることができる」「JPEGとPNGの特徴を併せ持っている」などのメリットがあり注目されてきました。

デメリットとして対応ブラウザの少なさがありましたが、それも解消されつつあるので、今後も普及していくと考えられます。

参考資料

WebP(ウェッピー)とは?変換方法と使用するメリットのまとめ

WebP(ウェッピー)とは?フォーマットの違いや作成方法をご紹介!

次世代画像フォーマット「WebP」って?

web制作を学ぶならデイトラ

Web制作コース

動画でプログラミングを学ぶなら

Udemy

オンラインスクールでプログラミングを学ぶなら

Skill Hacks