WebP（ウェッピー）とは？
メリットがあるなら実施方法も知りたいな。
このような悩みを解消します。
- WebP（ウェッピー）とは？
- WebPのメリット・デメリット
- WebPに変換する方法
- WebPに関する懸念点の解消
「WebPが良いって聞くけど、難しそうで放置してる」
新技術の導入って理解を深めたり、実施したりするのが億劫ですよね。
本記事ではそんなあなたに向けて、Googleが推奨するWebPの概要と実施方法をまとめて解説します。
読み終えて5分行動すれば、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分で完了）
WordPressサイトでWebPに変換するには、プラグイン「WebP Converter for Media」を使用するのが簡単です。
「WebP Converter for Media」を利用すれば、アップロード済みの画像を全てWebPに変換してくれるだけでなく、今後アップロードする画像も自動で変換してくれます。
インストール・設定の手順は以下の3ステップです。
まずは、WordPressにプラグインをインストール・有効化します。
プラグイン→新規追加→「WebP Converter for Media」検索→インストール→有効化
以下の通りに設定することで、今後アップロードする画像を自動でWebPへ変換してくれます。
①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
こちらは初期設定のままで問題ありません。
最後に既にアップロード済みの画像をWebPへ一括変換します。
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への変換は「Chrome Developer Tool」で確認ができます。
- Mac：option＋command＋I
- Windows：F12
いずれもchromeブラウザ上で行う
- Network
- Img
- Type
③Typeがwebpになっていれば、該当画像はWebP形式で配信されています。
まとめ：WordPressサイトにWebPを導入して表示速度を対策しよう
WebPを導入すると画像のファイルサイズが小さくなり、結果的に表示速度が向上します。
昨今SEOにおいて、表示速度の高速化は急務です。
表示速度が遅くなると直帰率・滞在時間の劣悪化により、サイトパフォーマンスが低下してしまいます。
そうならないためにも、WebPを含む表速度対策は行っていきましょう。
訪問してくれるユーザーのためにも高速化は大事です。
せっかくなら、快適に読んで欲しいですよね。
