アダムテクノロジーズ運営チーム

WebPとは?メリット・デメリットや変換方法を解説

高速化

WebPとは?メリット・デメリットや変換方法を解説のサムネイル

近頃、Googleのアルゴリズム変動により、SEOにおいてページ表示速度の重要性が増してきていることを感じるサイト運営者は多いのではないでしょうか。

特に、画像はページ表示速度が遅くなる原因となる可能性が高い要素の一つです。

Googleが提供している速度測定ツールであるPageSpeed Insightsにも項目として出てくる「WebP」。

本記事では、そんなWebPについて、メリットやデメリット、変換方法などを解説します。

目次 プラスマーク 表示 プラスマーク 閉じる

WebPとは?

WebP(ウェッピー)とは、Googleが開発した次世代の画像フォーマット(ファイル形式)です。拡張子は「.webp」と表記されます。

WebPとその他画像フォーマットの違い

Webで主に使用されている画像フォーマットは、JPEG・PNG・GIFの三つです。

これらと比べてWebPは以下の特徴があります。

  • 高い圧縮率
  • 背景透過が可能
  • アニメーションも利用可能

高い圧縮率

GoogleはWebPを使用した場合、JPEGとPNGを使用した際と比較してそれぞれ約26%、約25~34%も画像の容量を圧縮できると発表しています。

背景透過が可能

JPEGは透過画像に対応していませんが、WebPは非可逆圧縮の画像でありながら透過も可能です。

非可逆圧縮とは、データ圧縮方式の一つで、圧縮前のデータと、圧縮・展開を経たデータとが完全には一致しないデータ圧縮方式です。

これまでは、背景透過の必要に応じてJPEGとPNGを使い分ける必要がありましたが、WebPを使えば画像形式を統一することができるようになります。

アニメーションも利用可能

JPEGの画像を使ってアニメーションを作成したい場合、一度JPEGの画像をアニメーションに対応しているGIFに変換する必要がありました。

しかし、WebPであればGIFへの変換なしにそのままアニメーションを作成することができます。

WebPのメリット・デメリット

ここからは、WebPのメリット・デメリットを紹介していきます。

メリット① ページ表示速度が短縮される

画像が軽量化されるので、サイトの読み込み時間が短縮され、ユーザー体験が改善されます。

その結果、SEO施策にも繋がります。

メリット② コスト削減

AWSなどの従量課金制のサービスにおいて、軽いデータでの通信はコスト削減につながります。

WebPを使用することで画像などの重いデータの通信を軽量化しましょう。

デメリット①IEが非対応

2018年にPCの主要ブラウザであるMicrosoft EdgeとFirefoxが相次いでWebPに対応することを発表。

さらに、2020年にAppleのiOS14も対応することになりました。

しかし、IEは未だに非対応ですので、その場合は条件分岐で出しわけをする必要があるので注意が必要です。

デメリット② 変換に手間がかかる

WebPへの変換にはWebP変換用のアプリケーションを使用するか、コマンドで変換する必要があります。

WebPへの変換方法

では、WebPへの変換方法にはどのような方法があるのでしょうか。

解説していきます。

ブラウザ変換ツールを使用

Squoosh(スクワッシュ)というGoogleが開発した画像データ変換サイトを使用する方法が一般的です。

しかし、一つずつアップロードする方法しかないので、非常に手間がかかります。

その場合、サルワカ道具箱(https://saruwakakun.com/tools/png-jpeg-to-webp/)というWEB上に無料で公開されているツールがありますので、こちらを使用すると良いでしょう。

コマンドラインツールを使用

Googleが提供しているコマンドツール(Downloading and Installing WebP)を利用することでもWebPを変換することができます。

Photoshopのプラグインを使用

Photoshopから直接WebPを書き出すことはできませんが、プラグインを使用することで書き出せます。

公式のプラグインではないため、注意が必要です。

CMSがWordPressの場合はプラグインも

使用しているCMSがWordPressの場合、EWWWというプラグインを使用することで一括変換することができます。

導入手順は以下になります。

  • WordPress管理画面のプラグイン【新規追加】で「EWWW Image Optimizer」をインストール
  • プラグイン「EWWW Image Optimizer」を有効化
  • 設定で「サイトの高速化」と「無料モードを続ける」を選択
  • 次に「メタデータを削除」「遅延読み込み」「Webp変換」を選択し保存
  • WordPress管理画面のメディアにて【一括最適化】を実行
  • 実行したのち、.htaccessファイルにWebpコードを記載

まとめ

今回は、WebPについて解説しました。

弊社では、コアウェブバイタルをはじめとしたWebサイトの表示スピードの改善点を診断する「WEBサイト表示診断サービス」をご用意しています。まずは、下記のページから無料で資料をダウンロードしてみてはいかがでしょうか。

この記事の執筆者

田中雄太

twitterアイコン Facebookアイコン

アダムテクノロジーズ執行役員 SEOコンサルタント

株式会社アダムテクノロジーズ 執行役員。
ユーザーニーズと最も近いSEO対策で、あらゆるビジネスを加速させ、より良い社会の実現を目指す。
入社から5年間で100社以上のSEO対策に従事し、様々なジャンル・キーワードでの上位表示を実現。顧客目線での目標達成にコミットしたSEOコンサルティングが強み。

DOWNLOAD

資料ダウンロード

資料のイメージ画像

当社でご提供しているサービスの資料ダウンロードはこちらから。
SEOに課題を感じている方は、ぜひご覧になってください。

SEO診断の資料はこちら WEBサイト高速化の資料はこちら

CONTACT

お問い合わせ

大規模サイトにおけるSEO対策上の問題点を解消し、
集客の最大化を実現する相談役として
ぜひお気軽にご連絡ください。
経験豊富な技術者がSEO診断を行います。