おにちゃん塾の商品一覧

WordPressサイトの画像をWebPに変換できるプラグインを紹介

WordPressサイトの画像をWebPに変換できるプラグインを紹介
URLをコピーする
URLをコピーしました!
想定読者

WordPressサイトの画像をWebPに変換する方法を詳しく知りたい。

本記事は、上記の方に向けて執筆しています。

おにちゃん

執筆者:おにちゃん塾を運営する僕が詳しく解説しています。

今回紹介する方法は、プラグイン×サーバを少しいじるので、これらを触るのが怖いという方はおにちゃん塾運営者が販売しているココナラ商品を購入してみてください。

お値段:5000円程度でWebP変換を行わせていただきます。

WordPressサイトの表示速度を高速化します WordPressのプロがあなたのサイトを高速化します。

おにちゃん塾での人気記事

目次

【WordPress】そもそもWebPとは

【WordPress】そもそもWebPとは
【WordPress】そもそもWebPとは

WebPに変換する前に、そもそもWebPとは何なのかについてを理解しておきましょう

WebPとは何なのか

  1. Googleが開発している次世代フォーマットの画像
  2. 現在、対応しているブラウザが少ない
  3. 圧縮度がかなり高いため、WordPressサイトを運営する方は必ず行うべき施策
  4. WebPはビットマップ画像なので、拡大すると劣化してしまう(SVGとは違う)
おにちゃん

WebPに変換することで、かなり表示速度を上げる事ができます。

おにちゃん塾でもPNG、JPEG画像をWebPに変換しています。そのおかげもあり、表示速度がかなり改善されました。


WordPressサイトの画像をWebPに変換する方法は何がおすすめなの

結論から言うと、プラグインを使った方法が一番おすすめです。

他にも、方法はあるのですが、初心者には難易度が高い+複雑なのであまりおすすめしません。

おにちゃん

おにちゃん塾もプラグインを導入して、WordPressサイトの画像をWebPに変換しています。


WordPressサイトの画像をWebP変換するのにはプラグインがおすすめです。

WordPressサイトの画像をWebP変換するのにはプラグインがおすすめです。

WebP変換する際に使用するプラグインはEWWWww Image Optimizerです。

EWWW Image Optimizerのインストールがまだ完了していない方は下記の記事を参考にしてみてください。


WordPressのWebP変換手順1:初期設定をしよう

まずは、WordPressの管理画面<プラグイン一覧<EWWWww Image Optimizerへと移動してください。

WordPressサイトをWebPに変換する
WordPressサイトをWebPに変換する

WebP変換という項目がありますので、そちらのボタンをクリックしましょう。

おにちゃん

チェックボックスにチェックを入れると、下記の画面が表示されるはずです。

WordPressでのWebP配信方法
WordPressでのWebP配信方法

こちらに表示されているコードをコピーしてレンタル−サーバに貼り付けていきます。


WordPressのWebP変換手順2:.htaccesファイルに追記する

WordPressサイトの画像をWebPに変換する手順2は『.htaccesファイルに追記する』ことです。

おにちゃん塾ではエックスサーバーとコノハでの経験があるので、今回はその2つのみを解説します。

おにちゃん塾が経験しているサーバー

  • エックスサーバ
  • コノハサーバー


WordPressサイトの画像をWebPに変換:エックスサーバー

まずはエックサーバでWebP変換について解説していきます。

エックスサーバーの管理画面へ行き、サーバー関連の情報が掲載されているページへ移動してください。

エックスサーバーでWebPに変換する

.htacces編集と書かれている部分をクリックし、編集画面へ行きましょう。

この下にコピーした内容を貼り付ける

Endの下記部分に先程コピーしたコードを貼りつけましょう。

Endの上部分には色々書いてありますので、その部分は触れないようにしましょう。

WordPressWebPに必要なコードを貼り付ける
おにちゃん

このように貼り付けられた方は手順2は完了です。
手順3へと行きましょう。


WordPressサイトの画像をWebPに変換:コノハサーバー

コノハサーバーでのWebP変換に変換する方法を解説していきます。

コノハサーバーの管理画面へと行き、サイト管理<応用設定<.htaccesへと移動しましょう。

WordPress WebPに必要なコードを貼り付ける

先程のコードを貼り付けるだけで、一括変換に必要な初期設定は完了です。


WordPressのWebP変換手順3:アップロード済みの画像をWebPに変換する

一度、EWWWww Image Optimizerのプラグイン画面へと行き、下記の画像のように配信がWebpに変換されているかを確認しましょう。

WordPressサイトのWebP対応完了
おにちゃん

上記画像のようになっていれば、手順1と2が無事に成功していることを意味しています。

WordPress管理画面<メディア<一括最適化へと行きましょう。

WordPressサイトの画像をWebPに変換する
  1. 最適化を強制:チェック
    スキャン済みの画像は自動でスキップしたいかたは不要
  2. WebPのみ:チェック
    ここは必ずチェックするようにしましょう。

これにてWordPressサイトの画像をWebPに変換する方法はおしまいです。


WordPressサイトの画像がWebP変換されているかをチェックしよう

WordPressサイトの画像がWebP変換されているかどうかを調べるには「Chromeの検証機能」が必要です。

その他のツール<デベロッパーツールの順にクリックしてください。

検証ツールにあるNetworkをクリックすると下記のような画面が表示されます。

WordPressサイトがWebP対応できているかの確認

TypeにWebPと表示されていれば、今回の作業は成功です。

キャッシュが残っていると、変更されていない場合がありますので、確認する際はキャッシュをクリアにしてから確認しましょう。


まとめ:WordPressサイトの画像をWebPに変換する方法

まとめ:WordPressサイトの画像をWebPに変換する方法

ここまでで『WordPressサイトの画像をWebPに変換できるプラグインを紹介』の解説は以上です。

おにちゃん

役立つプラグインについてもっと知りたい方は下記の記事をご覧ください。


WordPressサイトの画像をWebP変換する以外の高速化手順

WordPressの高速化に必要なのはWebP変換以外に、ソースコードの圧縮が挙げられます。

下記の記事で、表示スピードを上げるためのプラグインを紹介していますので、ぜひ参考にしてみてください。


本格的に表示速度を上げたい方は下記の記事を参考にしてみてください。

おにちゃん塾がWordPress高速化の案件で行う施策について紹介しています。


WordPressサイトで使えるプラグイン一覧

WordPressサイトの画像をWebPに変換できるプラグインを紹介

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる