WordPressの使い方

【最短5分】WordPressで画像をWebPに変換する方法を解説!

スポンサーリンク

【最短5分】WordPressで画像をWebPに変換する方法を解説!

 

サイトの速度をあげようと思って、PageSpeedInsightsを使ってみたんだけど、WebPの変換が必要になって困っている。

 

こんな悩みを持った方に向けた記事になっています。

 

こんにちは、誠太です。

 

WebPってなんぞやと思いますよね。

 

僕も最初にWebP変換が必要だという要求が表示された時に、どうやったらいいのかわからず困惑しました。

 

しかし、実際やってみると手順自体は簡単で、最短5分ほどで既存の画像をWebPに変換することができるので、本記事を参考にご自身のサイトの画像を変換してもらえたらと思います。

 

手順としては

  • WordPressのプラグインをインストールする
  • プラグイン内で生成されるコードをコピペする
  • WordPressのプラグインを使って画像を変換する

これだけの手順で簡単に解決できるので、気を張らずにサクッと解決してしまいましょう!

 

【最短5分】WordPressで画像をWebPに変換する方法を解説!

【最短5分】WordPressで画像をWebPに変換する方法を解説!

 

それでは、実際にどのようにすればWordPressにある画像をWebPに変換できるのかを解説していきたいと思います。

 

WebPに変換するプラグイン『EWWW Image Optimizer』を導入

まずは、WebP変換に必要になるWordPressのプラグインを導入していきましょう。

 

『EWWW Image Optimizer』こちらのプラグインをインストールしていきます。

 

ewww_image_optimizer

 

プラグインのインストール方法に関しては、初心者の方向けに念の為書いておきますね!

  • WordPressサイドバー『プラグイン』
  • 新規追加
  • 画面右上の『プラグインの検索』にプラグイン名を入力
  • 検索結果の中からプラグインを見つけて『今すぐインストール』
  • インストールが完了後『有効化』をクリックでインストール完了

インストールをして有効化をすると、WordPressのダッシュボード内のサイドバーをみていただいて、設定の項目にマウスカーソルを当てると『EWWW Image Optimizer』の文字が確認できるはずです。

 

しっかりとプラグインの確認ができたら、『EWWW Image Optimizer』をクリックして設定画面へ移動します。

 

『EWWW Image Optimizer』の設定方法

次に『EWWW Image Optimizer』の設定方法についてです。

 

今回はWebPの変換方法についての設定解説をしていきたいと思うので、その他の設定方法に関しては省いて解説します。

 

『EWWW Image Optimizer』の設定画面を開くと、『WebP』というタブが確認できると思います。

 

その『WebP』のタブをクリックすると、下記のような画面に移動します。

 

 

設定は簡単で、『JPG,PNGからWebP』の隣にあるチェックボックスをクリックしてチェックを入れたらOKです。

 

その他の項目に関しては、チェックは入れなくてもOK。

 

『変更を保存』ボタンを押したらプラグイン自体の設定は完了するのですが、保存ボタンの下に注釈があって、何やら難しめのことが書いているはずです。

 

この部分は簡単に解説すると、『WebP変換を画像に適応させるにはたくさんの種類の方法がありますが、コードを使用して変換することがオススメです。』という意味になります。

 

このコードに関しては、事前に準備をしておきました。

コピペさえしてもらえればOKなので、そのまま使用してください。

 

.htaccessにWebP変換用のコードをコピペ

WebP変換に必要になるコードに関しては、こちらを使ってもらえたらOKです。

 

WebPにコピペするコード

#EWWW Image Optimizer|WebP変換コード
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
#/EWWW Image Optimizer|WebP変換コード

※末尾に空白が入っていないことを確認済み。

 

こちらのコードを『.htaccess』というファイルにコピペすればOKなのですが、方法としては大きく分けて2パターンで解決できます。

 

エックスサーバーの管理画面から.htaccessの追記

エックスサーバーを使用している方は、こちらの方法を使うのが一番簡単だと思います。

 

手順としてはこちら...

  • エックスサーバーのインフォパネルにログイン
  • ファイル管理を開く
  • ブログのドメインをクリック
  • public_htmlをクリック
  • .htaccessの隣にチェックを入れて編集ボタン
  • WebP変換用のコードを最下部にコピペ
  • 『保存する』ボタンをクリックして完了

こちらの手順を辿っていただければ、OKです。

 

一般的にこの流れで.htaccessに行き着くと思うのですが、サーバーの中のファイル配置によっては多少ズレが生じるかもしれません。

 

そのような場合でも、ドメインから.htaccessまでのルートは変わらないので、ドメイン名を見つけることができたらクリアしたも同然なので安心してください。

 

FTPソフトから追記

エックスサーバーを使用していない人は、FTPソフトからも.htaccessにアクセスすることができるので、こちらの方法を試してみてください。

  • FTPソフトにログイン
  • ドメイン名をクリック
  • public_htmlをクリック
  • .htaccessをダウンロード
  • テキストエディタで.htaccessを開く
  • 最下部にWebP変換用のコードをコピペ
  • 上書き保存をして、ドラッグ&ドロップしてサーバーにアップ

以上の手順で完了です。

 

.htaccessにWebP変換用のコードをコピペするときは注意!

ここでひとつ注意点なのですが、.htaccessを開く際にはテキストエディタを使用して開いてください。

 

というのも、.htaccessやfunction.phpにコードを追記するときなどは不要な空白などを入れるべきではありません。

 

事前にトラブルを防ぐためにテキストエディタを使用して不要なものがない状態で保存することがベストなので、必ずテキストエディタを使用して追記してサーバーにアップロードするようにしてください。

 

メモ帳は厳禁です。

 

テキストエディタはTeraPadが軽量でオススメです。

 

WordPressサイドバーのメディアから変換でOK

ここまで完了したら、あとはWordPressのサイドバーにあるメディアから『一括最適化』を行うだけで、作業完了です。

 

EWWWの一括最適化

 

画像の量によっては、ある程度時間がかかるかと思いますが、コーヒーでも飲んで一息つきながら待ちましょう。

 

完了の文字が表示されたらWebPに変換完了です。

 

WebPに画像が変換されているか確認する方法

WebPに画像が変換されているか確認する方法

 

この手順でWebPに変換できているはずなのですが、実際に確認することができないと不安だと思うので、念のためWebPの変換がしっかりとされているかどうかを確認する方法について紹介しておきます。

 

エックスサーバーを使用している場合の確認方法

エックスサーバーを使用している場合は、先ほど.htaccessを編集した時の手順と同じで、ファイル管理にアクセスします。

  • ファイル管理を開く
  • ドメインをクリック
  • public_htmlをクリック
  • wpもしくはwp-contentをクリック
  • uploadsをクリック
  • 最新の日付をクリック(例:2019)
  • 連番の中の最新をクリック(例:10)
  • 画像ファイルの末尾が.webpになっているか確認
  • .jpgと.webpの両方があればOK

先ほどの.htaccessにアクセスした時よりも少し奥の階層に入っていくことになるので複雑化してしまっていますが、上記手順の通りに進んでもらえたら大丈夫です。

 

『wpもしくはwp-contentをクリック』と書いたのは、SSL化させている場合とSSL化していない場合で分けています。

 

SSL化させている場合やWordPressをインストールする際にwpフォルダを作成してインストールした場合は『wp』というファイルがあるはずです。

 

もしSSL化していない場合でもwpフォルダを作成してWordPressをインストールしている場合もあるので、public_htmlをクリックした後に表示される状況で判断をしていただければわかりやすいと思います。

 

FTPを使用している場合の確認方法

FTPからアクセスする場合も基本的には、先ほど.htaccessにアクセスした方法と同じになります。

  • FTPソフトにログイン
  • ドメイン名をクリック
  • public_htmlをクリック
  • wpもしくはwp-contentをクリック
  • uploadsをクリック
  • 最新の日付をクリック(例:2019)
  • 連番の中の最新をクリック(例:10)
  • 画像ファイルの末尾が.webpになっているか確認
  • .jpgと.webpの両方があればOK

以上の手順で確認してもらえれば画像がWebPに変換されていることが確認できます。

 

万が一変換がうまくいっていないようであれば、再度手順通りに作業を進めて問題ないことを確認してみてください。

 

手順通りに進めてもうまくいかないといった場合には、下記の2つの項目にチェックを入れて一括最適化を実行してもらえれば、問題が解決するはずです。

 

EWWW一括最適化でWebP化されない場合

  • 最適化を強制
  • WebP Only

 

こちらで、再度WebPになっていない画像を見つけ出して変換することができます。

 

WordPressの画像をWebPに変換するのは必須

WordPressの画像をWebPに変換するのは必須

 

WordPressの画像をWebPに変換するのは、サイトのスピードを向上させるために必須になります。

 

サイトの表示速度が上昇し、SEO効果向上

意外とおろそかになってしまっている人が多いサイトの表示スピードですが、Googleのウェブマスター向けガイドラインでも重要視されています。

 

サイトの離脱率を下げることができますし、自サイトの検索結果のランキングにも影響が出るので、上位表示にも関わってくるので軽視はできません。

 

コンテンツ作りに注力するのも大切なことなのですが、サイト全体の快適さを保つこともユーザーに対しての配慮となるので、Googleからの評価が向上するきっかけになります。

 

WebP以外にもサイトのスピードを改善させるために必要になってくる部分があるので、こちらの記事を参考に更にサイトのスピードを向上できるように頑張ってみてください。

 

オススメ記事PageSpeedInsightsでモバイルだけ遅い人必見!速度が2倍上昇する?!

  • この記事を書いた人
  • 最新記事
誠太

誠太

理系の文系ブロガー。理系脳ではプログラミングを、文系脳ではブログの運営についてのHow toを話題にブログで紹介しています。年間で1,600万を売り上げた実績を元にマーケティングにも触れ、プログラミングの学習方法やブログでの稼ぎ方について情報発信中!

よく読まれている記事

1

  AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。実用特典ってどんな特典なの?   ご覧いただいてありがとうございます。 &nbs ...

2

スポンサーリンク   アフィリエイトに向いているASPってあるのかな?もし稼ぎやすいASPがあるなら登録したいんだけど、おすすめのASPってある?   こんな悩みに解決しようと思い ...

3

  誠太こんにちは、誠太です!   ブログを運営していると、自分の文章をもっと良くしたいと思ってしまうものではないでしょうか。   しかし、ただブログを書いているだけでは ...

4

  誠太こんにちは、誠太です。   WordPressのテーマは多数存在していますが、今回はその中でも人気なWordPressテーマ『The THOR(ザ・トール)』についてレビュ ...

5

  誠太こんにちは、誠太です。   WordPressのテーマはいまや沢山の種類がリリースされ、個人制作のものや企業がリリースしているものまで溢れかえるようになりました。 &nbs ...

-WordPressの使い方
-

Copyright© SEITALITY , 2020 All Rights Reserved.