【2023年】表示速度高速化プラグイン「EWWW Image Optimizer」の使い方

2023 2/02

2023年1月8日 2023年2月2日

URLをコピーしました！

「EWWW Image Optimizer」は画像を圧縮して表示速度を高速化してくれるプラグインです。
画像を１枚ずつ圧縮してアップロードしたりする手間が省けたり、今までアップロードした画像をまとめて圧縮することができます。

画像を圧縮、最適化することでサイトの表示速度も上がるので、サイトを見るユーザーのストレスも減ります。

こんな方におすすめ

投稿する画像を自動で圧縮したい
ページの読み込み速度が遅いので何とかしたい

この記事では「EWWW Image Optimizer」の導入から使い方まで解説します。

＼本サイトで使用中のWordpressテーマ／

インストール

まず、Wordpressに「EWWW Image Optimizer」をインストール・有効化しましょう。

STEP

インストール

①管理画面「プラグイン」→「新規追加」をクリックします
②検索窓に「EWWW Image Optimizer」と入力します。
③「EWWW Image Optimizer」が表示されたら、「今すぐインストール」をクリックします。

STEP

有効化

インストールが終了したら「有効化」をクリックします。

これで「EWWW Image Optimizer」のインストール・有効化が終了しました。

設定

「EWWW Image Optimizer」の設定をします。

管理画面から「設定」→「EWWW Image Optimizer」を開きましょう

初期設定

初めて「EWWW Image Optimizer」をインストールするときに、この画面が表示されます。
表示されなかった方は、この初期設定を飛ばしてください。

STEP

１ページ目

「サイトを高速化」「今は無料モードのままにする」を選択して「次」をクリックします。

ここは目標の選択なので「保守スペースを節約」にもチェックを付けて大丈夫です。
「Activate 5x more optimization and priority support」は有料サポートなのでチェックは付けません。

「in order to recommend best setting for your site, please select which goal(s) are most important.」
あなたのサイトに最適な設定を推奨するために、最も重要な目標を選択してください。

「Activate 5x more optimization and priority support」
5 倍の最適化と優先サポートを有効化

STEP

２ページ目

「メタデータを削除」「遅延読み込み」「WebP変換」にチェック
幅の上限はWEBの適正サイズは「1200px」に。
高さの上限は０にしておくと、幅の比率に合わせて縮小されます。

WordPressの適正な画像サイズ

アイキャッチ画像：横1200px×縦675px
記事中の画像：横640～800px×高さ360～450px

記事中の画像は使用してるテーマや設定によって変わります。

STEP

３ページ目

「完了」をクリックします。

これで初期設定は終了です。

設定

基本（Basic）

基本タブの下にある「Enable Ludicrous Mode」をクリックします。

「メタデータを削除」にチェック。
「画像のリサイズ」は、初期設定でも設定した幅の上限は1200px、高さの上限は0pxと入力します。

「変更を保存」をクリック。

変換（Convert）

「変換リンクを非表示」にチェック

「変更を保存」をクリック

WebP変換の設定

こちらは任意で設定して下さい。

WebP（ウェッピー）とは

WebP は、最新の画像形式で、ウェブ上の画像に対して優れたロスレスかつロスレスな圧縮を実現します。WebP を使用すると、ウェブマスターやウェブデベロッパーは、小さくてリッチな画像を作成してウェブの高速化を実現できます。

Google Developersより引用

EWWW Image OptimizerはWebpの設定を行うと、自動的にWebPに変換してくれます。

「基本」→「WebP変換」のチェックボックスをクリック

下に文章が現れます。「次へ」をクリック。

赤枠の部分のタグを使用しているサーバーの.htaccessの一番上に追加します。

<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_URI}.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