WebP（ウェッピー）とは？ JPG、PNGとの違いや変換方法
公開日：2021年7月2日
WebP（ウェッピー）という画像フォーマットをご存知でしょうか？
Googleが開発しているフォーマットで、画質を損なわず、ファイルサイズを軽量化できます。
主要ブラウザにもほぼ対応していますので、非常に便利です。
また、ウェブサイトの高速表示に繋がるため、SEOにも効果があります。
Googleは、ウェブ上においてユーザー体験の向上を図るための取り組みとして、2021年6月から「Core Web Vitals（コアウェブバイタル）」を徐々にランキング要因に導入すると発表しました。この中には重視する指標としてページ表示速度が含まれています。
こうした流れからも、今後ますますWebPが普及していくと予想されます。
本記事では、JPG、PNGとの違いや、メリット・デメリット、画像の作成・変換方法などご紹介していますので、ぜひご覧ください！
WebP（ウェッピー）とは
WebP（ウェッピー）とは、ウェブサイトのトラフィック量を削減し、表示高速化を目的として作られた新しい画像フォーマットです。ファイルの拡張子は「.webp」です。
開発したGoogleによれば（https://developers.google.com/speed/webp/）、ファイルサイズはJPGと比較して25～34%小さくなり、PNGと比較して26%小さくなるとのこと。しかも、背景透過もサポートしています。
画像のファイルサイズが大きくてページ表示が遅い……という悩みも、WebPを導入すれば、大幅に改善できそうです。
主要ブラウザにはほぼ対応
肝心の対応ブラウザですが、Chrome、Microsoft Edge、Firefox、iOS 版Safariです。
IE以外のブラウザには対応しています。
実はWebPが開発されたのは2010年と、意外に古いのです。
対応ブラウザが少なかったため、なかなか普及しない状況がありました。
しかし、2018年にEdgeとFirefox、2020年にiOS 版Safariが次々とWebPに対応。
現在では、主要ブラウザにほぼ対応しており、「次世代画像フォーマット戦争」がついに終結したと言われるまでになっています。
WebPのメリット・デメリット
WebPを導入するにあたっての、メリット・デメリットをそれぞれ解説します。
メリット
ファイルサイズの軽量化
Googleの公式文書（https://developers.google.com/speed/webp/）によれば、JPGより25～34%、PNGより26%も軽量化できると言われています。
ウェブサイトの表示速度が改善されますので、SEOにも効果が見込めます。
表示速度の遅さから、ウェブサイトの閲覧者がストレスを感じたり、ページを離脱したりということも抑止できますので、ユーザー体験の向上にも繋がります。
アルファチャンネルが使える（透過できる）
アルファチャンネルを使えるというのは、PNGやGIFのように画像を透過できるということです。
ちなみに、PNGやGIFは「可逆圧縮」といって、圧縮率が低いというデメリットのある画像フォーマットです。そのかわり、透過できます。
一方、WebPは「可逆圧縮」だけでなく、「非可逆圧縮」にも対応しています。
「非可逆圧縮」とはJPGと同様の圧縮方法で、圧縮率が高いフォーマットなのですが、PNGやGIFのように透過も可能です。
つまり、透過できないというJPGのデメリットを補い、なおかつファイルサイズを小さくできるのです。
PNGは画質がきれいで透過もできて便利なので、つい多用してウェブサイトが重くなってしまった……という経験のある方も多いのではないでしょうか。
WebPを導入すれば、そんな問題も解決できるはずです。
アニメーションも利用可能
WebPはGIF同様、アニメーションも作成できます。
GIFは色数が256色であることから画質が粗いというのが難点ですが、WebPはそうした制限なくきれいなアニメーションを作成することが可能です。
デメリット
画像の変換に手間がかかる
画像変換には、WebP用の画像変換オンラインサービスやプラグインを利用したり、コマンドラインツールを用いたりする必要があります。
PhotoshopやIllustrator、XDといったアプリケーションにWebP書き出し機能は標準搭載されていないため（2021年6月現在）、いくらか手間がかかる部分は否めません。
具体的な変換方法は、のちほどご説明します。
IE非対応
対応していないブラウザに対しては、WebPではなく、JPG、PNG、GIFといった画像フォーマットを設定する必要があります。
設定方法はのちほどご紹介します。
JPG、PNGとの違い、比較
| 画像フォーマット | 圧縮方法 | 透過 | アニメーション |
| WebP | 非可逆圧縮 可逆圧縮 | ○ | ○ |
| JPG | 非可逆圧縮 | × | × |
| PNG | 可逆圧縮 | ○ | × |
試しにJPGとWebPの画像を比較してみました。
【JPG】141 KB
【WebP】75KB
画質の劣化は、ほとんど感じられないのではないでしょうか？
圧縮率によって、もっとファイルサイズを小さくすることもできます。
WebPの作成・変換方法
WebP画像の作成・変換にはいくつか方法がありますので、代表的なものを解説します。
オンラインの変換アプリケーション
Squoosh（https://squoosh.app/）
Google が無料で提供しているサービスです。
簡単にWebPに変換できます。圧縮率やリサイズなどの機能も搭載されています。
他にも様々なアプリケーションがありますが、操作がしやすいものをいくつかご紹介します。
SYNCER WEBP変換ツール（https://lab.syncer.jp/Tool/Webp-Converter/）
サルカワ道具箱 画像をWebPに変換（https://saruwakakun.com/tools/png-jpeg-to-webp/）
サルカワ道具箱のアプリは、複数画像の一括変換もできるため、とても便利です！
使いやすいツールを活用してみてくださいね。
Photoshopプラグイン「WebPShop」
Photoshoの標準機能では、残念ながらWebP未対応です。
ですが、このプラグインを使えば、WebP画像を表示・作成できます。WebPShopは、Google公式のプラグインです。
https://developers.google.com/speed/webp/docs/webpshop
このようにWebPを選択できるようになりました。
コマンドラインツール「cwebp」
「cwebp」というGoogle公式のコマンドを使って、画像を変換できます。
コマンドラインに慣れていないと難易度が高い方法ではありますが、圧縮率や品質変更、リサイズ、切り抜き、複数画像の一括変換など、多くの機能が用意されています。
https://developers.google.com/speed/webp/download
WebPの実装方法、HTML/CSSの記述
WebPは通常の画像と同じく、HTML/CSSで読み込みができます。
ですが、１点だけ注意が必要なのは、WebP未対応のブラウザへの対処です。
対応していないブラウザに対しては、WebPではなく、JPG、PNG、GIFといった従来の画像フォーマットを設定する必要があります。
HTMLで画像を読み込む場合
JavaScriptや.htaccessファイルで表示画像を振り分ける方法もありますが、ここでは<picture>タグを使用した対応策をご紹介します。
以下が、サンプルのHTMLです。
<picture>
<source srcset=”../test.webp” type=”image/webp”>
<img src=”../test. jpg “>
</picture>
<picture>タグは、１つ以上の<source>タグと、１つの<img>タグを子要素に含みます。
ブラウザは、<source>を上から順番に検討し、条件に該当した画像を表示します。
上記のソースを解説すると、
- WebPに対応しているブラウザの場合、test.webpを表示
- WebPに対応していないブラウザの場合、test.jpgを表示
となります。
ただし、ここで問題となるのは、そもそもIEが<picture>タグに対応していないことです。
これは、Picturefill.jsというポリフィルを使うことで解決できます。
ポリフィルとは、新しい機能が搭載されていない古いブラウザでも、その機能を使えるようにするための代替コードを指します。
<script src=”https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.js”></script>
CDNで提供されており、ファイルを読み込むだけですので、簡単です。
公式サイト（https://scottjehl.github.io/picturefill/）からダウンロードしたファイルを設置することもできます。
これだけで、IEでも<picture>タグを使用できるようになります。
CSSで画像を読み込む場合
JavaScriptで使用ブラウザを検出する方法があります。ここでは、「Modernizr」というJSプラグインをご紹介します。
プラグインのダウンロード
https://modernizr.com/からダウンロードできます。
HTMLの準備
<script type=”text/javascript” src=”modernizr-custom.js”></script>
ダウンロードしたjsファイルを読み込んでください。
すると、<html>タグに下記のクラスが追加されます。
【WebP対応ブラウザの場合】
<html lang=”ja” class=”webp webp-alpha webp-animation webp-lossless”>
【WebP未対応ブラウザの場合】
<html lang=”ja” class=”no-webp”>
CSSの記述例
<html>タグに追加されたクラスを使って、CSSで画像の出し分けを行います。
.img {
background-image: url(../test.webp);
}
.no-webp .img {
background-image: url(../test. jpg);
}
WordPressにおけるWebP導入
ワードプレスの場合、もっと簡単にWebPを導入できます。
プラグインを導入するだけで、自動で従来画像をWebPに変換し、ブラウザによる表示振り分けまで行ってくれます。
手間のかかる画像変換や、HTML・CSSの記述が不要ですので、非常に便利です。
- WebP Converter for Media
- WebP Express
- EWWW Image Optimizer
この他にもWebPを手軽に導入できるプラグインがありますので、ぜひ活用してみてください。
SEO対策への影響は
WebPはウェブサイトの高速表示に繋がることからSEO施策としても有効です。
Googleは「Core Web Vitals（コアウェブバイタル）」をランキング要因に組み込むことを発表しました。2021年6月中旬から徐々に導入される予定となっています。
Core Web Vitalとは、ウェブ上においてユーザー体験の向上を図るための考え方・取り組みであり、その指標としてウェブページの読み込み時間が含まれています。具体的には、ページを読み込んでから2.5秒より速く表示する必要があると言われています。
【参考】Web Vitals の概要: サイトの健全性を示す重要指標
https://developers-jp.googleblog.com/2020/05/web-vitals.html
SEOにおいて今後はこれまで以上に表示速度が重視されていきます。
WebP導入によるウェブサイト最適化は効果的な施策といえるでしょう。
まとめ
以上のように、WebPには画質を損なわず、ファイルサイズを軽量化できるという優れたメリットがあります。
2021年6月中旬から徐々に導入される「Core Web Vitals」という観点からも、SEO施策として非常に有効です。
以前は対応ブラウザが少ないことから、導入がためらわれるところもありましたが、現在ではそうした問題もほとんど解消されています
この機会にぜひWebP導入をおすすめします！
関連記事
この記事を書いた人
- SEO対策やウェブサイト制作、マーケティングの最新情報をお届けします。
最新の投稿
- 2024年9月22日生産性向上中小企業向けSBT認証取得で未来の企業価値を高める！持続可能なビジネス戦略の第一歩
- 2024年8月22日生産性向上原価統制と原価企画の違いとは？
- 2024年8月9日生産性向上製造業における予実管理の重要性とその効果
- 2024年8月6日生産性向上小規模製造業における製番管理の効果的な方法
