ここを訪れた方の疑問が少しでも解決できればいいなと思ってます。
スポンサーリンク

画像をWebPに一括変換してWordPressを高速化する方法

WebPサムネイルWordPress
次世代フォーマットのWebPって最近よく聞くけど、どうすればいいの?
一つ一つ画像をWebPに変換するのは面倒くさい
WordPressのサイトをもっと高速で表示させたい
この記事にたどり着いたあなたはこんな悩みを抱えていませんか?
そんなあなたに今回は「WordPressサイトの画像を、次世代フォーマットのWebPに、一括で変換する方法」をご紹介します。
WordPressならプラグインを使って割とカンタンにできますので、サクッとWebPに変換してしまいましょう。

次世代画像フォーマットWebP(ウェッピー)

WebPロゴ

WebPとは、Googleが開発しているWeb向けの画像フォーマットで、Web上に掲載される画像のファイルサイズの圧縮を目的としています。

WebPで画像を圧縮すると、一般的に利用されているJPEG形式の画像と比べて、約25~34%近くデータ量が削減することが可能です。

このことでWebページ上での画像の読み込み速度が速くなり、Webページの読み込み速度を向上させることが出来ます。

しかも見た目的には、ほぼ変わりません(よーく見ると、ほんの少し画質が落ちてるかな?程度)。

綺麗な画像を紹介するサイトでなければ、ぜひ導入したいフォーマットです。

WebPに対応しているブラウザ

2019年5月現在、残念ながらすべてのブラウザが対応しているわけではありません。

特にApple系は全く対応しておらず、他に有名どころだとInternet Explorerも対応していません

しかしながら、今では多くの企業サイトでもWebPを使っているとの情報もあり、今後スタンダードなフォーマットになっていく可能性もあります。

今回紹介するWebP化する方法は、対応していないブラウザで閲覧すると元の画像(JPG・PNG)が表示されるので安心です。

WordPressはデフォルトでWebPに対応していない

これもWebPを導入するにあたって障害となる点です。

ですが、今から紹介する「EWWW Image Optimizer」というプラグインを使えばWebPをWordPressに対応させることが出来ます。

それでは「EWWW Image Optimizer」を使ってWordPressの画像をWebP化していきましょう。

「EWWW Image Optimizer」で画像を一括でWebP化

EWWW Image Optimizerロゴ

ここからは「EWWW Image Optimizer」の導入から設定方法、画像をWebP化する方法をご紹介します。

 

※ インストール前にWordPressのバックアップを取ろう。

新しいプラグインをインストールすると、たまに不具合が起こる可能性がありますので、いつでも復元できるようにしましょう。

\ バックアップ方法はこちらから /
WordPressをプラグインで簡単バックアップ&復元
WordPressのバックアップってどうやって取ればいいの? WordPressのバックアップは定期的に取っておいたほうがいいって聞くけど、実際にどうしたらいいのかよく分かりませんよね。 バックアップの方...

「EWWW Image Optimizer」のインスートールと有効化

まずは「EWWW Image Optimizer」をインストールしましょう。

WordPressの管理画面、左側メニューの「プラグイン」→「新規追加」を選択し、③の検索窓に「EWWW Image Optimizer」と入力します。

「EWWW Image Optimizer」が表示されたら「今すぐインストール」をクリック。

WordPressのプラグインを新規追加する画面

 

インストールが終わったら「有効化」をクリック。 EWWW Image Optimizerを有効化する画面

これで「EWWW Image Optimizer」のインストールと有効化は完了です。

EWWW Image Optimizerの設定方法

WordPressの管理画面、左側メニューの「設定」→「EWWW Image Optimizer」を選択。

WordPress管理画面右側メニュー

次に画面上のタブから「WebP」を選択し、「JPG,PNG から WebP」のチェックボックスにチェックを入れ、「変更を保存」をクリックします。

 

するとその下に下記の画像の部分が表示されます。

赤枠の部分をコピーし、「.htaccess」に追記をします。

このとき「リライトルールを挿入する」をクリックしても「.htaccess」に追記できるのですが、「.htaccess」の一番最後に追記され、うまく行かないことがあるためクリックしてはいけません。

「.htaccess」ファイルに追記

慣れていないと、ここが一番難しく感じるところかもしれません。

方法としては、

  • FTPソフトを使って「.htaccess」ファイルをアップロード
  • サーバーの管理画面から直接「.htaccess」ファイルを編集

このどちらかになります。

今回は「サーバーの管理画面から直接「.htaccess」ファイルを編集」する方法でご説明しましょう。

ぼっちは「FUTOKA」というレンタルサーバーを使っていますので、「FUTOKA」でのやり方で説明しますが、他のサーバーでもだいたい一緒かと思います。

「FUTOKA」で「.htaccess」ファイルを編集する方法

まずは「FUTOKA」のコントロールパネルにログインし、「サーバーパネル」にログインします。

FUTOKAのコントロールパネル

 

次に左側メニュー、「サイト」のグループ内にある「.Htaccess設定」をクリック。

FUTOKAサーバーパネル左側メニュー

 

次に「public html」をクリック。

.Htaccess設定画面1

 

編集したいドメイン名の右側の「編集」をクリック。.Htaccess設定画面2

 

すると下記の画面が表示されます。

ここの一番上に「EWWW Image Optimizer」の設定のときにコピーしたコードを貼り付けます。

.Htaccess設定画面3

 

①の赤枠の部分が貼り付けたコードです。

貼り付けたら②の「編集する(確認)」をクリックします。

.Htaccess設定画面4

 

確認画面が表示されるので、間違いが無ければ「編集する(確定)」をクリック。.Htaccess設定画面5

 

最後に「.htaccessの設定が完了しました」と表示されて、.htaccessの設定は完了です。

.Htaccess設定画面6

「EWWW Image Optimizer」にWebPが対応したか確認する

.htaccessの設定がうまくいっていれば、赤枠の部分が赤色の「PNG」から緑色の「WEBP」に変わります

EWWW Image OptimizerのWebP設定画面

これでWebP化の準備は完了しました。

画像をWebPに一括変換

ではここからはお待ちかね、WordPressにアップロードされているJPGやPNG などの画像をWebPに変換していきます。

まずはWordPress管理画面の左側メニューの「メディア」→「一括最適化」をクリック。

WordPress管理画面

 

次に「最適化されていない画像をスキャンする」をクリックします。

WordPressメディア、一括最適化

スキャンが終わったら「最適化を開始」をクリックすれば、WebPの一括変換が始まります。

画像の数が多いとそれなりに時間がかかりますので、終わるまでのんびり待ちましょう。

これからアップロードする画像はどうなるの?

今後アップロードする画像は「EWWW Image Optimizer」が自動的にWebP化してくれます

なので、毎回一括変換する必要はありません。

らくチンですね♪

WebPに変換されているか確認する

とりあえず一括でJPGやPNGの画像をWebPに変換しましたが、ホントに変換されているか確認してみましょう。

WordPressでWebP化されているか確認

WordPressの管理画面から「メディア」をクリックすると画像の一覧が表示されます。

そこを見ていただくと、しっかりと「WebP」と表記されてますね。

画像をダウンロードして確認

アップロード済みの画像をダウンロードしても確認することができます。

自分が運営しているWordPressサイトの画像を、ドラッグ&ドロップでデスクトップやフォルダにダウンロードしてみましょう

WebPをダウンロードしたフォルダそうすることで、拡張子が「.webp」になっていることが確認できます。

まとめ

いかがでしたでしょうか?

JPGやPNGなどの画像を、次世代フォーマットのWebPに変換すると聞くとなんだか大変そうな気がしてしまいますが、作業自体はそんなに難しくは無いかと思います。

画像のサイズが圧縮されたことでサイトの表示スピードが速くなり、サイトを見に来てくれた人々のストレス軽減にもつながることでしょう。

もちろんSEO的にも少し有利になると思います。

もしサイトの表示速度に不満のある方は、ぜひ試してみてください。

 

コメント

タイトルとURLをコピーしました