WordPressサイトにWebP(ウェッピー)を対応する方法

WordPressサイトでWebP(ウェッピー)対応する方法

WebP(ウェッピー)とは?
メリットがあるなら実施方法も知りたいな。

このような悩みを解消します。

本記事の内容
  • WebP(ウェッピー)とは?
  • WebPのメリット・デメリット
  • WebPに変換する方法
  • WebPに関する懸念点の解消
筆者情報
筆者情報

当サイトの画像はWebP対応ずみです。

「WebPが良いって聞くけど、難しそうで放置してる」

新技術の導入って理解を深めたり、実施したりするのが億劫ですよね。

本記事ではそんなあなたに向けて、Googleが推奨するWebPの概要と実施方法をまとめて解説します。

読み終えて5分行動すれば、WebPの導入が可能です。

心配性の僕が書いたので、懸念点のケアもバッチリです。

目次

WebP(ウェッピー)とは?

Webp(ウェッピー)とは?

WebPとは、Googleが開発し導入を推奨している静止画像フォーマットです。

ファイルサイズが小さいことが特徴で、同等の画質でPNGより約26%、 JPGより約25〜34%軽くできるとGoogleが発表しています。

A new image format for the Web

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.

(Web用の新しい画像形式

WebPでロスレス圧縮(可逆圧縮)された画像は、PNGと比較してファイルサイズが26%小さくなります。またWebPで非可逆圧縮された画像は、JPEGの場合、同等のSSIM品質指標の画像よりも25〜34%サイズが小さくなります。)

出典:WebP|Google Developers

ページ表示速度が重視される昨今SEOにおいて、重要な役割を担うことは間違えありません。

他にもWebPは非可逆圧縮の画像でありながら透過も可能です。(JPGは透過画像非対応)

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

令和のサイトにおいて軽いは正義です。

WebPのデメリットは?

これだけメリットしか書かれていないと、デメリットが気になりますよね。

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

とはいえSafariも対応するなど対応は進んでおり、非対応の主要ブラウザはIEのみとなりました。

後述しますが、非対応ブラウザの場合はJPEGやPNG画像を表示してくれるので、画像が表示されないことはありません。

他にデメリットを上げるとしたら、古い画像編集ソフトに対応していないぐらいです。

WordPressサイトでWebPに変換する方法(たった5分で完了)

WebPの変換方法

WordPressサイトでWebPに変換するには、プラグイン「WebP Converter for Media」を使用するのが簡単です。

「WebP Converter for Media」を利用すれば、アップロード済みの画像を全てWebPに変換してくれるだけでなく、今後アップロードする画像も自動で変換してくれます。

インストール・設定の手順は以下の3ステップです。

STEP
WebP Converter for Mediaをインストール・有効化

まずは、WordPressにプラグインをインストール・有効化します。

WebP Converter for Media
プラグイン:WebP Converter for Media

プラグイン→新規追加→「WebP Converter for Media」検索→インストール→有効化

STEP
WebP Converter for Mediaを設定
STEP
STEP

以下の通りに設定することで、今後アップロードする画像を自動でWebPへ変換してくれます。

WebP 変換方法
WebP Converter for Media設定

①Image loading mode

画像の読み込みモードを設定します。

当サイトでは推奨の「via .htaccess」を選択しました。

②List of supported files extensions

チェックの入っているファイル形式の画像をWebPに対応します。

当サイトではJPEGとPNGを選択しました。

③List of supported directories

チェックの入っているディレクトリに保存されている画像をWebPに対応させます。

当サイトはthemesとuploadsを選択しました。

④Conversion method

画像の変換方法を選択します。

当サイトでは推奨の「GD」を選択しました。

⑤Images quality

生成されるWebPの画像品質です。

当サイトでは初期設定の85%に選択しました。

追加機能:Extra features

こちらは初期設定のままで問題ありません。

STEP
既存の画像を一括でWebPへ変換

最後に既にアップロード済みの画像をWebPへ一括変換します。

WebP アップロード済み画像を変換
WebP Converter for Media設定

Force convert all images againにチェックを入れ、『Regenerate All』をクリックすれば既にアップロード済みの画像もWebP対応がされます。

画像数によっては時間がかかります。
僕は1年半運営したサイトで15分ほどかかりました。

以上でWordPressサイトのWebP対応が完了です。

WebPへ変換した場合 既存画像はどうなるの?

WebPへ変換した場合、既存画像の行方が心配になりますよね。

安心してください、既存画像は「wp-content」内の「uploads」ディレクトリ内にちゃんと残っています。

WebP非対応のブラウザからアクセスがあった場合は、「uploads」ディレクトリ内にあるJPEGやPNGなどの画像が使用されます。

WebP画像は「uploads-webpc」というディレクトリに保存されており、アクセスするブラウザごとに出し分けてくれるイメージです。

何らかの理由でWebPやめたい!となっても安心ですね。

WebPへ変換しているか確認する方法

Webp 確認方法

WebPへの変換は「Chrome Developer Tool」で確認ができます。

  • Mac:option+command+I
  • Windows:F12

いずれもchromeブラウザ上で行う

WebP 確認方法
Chrome Developer ToolでWebPを確認
  1. Network
  2. Img
  3. Type

③Typeがwebpになっていれば、該当画像はWebP形式で配信されています。

まとめ:WordPressサイトにWebPを導入して表示速度を対策しよう

WebPを導入すると画像のファイルサイズが小さくなり、結果的に表示速度が向上します。

昨今SEOにおいて、表示速度の高速化は急務です。

表示速度が遅くなると直帰率・滞在時間の劣悪化により、サイトパフォーマンスが低下してしまいます。

そうならないためにも、WebPを含む表速度対策は行っていきましょう。

訪問してくれるユーザーのためにも高速化は大事です。
せっかくなら、快適に読んで欲しいですよね。

関連記事 画像SEO入門|画像検索で上位表示するためのポイントは6つ

関連記事 WordPressの有料テーマは買うべき?現役ブロガーが3つの優位性を紹介

WordPressサイトでWebP(ウェッピー)対応する方法

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる