私も最近気づいたんですが、Safari（iOS14.2とmacOS 11 Big Sur以降）がWebPに対応していました。

こうなると、使わない手はありません。これを機にこれからブログに使う画像は、WebPに切り替えるべきですね。軽量でキレイなので、サイトの表示スピードが速くなります。

さっそく筆者もこのブログの画像をすべてWebPに変換したんですが、ちょっと苦労しました。

ということで今回は、WordPressのWebP化の手順と注意点を、備忘録を兼ねて解説していきます。

関連Webシェア世界第３位を誇るGenesis Frameworkとは
スポンサーリンク

WebPとは

本題に入る前に、おさらいをしておきましょう。

WebPとは、Googleが開発した次世代画像フォーマットのことで、拡張子「.webp」であらわされます。

PageSpeed Insightsの「次世代画像フォーマット」にも頻繁にでてきますよね。Googleゴリ推しの新しい画像形式です。

PageSpeed Insightsの結果画面

今までは対応しているブラウザが少なかったため、導入を先送りにしている人も多かったのですが、SafariがWebPフォーマットに対応したことを受けて一気に利用者が増えています。

WebP画像の効果

WebPフォーマット画像の最大の特徴は、高い圧縮率です。

Googleが行ったテストによると、WebP画像は従来のJPEGやPNGと比較しても画質を落とすことなく、かなりサイズを小さくすることに成功しています。

「かなり」とは具体的にこれぐらい。

  • JPEGと比べると、縮小率25％～34％アップ
  • PNGと比べると、縮小率26％アップ

各種テストの詳細は以下のリンクから確認できます。

  • JPEG（英語表記）
  • PNG（英語表記）

画質を落とすことなく圧縮できれば、それだけサーバーへの負担も少なくてすみますので、サイトの表示速度アップにつながります。

また表示速度が上がれば、ストレスなくサイトを閲覧できるようになりますので、PV数改善にもつながっていくわけです。

ちなみに筆者は、さまざまな形式のフォーマットを一本化できるところにも魅力を感じています。

これまでブログを運営していくなかで、さまざまなフォーマットの画像を扱ってきました。

  • 写真はJPEG
  • ロゴを含むイラストはGIF
  • 透過画像はPNG

各種フォーマットはすべてWebPに置き換えれるようになりますので、それぞれの形式に合わせてざまざまなツールを使う必要もなくなります。

WebP画像導入時の注意点

WebP画像導入時には、まだ対応していないブラウザやサイトがある点を踏まえておきましょう。

ブラウザがWebPに対応していないと、WebPフォーマットでアップした画像が表示されません。

ただし対応していないのは、MicrosoftのInternet ExplorerとKaiOSのブラウザの２つだけとなりました。

WebPフォーマット画像のブラウザ対応状況
サイト「Can I use…」より

同じMicrosoftでも、EdgeはGoogleのChromiumをベースに作られているためWebPに対応しています。

対応状況はこちらから随時確認できます。使い方は簡単で、一番上にWebP、HTML５などと入力すると、各種ブラウザの対応状況が表示されます。

次にサイトです。

たまに一部対応していないサイトがあります。

実はWordPressも例外ではありません。WordPressにWebP画像をアップロードしようとすると、こんな表示がでます。

WordPressにWebP画像をアップロードしようすると出てくるエラーメッセージ
WordPressWebP画像アップロードエラー

でも心配はいりません。

これは不正防止のフィルターがかかっているだけなので、ちょっとした設定を変更するだけで、利用できるようになります（のちほど詳しく解説します）。

このようにまだちょっとした障害がちょいちょいでてきますので、WebP画像を使用するときには、そのサイトがWebPにどこまで対応しているのか確認をするようにしてください。

WordPressでWebP画像を使う方法

お待たせしました。いよいよ本題に入ります。

ちなみにこのブログの画像はすべてWebPに変換しましたが、やはり予期せぬトラブルがいくつかありました。

その点も踏まえて、WebP化するための手順を解説していきます。

WordPressにWebP画像をアップロードできるようにする

WordPressにWebP画像をアップしようとしても、先述のとおりエラーが出てしまいますので、WebP画像をアップロードできるように設定します。

なお、プラグインを使ってWebP画像をアップロードできるようにならないかと、さまざまなプラグインを試してみましたが、ありませんでした。

すべてのプラグインを試したわけではないのでまだみつかっていないだけかもしれませんが、WordPressの仕様を考えるとそのようなプラグインは存在しない可能性があります。

どのみちプラグインを使うと、サイト自体が重くなってしまいますので、function.phpにコードを追記する方法がオススメです。

以下のコードをfunction.phpにコピペします。

//* WebP File Upload function add_file_types_to_uploads( $mimes ) {   $mimes['webp'] = 'image/webp';   return $mimes; } add_filter( 'upload_mimes', 'add_file_types_to_uploads' );

メディア一覧のWebPサムネイル画像を表示させる

せっかくアップしても、WebP画像はWordPressのメディア一覧に表示されません。

WordPressにアップロードしたWebP画像が表示されない
WordPressは標準ではWebP画像の一覧は表示されない

その対策として、以下のコードをfunction.phpにコピペしてください。

//* WebP image thumbnail display on media　Libraryfunction webp_is_displayable($result, $path) {    if ($result === false) {        $displayable_image_types = array( IMAGETYPE_WEBP );        $info = @getimagesize( $path );         if (empty($info)) {            $result = false;        } elseif (!in_array($info[2], $displayable_image_types)) {            $result = false;        } else {            $result = true;        }    }    return $result;}add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

コードを追加しても、既にアップロード済みの画像は表示されないままです。

このコードを追加後にアップロードしたWebP画像が表示されるようになりますので、コード追加前のWebP画像はライブラリから一旦削除し、再アップロードして下さい。

新しくアップロードする画像をすべてWebPに変換する

今後WordPressに新しくアップロードする画像は、すべてWebPフォーマットに変換してからにします。

オススメのツールは、Googleが開発しているWebツールSquooshです。

画像圧縮webツール「Squoosh」
Googleが開発した画像変換・圧縮ツール「Squoosh」

ツールの特徴をまとめると：

  • スマホ・タブレットでも利用できる
  • 変換フォーマットが豊富である（全10種類）
  • 画像の大きさも変更できる
  • リアルタイムで画質を確認しながら変換できる
  • ローカルで圧縮・変換できる
  • 色彩情報を変更できる

複数の画像を一括変更できないことぐらいしかデメリットがありません。神ツールです。

ブックマークしておいて、いつでも使えるようにしておきましょう。

アップロード済み画像をWebP形式へ最適化する

最後に、すでにアップロードした画像の扱いについてですが、新しく立ち上げたサイトならまだしも、そうでないなら画像の差し替えはかなりの時間を使います。

ここはプラグインを使ってサクッと最適化してしまいましょう。

対応プラグインは山のようにありましたので、いくつか試してみました。

それぞれ一長一短でしたが、個人的に気に入ったのがWebP Converter for Mediaでした。

WordPressプラグイン「WebP Convertor for Media」
WordPressプラグイン「WebP Convertor for Media」

理由は機能も設定もシンプルで初心者でも使いやすい点です。

もう少し詳しく解説していきますね。

まず、このプラグインでできることをまとめると：

  1. JPEG、GIF、PNGをWebPに変換できる
  2. どのディレクトリの画像を変換させるか選べる
  3. 変換方法を選べる
  4. 画像品質を選べる
  5. 元画像よりもWebP画像が容量大きくなってしまった場合はWebP画像を自動削除してくれる
  6. WebPのブラウザキャッシュ設定をしてくれる
  7. すでにアップロードしたすべての画像をWebPに変換してしまうこともできる

上記5～7の機能を無料で提供してくれるプラグインは、まずありません（そりゃあ、有料課金すればありますよ）。

使い方などは以下のサイトに詳しく書かれていますので、参考にしてみてください。

JunJunWeb.Net「サイトの画像をWebPに対応させるプラグインWebP Converter for Mediaが簡単設定でした！」

まとめ

今回の内容をまとめます。

画像縮小率が最大35％アップするWebPは、Googleが開発した次世代画像フォーマットで、Safariがいよいよ対応しました。

WordPressでWebP画像を使うには、アップロードおよびサムネイル表示させるための設定が必要になります。

圧縮・変換ツールはGoogleが開発したSquooshを使って、サイト表示スピードを速くしていきましょう。

それでは、また。
See you soon!