WEBP

次世代画像ファイルWebPとは? 利用する4のメリットと変換方法を解説。

INTRODUCTION

次世代画像フォーマットとも言われるWebPについて利用するメリットと実際に変換して使えるようにする方法を紹介しています。

当ページの画像はすべてWebPなので、表示されていれば使用しているブラウザはWebP対応ということになります。

aboutwebp cov

WebPとは

WebPはGoogleによって開発された画像拡張子で、ビットマップ形式の画像ファイルです。

ビットマップを簡単に説明すると、以下のようにかなりの倍率で拡大したらピクセル(四角)の要素の集合で作られている画像のことです。

bitmap sample

WebPの読み方はウェッピーです。ウェッピー。

.jpgのようにファイル名のあとにつく拡張子が.webpとなります。

次世代型画像形式とはいいつつも2010年にリリースされているので登場してからそこそこ時間は経っていますが、現在かなり注目度が上がってきています。

WebPを利用する4のメリット

WebPの画像形式を使うことのメリットについて以下に4点挙げて説明していきます。

1. 容量が軽い

2. .jpg .png .gifの良いとこ取りができる

3. 主要ブラウザに対応している

4. SEO対策的にも好影響

それぞれの項目について詳しく説明していきます。

1. 容量が軽い

シンプルに「容量が軽い」というだけでもかなり魅力的です。

最適化して容量を減らした.jpgからWebPへの変換で更に30%程度小さくすることができます。

.pngから.webPへの変換でだいたい70%ほど容量を小さくできます

当ブログで使用しているWebP画像で100kBを超えているものはほぼありません。

画像の容量に対する感覚がかなり変わりました。

2. .jpg.png.gifの良いとこ取りができる

WebPが持つ特徴がこちら。

.jpgよりも容量が軽い

.png/.gifの特徴であるアルファチャンネル(背景透過)に対応している

.gifの特徴であるアニメーションに対応している

メジャーな拡張子である.jpg, .png, .gifのそれぞれが持つ特徴を取り込んで改良されたのが.webPです。

出力するファイル形式を分けなくて済むようになるのが良いですね。

ちなみにですが、WebPはCMYKカラーに対応していないようなのでウェブ上で使用する画像に特化したフォーマットという感じです。

3. 主要ブラウザは対応している

2021年の段階でWebPはだいたいのブラウザに対応しています。

世界のブラウザシェア率とWebP対応状況を示したものが以下です。

webPsupport Screenshot

世界でのブラウザのシェア率とWebP対応状況を表したグラフ

https://caniuse.com/webp

* 一番多いChrome for Androidで37.5%程度のシェア率

* 緑色がWebP対応/赤色がWebP非対応

* 数字はブラウザ(Safariの場合はOS)のバージョン

世界的に見れば利用者の90%以上のブラウザでWebP対応

iPhoneユーザーの多い日本では少し割合が変わってきそうです。

Googleの開発した画像形式なのでGoogle Chromeはもちろん対応していますが、ほとんどのブラウザで対応していることが確認できたと思います。

WebP未対応のブラウザ

利用者が一定数いるブラウザのなかでWebPに対応していないものはこちら。

・IE (Internet Explorer)

・macOS Big Sur(2020年11月リリース)より前のOSでのSafari

・iOS14(2020年9月リリース)より前のOSでのSafari

最新のmacOS, iOSについてはSafariがWebP対応しているのでAppleユーザーでも画像を見ることができるようになりました。

iPhone利用者の多い日本でも使える環境になってきたという感じです。

4. SEO対策的にも好影響

容量が軽い = ページの表示速度が早くなる ということにつながります。

ページの表示の速さはユーザーの離脱率を減らせる効果があり、直接的にもSEOに影響してくる部分です。

PageSpeed Insightsでも推奨される

ページの表示速度などを計測してスコアを出してくれるツールGoogle PageSpeed Insightsでも次世代画像フォーマットの使用を推奨しており、Webpなどが例に上がります。

pageSpeedInsights Screenshot

Google PageSpeed Insightsの詳細と利用はこちら (無料)

https://developers.google.com/speed/pagespeed/insights

WebPはGoogleの開発した拡張子であり、PageSpeed InsightsはGoogleの提供するツールなので当然かもしれませんが。

画像形式をWebPに変えることでこの辺りの項目の改善ができます。

scorepageSpeed

JPEGでも最適化して画像サイズを小さくすればスコアを上げることはできますが、期待値はWebPの方が大きいです。

WebPへの変換方法 4種

実際に自分の使っている画像でWebPを試してみたくなってきた方もいると思うので、画像をWebPに変換・出力できるツールを4つ紹介していきます。

1. 画像圧縮ツール Squooshを使う

squoosh Screenshot

Squoosh 公式サイトはこちら (無料)

https://squoosh.app

まずおすすめするのがGoogle Chromeの開発チームが提供するフリーの画像圧縮ツール「Squoosh」です。

操作もシンプルで、簡単に.webp形式の画像に変換することができるので試しに使ってみると良いと思います。

ブラウザ上で使えアプリをパソコンにインストールすることもできます。

2. 動画をアニメーションWebPに変換する EZGIF.com

EZGIF.comは画像の変換や最適化、クロップなど色々できるオンラインツールでWebPにも対応しています。

動画データからアニメーションのWebPデータに変換することができ、Squooshではできない点なのでこれもかなりお世話になっています。

EZGIF.com での変換はこちら (無料)

https://ezgif.com/video-to-webp

3. Photoshopプラグイン WebPShopを使う

GoogleがPhotoshop用に.webpを書き出せるようにするプラグインWebPShopを提供しています。

WebPShopインストールと手順の説明こちら (無料)

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

4. WordPressプラグインを使う

ブロガーなどですでにアップロードして使用している画像をWebPにしたい場合はWordpressのプラグインを利用しましょう。

WebP Express」「EWWW Image Optimizer」などはWebP変換に対応しています。

WebP対応のブラウザにはWebPを表示しつつ、非対応のブラウザには元の画像形式(.jpg)のものを表示するということができたりします。

MATOME

SafariがWebP対応したことで2020年の終わりにWebPを利用する環境としては出来上がったのではないかなと思います。

画像を圧縮して小さくする良いクセがつきました。

まだ非対応のブラウザを利用している方は一定数いるので完全にWebP形式とするかの判断はご自身でしましょう。

ちなみにすでにWebPの次世代と呼ばれるAVIFという拡張子もすでに存在していたりします。

こちらはまだまだブラウザが対応していないので先の話になりそうです。

adobe illustrator cov 01

Adobe Illustratorでできること6選。

イラストレーターを使ってどのようなデザインが作れるのかを解説しています。

icon img

tama

Graphic / Visual Designer

主にブログ運営とブログデザインについて書いています。tamasdesign : 3.0万PV/月 WordPressテーマはDiviを使用中。

tamasdesign

ブログページトップに戻る

More of BLOGGING

ブログ関連記事

ブログとアフィリエイト関連の記事をピックアップして紹介します。

併せて読んでみてください。

asp cov

【2021年版】アフィリエイトASP 人気の定番おすすめ8社

アフィリエイトブログを運用するなら必ず登録しておきたいASP8社を紹介します。

best blogging tools cov

【2021年版】ブログにおすすめのツール9選

当ブログでも利用しているおすすめのブログツール9選を紹介しています。

modeling img

【2021年版】サムネイルデザイン制作におすすめのツール3選

ブログのサムネイルを制作するのにおすすめのツールの組み合わせ3選を紹介しています。

beststockphoto cov

【無料有料】おすすめフリー素材・画像サイト8選

商用利用もできるフリー素材を入手できるおすすめサイトを紹介しています。