WordPressでWebP画像に変換・対応させる3つの方法【WebP画像】
※本ページにはプロモーションが含まれている場合があります。
・WordPressでWebP画像を使う方法を知りたい
・サイトを高速化させてSEO対策に役立てたい
・自分に合ったベストな方法を知りたい
・そもそもWebPって何？
本記事の内容
- WebPについて
- WordPressでWebP画像を使う方法
┗プラグインあり・なしどちらも解説 - WebP未対応のブラウザにも画像を表示させる方法
本記事を読むと、WordPressをWeP画像に対応させてサイトを高速化する方法がわかります。
本記事の信頼性
- ライター100名以上の組織の法人を経営→株式譲渡
- 立ち上げから半年で月間1,000万PVを達成
- 1年で月間1200万PVを達成
- 年商約1億円を達成
- 法人向けコンサル1社あたり月額60~100万円
- PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数
>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】
＼ 月間1300万PVのプロが解説 ／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓
>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！
WebPとは
Googleが推奨する次世代フォーマットの画像
「WebP(ウェッピー)」とはGoogleも推奨している画像の次世代フォーマットの1つです。
JPEGやPNGなどの従来の画像に比べて、画質を落とさずデータ容量を大幅に小さくすることができるので、ページの表示速度を大幅に改善できます。
サイトの表示速度を計測するツールであるPageSpeed Insightsでも、スピードを改善するための改善点の1つとして以下のようにWebPが推奨されています。
>> PageSpeed Insights
次世代フォーマットには、WebPを含めて他にも以下のものがありますが、ブログでSEO対策のために画像を最適化するならWebP対応だけしておけばOKです。
- JPEG2000
- JPG XR
- WebP
WebP画像による効果
WebPの画像のメリットは画質を落とさずに大幅に画像を圧縮できることです。
サイトの表示速度が速くなり、
- ユーザーが離脱しにくく、滞在時間や回遊率が上がり売上にもつながる
- Googleから評価されて検索順位が上がりやすい
などなどブログを運営する上ではとっても大事なポイント。
「大幅」とは具体的にどれくらい圧縮されるのかというところですが、
- JPEG：WebPにすると25%~34%圧縮
- PNG：WebPにすると23%圧縮
というデータがあるようです。
参考：>> WebPの圧縮率：JPEG：
参考：>> WebPの圧縮率：PNG
また、WebPの画像は通常のJPEG画像だけでなく
- GIFのアニメーション画像
- PNGの透過画像
などにも対応していて全てWebPに圧縮できます。
WebP画像の注意点
注意点①：WebPに未対応のブラウザがある
WebPは次世代フォーマットということもあり、まだWebPに対応していないブラウザがあります。
最近Safariも対応が完了して、対応していないブラウザはInternet ExplorerとKaiOSの2つだけですが、
他のブラウザでもバージョンによっては対応していない可能性があるので注意が必要です。
>> WebP image format – Can I use
各ブラウザのWebPへの対応状況は上の「WebP image format – Can I use」で確認できます。
なお、ユーザーのブラウザに合わせて画像を自動で使い分けるための対策は、この記事の後半の「WebP未対応のブラウザにも画像を表示させる方法」の見出しで解説します。
注意点②：WordPress 5.8より前のバージョンはWebPに未対応
WordPressでもWebPに対応したのは2021年7月リリースの「WordPress 5.8」からで、今まではWebPに対応していませんでした。
WebPの画像をアップロードしようとすると、、、
上の画像のようにエラーが表示されます。
お使いのWordPressのバージョンに合わせて、WebPに対応させる方法を解説するのでご安心ください。
使用中のバージョンがWordPress 5.8よりも古い場合
WordPress 5.8より古い場合はWebP画像をアップロードしてもエラーが表示されるので、
次の章「WordPressでWebP画像を使う3つの方法：新規画像」で解説する3つの方法に従って進めてください。
使用中のバージョンWordPress 5.8以降の場合
WordPress 5.8以降の場合はWordPressにWebP画像をアップロードしてもエラーが起こらないので、
以下のどちらかの方法でWebPを使いましょう。
- 画像をWebPに変換してからアップロードする
→方法①の「手順1：「Squoosh」で画像をWebPに変換する」の見出しを参考 - WebPに画像を変換するプラグインを使う
→「方法③プラグインで自動でWebPに変換する」の見出しを参考
WordPressでWebP画像を使う3つの方法：新規画像
WordPressでWebP画像を使うには、以下の3つの方法があります。
- 方法①WebPに変換してFTPでアップロードする
- 方法②function.phpを編集してWordPressをWebPに対応させる
- 方法③プラグインで自動でWebPに変換する
方法①と方法②は、先に画像をWebPに変換してからWordPressにアップロードする方法で、プラグインが不要です。
方法③は、JPEGやPNGなどの画像をアップロードすると自動でWebPに変換してくれるプラグインを使用します。
方法①WebPに変換してFTPでアップロードする
この方法では、以下の手順で進めます。
- 「Squoosh」で画像をWebPに変換する
- WordPressのメディアライブラリをWebPに対応させる
- FTPでWebP画像をアップロードする
- 【補足】プラグイン「WP Add Mime Types」でアップロードする方法も
手順1：「Squoosh」で画像をWebPに変換する
まずはアップロードしたい画像を「Squoosh」というサイトでWebPに変換します。
>> Squoosh
SquooshとはGoogleが提供しているサービスで、
- 画像の大きさも変更できる
- スマホでも利用できる
- 圧縮後の画質を確認しながら変換できる
などなどとても便利なツールです。
>> Googleの画像圧縮アプリSquooshが便利！使い方を画像付きで解説！
有名どころでは「WEBP変換ツール – SYNCER」というサイトもありますが、「Squoosh」がおすすめです。
という手順ですぐに変換できます。
Squooshの詳しい使い方やその他の機能は以下の記事で解説しています。
>> Googleの画像圧縮アプリSquooshが便利！使い方を画像付きで解説！
手順2：WordPressのメディアライブラリをWebPに対応させる
次はWordPressのメディアライブラリをWebPに対応させます。
この手順を踏まないと、次の手順でWordPressにWebPをアップロードしても、、、
上の画像のようにWebPの画像が表示されません。
WordPressの管理画面の「外観」→「テーマエディター」からfunction.phpを開いて、以下のコードを貼り付けて保存するだけでこの手順は完了です。
// メディアライブラリでWebP画像を表示する
function display_webp_in_library($result, $path) {
if ($result === false) {
$display_image_types = array( IMAGETYPE_WEBP );
$info = @getimagesize( $path );
if (empty($info)) {
$result = false;
} elseif (!in_array($info[2], $display_image_types)) {
$result = false;
} else {
$result = true;
}
}
return $result;
}
add_filter('file_is_displayable_image', 'display_webp_in_library', 10, 2)function.phpを編集する前はバックアップをとっておくと安心です。WordPressのバックアップ方法は以下の記事で解説しています。
手順3：FTPでWebP画像をアップロードする
手順2でメディアライブラリのWebpへの対応は完了しましたが、通常の方法で画像をアップロードすると以下のようなエラーが出ます。
なので、サイトのサーバーにFTP接続して
の画像フォルダに直接アップロードしましょう。
これでWebPのアップロードが完了なので、あとは通常の画像と同じように記事に挿入して使えます。
【補足】プラグイン「WP Add Mime Types」でアップロードする方法も
FTP接続するのが面倒という方は、WebPをアップロードできるようにしてくれるプラグイン「WP Add Mime Types」を使うことで、WebPを通常通りにアップロードできるようになります。
ただ、どうせプラグインを使うなら「方法③プラグインで自動でWebPに変換する」の方法がおすすめです。
方法②function.phpを編集してWordPressをWebPに対応させる
方法②は、function.phpを編集することでWordPressにWebP画像をアップロードできるようにする方法です。
以下の手順で進めます。
- 「Squoosh」で画像をWebPに変換する
- WordPressのメディアライブラリをWebPに対応させる
- function.phpを編集してWebP画像をアップロードできるようにする
- WebP画像をアップロードする
なお、手順1と手順2までは、方法①と同じなので方法①の手順1と手順2を参照ください。
手順1：「Squoosh」で画像をWebPに変換する
まずはアップロードしたい画像をWebPに変換します。
やり方は方法①の「手順1：「Squoosh」で画像をWebPに変換する」を参照。
>> Googleの画像圧縮アプリSquooshが便利！使い方を画像付きで解説！
手順2：WordPressのメディアライブラリをWebPに対応させる
上の画像のように、メディアライブラリではWebP画像が表示されないので、表示されるようにします。
やり方は方法①の「手順2：WordPressのメディアライブラリをWebPに対応させる」を参照。
手順3：function.phpを編集してWebP画像をアップロードできるようにする
WordPressにWebP画像をアップロードすると
このようなエラーが出るので、アップロードできるようにします。
WordPressの管理画面の「外観」→「テーマエディター」からfunction.phpを開き、
以下のコードを貼り付けて保存しましょう。
// WebP画像をアップロードできるようにする
function add_mime_types_to_upload( $mimes ) {
$mimes['webp'] = 'image/webp';
return $mimes;
}
add_filter( 'upload_mimes', 'add_mime_types_to_upload' );これだけで完了です。
WebP画像をアップロードできるようになっているので、次の手順に進みます。
function.phpを編集する前にはWordPressのバックアップをとっておくのがおすすめです。以下の記事を参考に数分でバックアップを取れます。
手順4：WebP画像をアップロードする
あとは、手順1でWebPに変換した画像を、通常の画像と同じようにWordPressにアップロードするだけです。
アップロードして画像のフォーマットを確認すると、、、
ファイルタイプが「image/webp」になっています。
ファイル名の拡張子も「.webp」になっています。
方法③プラグインで自動でWebPに変換する
3つ目の方法は、WordPressプラグインを使ってPNGやJPEGの画像をWebPに変換する方法です。
- プラグインを導入して設定するだけなのでとても簡単
- 既にアップロード済みの画像の変換もできる
などのメリットがあります。
WebPに画像を変換できるプラグイン一覧
WebPに変換できるWordPressプラグインは以下のようにたくさん見つかります。
この中でも最もおすすめなEWWW Image Optimizerでの方法を解説します。
EWWW Image Optimizerでの変換手順
EWWW Image OptimizerはWebPへの変換だけでなく
- 画像を圧縮
- 画像をリサイズ
- 画像の遅延読み込みによる表示速度の改善
などなど、WebP画像の最適化だけでなく表示速度の改善もしてくれる素晴らしいプラグインです。
SEO対策のためにページの表示速度を改善したいなら是非入れておきたいプラグインです。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
EWWW Image OptimizerでWebPに変換する手順
EWWW Image OptimizerでWebPに変換するには、まずはEWWW Image Optimizerの設定画面を開きます。
EWWW Image OptimizerでWebPに変換する詳細な手順や操作方法は以下の記事で画像付きで詳しく解説しています。
>> 【画像付き】EWWW Image OptimizerでWebP画像への変換を設定する方法
WebP以外の基本設定などは以下の記事で詳しく解説しています。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
設定画面を下の方にスクロールすると「WebP変換」という項目があるのでチェックを入れます。
すると次の画像のように「WebPの配信方法」という項目とコードが表示されるので
コードを全てコピーします。
コピーしたコードを「.htaccess」に貼り付ければWebPのための設定は完了です。
「リライトルールを挿入」をクリックすることで「.htaccess」に自動でコードを追加することもできますが、不具合が起こる可能性があるので自分で手動で「.htaccess」に追記しましょう。
「.htaccess」を編集する前は以下の記事を参考にWordPressのバックアップを取っておくのがおすすめです。
>> 【2021年最新】BackWPupの正しい設定方法と使い方：自動バックアッププラグイン【WordPress】
WebPの設定が完了すると画像のように緑のマークが表示されます。
あとは、通常の方法で画像をアップロードすれば自動でWebPに変換されます。
EWWW Image OptimizerでWebP画像に変換するための詳細な方法や手順は以下の記事で詳しく解説しています。
>> 【画像付き】EWWW Image OptimizerでWebP画像への変換を設定する方法
WordPressでWebP画像を使う方法：アップロード済みの画像
続いて、既にWordPressにアップロードしてある画像をWebPに変換するための方法を解説します。
方法①WebP画像をアップロードし直す
プラグインを使わない場合は既存の画像を変換できないので、新しくWebPの画像をアップロードし直すことになります。
既存の画像がたくさんある場合は現実的な方法ではないので、プラグインを使うのがおすすめです。
方法②プラグインで画像を変換する
プラグインを使えば既存の画像が数千枚以上でも一括でWebPに変換できます。
プラグインで一括でWebPに変換する方法は以下の記事で詳しく解説しています。
>> 【画像付き】EWWW Image OptimizerでWebP画像への変換を設定する方法
WordPressの画像がWebPで表示されているか確認する方法
WordPressブログのページを開き、表示された画像をドラッグ&ドロップでダウンロードすると拡張子が「.webp」になっているはずです。
画像を右クリックでダウンロードしたり、「新しいタブで画像を開く」などで確認した場合はjpgやpngのアドレスになってることもあるので、ドラッグ&ドロップでダウンロードして確認するのがおすすめです。
WebP未対応のブラウザにも画像を表示させる方法
今回ご紹介した方法で、WordPressでWebPを使うことができますが、ユーザーのブラウザによってはWebPに対応していない場合もあります。
なのでWebP未対応のブラウザを使っているユーザーにはJPEGやPNGの画像を表示させるための設定をしておきましょう。
<picture>タグを使う
やり方はとっても簡単で、画像を挿入するときに以下のコードを使うだけです。
<picture>
<source type="image/webp" srcset="Webp画像のURL">
<img src="JPGやPNG画像のURL" alt="任意に設定">
</picture>ブラウザがWebP対応している場合は指定したWebP画像を表示し、WebP未対応のブラウザの場合はimgタグで指定した画像が表示されるようになります。
注意点：AMP対応している場合<picture>タグは使えない
1つ注意が必要なのが、サイト高速化のために「AMP」を利用している場合はpictureタグを使うことができません。
なのでAMPを使っている場合は
- pictureタグを使わずにWebP画像のみにする
- pictureタグを使わずにWebP画像のみにするWebP画像を使わない
のどちらかになりますが、SEOの目線ではpictureタグを使わずにWebP画像のみにするのが良さそうです。
WordPressの画像はWebPにして高速化しよう！！
WordPressでWebP画像を使う方法を解説しました。
WebPはGoogleが推奨していることもあり、SEOのためにもサイトを高速化させるためにもとても重要です。
ユーザーの滞在時間や回遊率が伸びて売上も上がりやすくなるので
この機会にWebP画像への対応をしておきましょう。
WebP対応だけでなく画像の圧縮や最適化でサイトを速くしてくれるプラグインEWWW Image Optimizerについては以下の記事で解説しています。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
EWWW Image OptimizerでWebPに対応させるための具体的な方法は以下の記事で詳しく解説しています。
>> 【画像付き】EWWW Image OptimizerでWebP画像への変換を設定する方法
サイト高速化のためには、ファイルを最適化して高速化してくれる以下のプラグインもおすすめです。
>> 【2021年最新】Autoptimizeの設定方法と使い方：コード最適化プラグイン【WordPress】
Googleが提供する画像変換・圧縮アプリのSquuoshでは画質を落とさずに90%前後も画像を圧縮できることも多いので、こちらもおすすめです。
>> Googleの画像圧縮アプリSquooshが便利！使い方を画像付きで解説！
公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。
LINE参加者の声
400名が以上参加中！無料で読めます♪
＼ 最短で収益化 ／
