暗号化された安全なメールアドレス

[WebP 最適化!] プラグイン EWWW Image Optimizer をインストールし設定する方法

EWWW Image Optimizer で画像を最適化
EWWW Image Optimizer で画像を最適化


WordPress のプラグイン EWWW Image Optimizerの画像最適化機能(圧縮やWebPへの変換)を使用することでページの表示速度を改善することができます。


困ったことに、わかりやすいコンテンツになるように挿入された複数の図解や画像は時としてウェブサイトが遅くなる主な要因となることです。


今回めざしているのは「画像(やさしいコンテンツ)」と「訪問者の快適(表示スピード)」を両立させることができれば言うことなしです!


期待していた結果が出たので記事にしてみました!

oscalこんな相談ならこのページで解決するよ!

ままちゃん
ままちゃん

HOW TO 記事を書いていたらあっという間に巻物かしらってくらいの記事になっちゃって、、、画像が入っていたりすると表示速度が遅くなっちゃうのよね~!

しんの
しんの

ままちゃん、画像の最適化は必須ですにゃり!

「アッ」それと・・・めんどうですが、
カスタマイズする前には必ずバックアップを取った上でおこないましょう!


前置きはこのくらいにして、それでは早速いきましょう~!



目次

EWWW Image Optimizer(画像圧縮 / 最適化)とは?

「EWWW Image Optimizer」とはなんですか?
EWWWImage Optimizerを使用すると、画像を最適化(小さく)しサイトを高速化することができます。

画像が小さくなることでサイト表示速度の改善が期待できます。サイト表示速度が改善できましたら今度は、ページ表示速度が改善されているかも確認してみましょう。
オスカル
オスカル

「EWWW Image Optimizer」で画像の最適化をしたらページの読み込みがはやくなりました!



EWWW Image Optimizer を使うと?

最適化で タテXヨコ 比率がかわりますか?

EWWW Image Optimizer の最適化で画像のタテ、ヨコ比率がかわると困ります!
EWWW Image Optimizer で画像を最適化(圧縮)したら、画像の「タテ x ヨコ」サイズは変わりませんが「画像のファイルサイズ(重さ)」が軽くなります。「画像のファイルサイズ(重さ)」が軽くなるとページの表示速度が早くなります。

       EWWW Image Optimizer で画像を最適化
        通常:EWWW Image Optimizer で画像を最適化


*ただし「基本タブ」で設定した「 画像サイズが1000ピクセル」で、アップロードした画像のサイズが 2000ピクセル だった場合には 画像画像の「タテ x ヨコ」サイズサイズが1000ピクセル に縮小されます。


*「画像サイズが1000ピクセル」以下の画像をアップロードした場合は画像の「タテ x ヨコ」サイズはかわりません。


既にアップロード済みの画像について

既にアップロード済みの画像を最適化はできますか?
はい、できます!「一括最適化」もしくは「手動で最適化」で最適化できます!


※個人的におすすめなのは、「手動で最適化」です。
※「一括最適化」をした後に画像が表示されなくなった経験があります。(私だけかもしれませんが)

WebP に変換できますか?

次世代フォーマットの WebP に変換できますか?
はい、できます! WebP を選択すると、サポートされているブラウザーでは「次世代フォーマットのWebP画像」が表示されます。

WebP Support

WebP is natively supported in Google Chrome, Firefox, Edge, the Opera browser, and by many other tools and software libraries.

WebPは、Google Chrome、Firefox、Edge、Operaブラウザ、およびその他の多くのツールやソフトウェアライブラリでネイティブにサポートされています。

引用元:Google developers WebP Support

▼下記のサイトでも最新情報を確認できます。



WebP に変換されているかを確認したい!

WebP で表示されているのかを調べる方法を教えてください。
「Google Chrome」の場合は「デベロッパーツール」の「Network」「img」で確認します。


「 Firefox 」の場合はページ上で右クリック「調査」「ネットワーク」「画像」で確認できます。

詳しくは下記の画像つき手順をご覧ください。



WebP で表示されているのかを調べる方法



「Google Chrome」で WebP に変換されているか?調べる方法

「Google Chrome」 で調べる方法

1. 図1参照:左上の角「① 三」⇒「② その他のツール」⇒「③ デベロッパーツール」と選択。

2. 図2参照: 表示された画面のいちばん上の「④ Network」⇒ 2段目の「⑤ img」を選択。

3. 3段目の「⑥ Type」のところに「webp」と表示されていたら適応されています。

デベロッパーツールの出し方
デベロッパーツールの出し方(図1)



WebP に変換されていることを確認
WebP に変換されていることを確認( 図2 )


「Firefox」で WebP に変換されているか調べる方法

「Firefox」で 調べる方法

1. ページ上で右クリック「調査」⇒「ネットワーク」⇒「画像」と選択。

2. 「タイプ」 のところに「webp」と表示されていたら適応されています。



「基本タブ」で WebP に変換されているか調べる方法


「EWWW Image Optimizer」の設定から「基本タブ」で「WebP ルールが正常に検証されました」と表示。

右端に「WebP」の緑のカードが表示されていれば反映しています。

WebPが反映している画面
WebPが反映している画面



EWWW Image Optimizer のインストール方法


プラグインを「新規追加」「有効化」する前には必ず「バックアップ」をとりましょう。

プラグインを有効化する前に必ずお読みください!
WordPress バックアップを取る簡単な方法(プラグイン不要)




「 EWWW Image Optimizer バージョン: 6.1.9 」での操作画面になります。

1.新規追加でプラグインを検索

「WordPress」にログインし「プラグイン」から「新規追加」を選択。

プラグインを新規追加
プラグインを新規追加


キーワードに「EWWW Image Optimizer」と入れて検索しましょう。

検索窓に「EWWW Image Optimizer」と入力する
検索窓に「EWWW Image Optimizer」と入力する



同じアイコンの「プラグイン」が表示されますので必ず「EWWW Image Optimizer」と確認し「今すぐインストール」を選択します

同じアイコンのプラグインがあるので町が若いようにしましょう
同じアイコンのプラグインがあるので町が若いようにしましょう



2.有効なサービスを選択

「有効化」の文字をクリックします。


有効化を選択しましょう
有効化を選択しましょう

「設定」の文字をクリックします。


プラグインの一覧で設定を選択します
プラグインの一覧でEWWW-Image-Optimizerをみつけて設定を選択します



3.「EWWW Image Optimizer」の初期設定をおこないましょう

  • 「サイトを最適化」
  • 「今は無料モードを選択する」にチェックをし「次」へ

サイトを最適化、無料モードを選択
サイトを最適化、無料モードを選択
  • メタデータを削除」スマホやデジカメで撮影すると望んでいなくても自動的に「画像の位置情報」「撮影機材の詳細」などの情報が画像に保存されている場合がありますので、「メタデータを削除」を選択し個人情報を守りましょう。

    iPhone (iOS 14.7.1 ) : 撮影時に位置情報を削除するには「設定」>「プライバシー」>「位置情報サービス」>「カメラ」⇒「なし」を選択すれば「写真や動画が撮影された場所をタグ付け」無しになります。 「なし」の設定にしていても「メタデータを削除」を選択しました。


    参考サイト:iOS/iPadOS のプライバシーと位置情報サービスについて
  • WebP 変換」を選択しました。( お好みで選択してください )
  • 「幅の上限」を「1000」と入力し「設定を保存」しました。

    *画像を「横幅」のみ制限したい場合は、「高さ」の上限を「0」に設定できます。
    *「2000ピクセルの画像」をアップロードした場合、自動的に「1000ピクセルに縮小される」ことになります。
メタデータを削除、WebP変換を選択
メタデータを削除、WebP変換を選択
  • 「完了」ボタンを押します。
完了ボタンを選択します
完了ボタンを選択します




4.「EWWW Image Optimizer」でEnable Ludicrous Mode の文字を選択



  • WebP の設定を行うために「プラグイン」から「設定」を選択します。
設定の文字を選択します
設定の文字を選択します
  • 基本タブ」で「Enable Ludicrous Mode 」の文字を選択すると、多くの設定タブが表示されます。
Enable Ludicrous Mode の文字を選択
Enable Ludicrous Mode の文字を選択



5.「EWWW Image Optimizer」基本タブの設定を確認

  • 「WebP」への変換を有効にするには「WebP変換」に「 V(チェック)」を入れます。
  • 「基本タブ」に表示される「書き換えルール」をコピーして「.htaccess」ファイルに書き加える必要があります。
  • 左下に「リライトルールを挿入する」というボタンがありますが、うまくいかなかったので手動で「書き換えルール」をコピーして「.htaccess」へ追加しました。
Web p に対応させる書き換えルールをコピーする
Web p に対応させる書き換えルールをコピーする(WebP 有効化前の画面)



「 EWWW Image Optimizer バージョン: 6.1.9 」の WebP ルールです。

書き換えコードをサーバーにある.htaccessへ書き加える
書き換えコードをサーバーにある.htaccessへ書き加える



重要「メタデータの削除」アップロードする写真の位置情報やカメラの設定や機種を特定できる情報を削除する設定です。

「画像のリサイズ」はご利用の WordPress テーマに合わせて調節しましょう。(横幅のみ1000 pixels に設定しました)

次世代フォーマット「WebP 変換」の設定が成功すれば緑色の「WEBP」カードが表示されます。

基本タブの設定とWeb P 設定が有効になった表示
基本タブの設定とWeb P 設定が有効になった表示



6.「EWWW Image Optimizer」リサイズタブの設定を確認

「既存の画像をリサイズ」「他の画像をリサイズ」を選択して「変更」を保存しました。

リサイズタブの設定を確認
リサイズタブの設定を確認



おめでとうございます!
「EWWW Image Optimizer」 の設定が完了しました!

次は「WebP」変換を選択した方へ「WetP ルール」を「.htaccess」 ファイル へ追加する方法です。





「WebP ルール」をコピーして「.htaccess」に書き加える方法

「.htaccess」ファイル の編集について

オスカル
オスカル

当サイトが利用しているレンタルサーバー mixhost さんで 「.htaccess」ファイルを編集する手順です!


  • 「cPanel」という「コントロールパネル(管理画面)」を採用しているレンタルサーバーさんなら基本的に同じ操作になります。





「設定したにもかかわらず」反映されていない場合に行う操作です。

「キャッシュの削除」作業を行ってから確認してくださいね!

  1. 「Google-Chrome」キャッシュと Cookie の消去
  2. 「Firefox」最近の履歴を消去する

① 本当に「WebP」反映されているか確認してみる

オスカル
オスカル

サーバーに保存されているファイルの編集がはじめての場合は無理せずに、日を改めてトライしてみてください。

ままちゃんは、1日目にできなくても3週間後にできたりすることを経験済みにゃり!


本当に反映されていないですか? 「.htaccess」へ「WebP ルール」を書き加える前に!

まずは、「WebPへ変換が有効になっているか?」確認しててみましょう。



↓ ↓ ↓ 反映されていなかったら 「.htaccess 」の編集操作をためす!



②「.htaccess」へ「WebP ルール」を 書き加える方法 (ミックスホストの cPanel から)

「基本タブ」に表示される「書き換えルール」をメモ帳にコピーし準備しておきましょう。

レンタルサーバー mixhost の「cPanel」にログイン

cPanel にログインします。

「ファイルマネージャ」を選択

cPanel にログインし「ファイルマネージャ」を選択します。

cPanel のファイルマネージャー
cPanel のファイルマネージャー



「非表示ファイルの表示」をする設定

「ファイルマネージャー右上角の設定」を選択「非表示ファイルの表示」を選択し「SAVE」します。

* 「.htaccess」ファイル は初期の状態で 非表示ファイル(隠しファイル)になっています。

非表示ファイルの表示
非表示ファイルの表示



「public_html」 を選択

public_html」を選択しましょう。

public-html を選択
public-html を選択



「ドメイン名」を選択しましょう

自分の「ドメイン名 ( 例: thechubbyprince.com )」 のフォルダを見つけて選択しましょう。

ドメイン名のフォルダを選択
ドメイン名のフォルダを選択



「.htaccess」ファイルを見つける

自分の「ドメイン名 ( 例: thechubbyprince.com )」をダブルクリックした中に表示された 「.htaccess」ファイル を見つけます。

htaccess-file を見つける
htaccess-file を見つける



「.htaccess」ファイルをダウンロード

オスカル
オスカル

なぜ?ダウンロードするかって?

もし編集後に、サイトが真っ白になったり正しく表示されなくなった場合に

元に戻せるように「編集前のファイルを保存(バックアップ)」するためにゃり!


編集する前に「バックアップ」の意味で「デスクトップ」や「マイドキュメント」へダウンロードしておきましょう。 ファイルをダブルクリックでもダウンロードが始まります。



「.htaccess」 ファイルの上で「右クリック」し「コンテキストメニュー(ずらりと並んだメニュー)」から 「Download」を選択。

htaccess をダウンロード
htaccess を編集する前にダウンロード



「.htaccess」ファイルを編集

編集するには「Edit」を選択しましょう。


「.htaccess」 ファイルの上で「右クリック」し「コンテキストメニュー」から「Edit」を選択。

htaccess を編集
htaccess を編集(コンテキストメニュー)



「.htaccess」ファイルに「書き換えルール」をはりつける

開いた「.htaccess」ファイルの「1番上」の行に入りつけます。

「 EWWW Image Optimizer バージョン: 6.1.9 」の WebPルールになりますので、あなたが追加した時点の「書き換えルール」を利用してください。

WebP ルール
<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
	RewriteCond %{REQUEST_FILENAME}\.webp -f
	RewriteCond %{QUERY_STRING} !type=original
	RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
	<FilesMatch "\.(jpe?g|png|gif)$">
		Header append Vary Accept
	</FilesMatch>
</IfModule>
AddType image/webp .webp



*当サイトの場合、既に「他のルール」を張り付けてあったので、「2番目」に張り付けました。

htaccess を編集


編集作業は以上になります。



サーバーの契約を見直す前に試してみてください!

思ったよりも簡単で初心者でも設定ができました!

サイトのスピードが重い、ページの表示が遅いと感じるあなたに!! 

特にそろそろレンタルサーバーの契約を見直そうか? サーバーのお引越しを検討する前に ひとまずプラグイン「EWWW Image Optimizer」 をおすすめします!

ままちゃん
ままちゃん

ポイントはゆっくり焦らずにステップを進めて設定することにつきます ♬


  1. 画像の最適化がクリックで簡単
  2. 次世代フォーマットの WebP 変換が使える
  3. 初心者でもできました!
  4. 特別な知識がいらない


  1. WebP ルールの書き加えは緊張しました!



当サイトがお世話になっているレンタルサーバーさんです!

mixhost tax ree海外在住者がレンタルサーバーmixhost (ミックスホスト)に申し込みWordPress始めました

2つの壁を乗り越え海外在住者がエックスサーバーの申し込み成功!

エックスサーバー申し込み2つの壁を乗り越え海外在住者がエックスサーバーの申し込み成功!

mage Credits : All screenshots by author, JUL 2021