EWWW Image Optimizerの使い方と設定について

PR　当サイトではアフィリエイト広告を利用しています

ワードプレス

2023年11月30日2024年4月20日

こんにちは、みよし之です。

今回は、EWWW Image Optimizerという画像を圧縮できるプラグインについて記事を書きました。

画像をブログにアップロードする際、自動的にファイルを圧縮してくれるので、画像をたくさん使う人にはおすすめです。

アップロードした後のファイルサイズが気になる・・・

ファイルサイズが大きいとサイトの表示速度にも影響を与える可能性があります。

そうかといって、手間がかかるのは嫌ですよね。

EWWW Image Optimizerには、次のような特徴があります。

無料でも高機能
アップロードするだけで画像を自動的に圧縮
メタデータの削除
画像のリサイズ
次世代の形式Webpによる配信

ここでは、EWWW Image Optimizerの使い方や設定、注意点について説明しています。

ただし、プラグインの導入となります。

不具合などが起こる可能性もありますので、事前にバックアップを取っておきましょう。

なお、当サイトはエックスサーバーを使用しています。

エックスサーバーにはXPageSpeed設定があり、画像最適化や画像遅延読み込みなどの設定をすることができます。

機能の重複なども確認しておくといいかもしれません。

目次 [ close ]

EWWW Image Optimizerの効果について

ここでは、EWWW Image Optimizerを使うと、どれくらい画像が圧縮されるのかについて説明します。

なお、画像をアップロードする前に、適切なサイズにしておくとファイルサイズを小さくすることができます。

適切なサイズとは何かが気になる人は、こちらをご覧ください。

pxは適切にサイズ変更

ブログにアップロードする画像！サイズやファイルサイズについて

こんにちは、みよし之です。今回は、Cocoonにおいて画像のサイズや横幅・縦幅について記事を書いてみました。ブログに画像を…

2023年8月26日 2024年4月20日

ここでは、EWWW Image Optimizerの画像のリサイズを1024pxに設定している状況で説明します。

元の画像のピクセル数
元の画像のファイルサイズ
メディアライブラリのファイルサイズ（サイズ）
Webpで最適化されたファイルサイズ

3840×2160px

2.44MB
89KB（1024×576px）
49.4KB

1024×576px

239KB
235KB（1024×576px）
57.2KB

450×253px

57.4KB
53KB（450×253px）
12.9KB

今回試してみた画像は、このようになりました。アップロードする画像にもよりますのでご注意ください。

画像のリサイズとは、設定しているサイズより大きいものをアップロードしても自動的に設定したサイズに変更されるということです。

そのため、写真などの画像を普通にアップロードすると、自動的にリサイズされ、Webpで最適化されるようになります。

2.44MB 49.4KB

これだと、アップロードするだけなので楽ですよね。

一方で、注意しておきたいことは、2カラムや３カラムに画像をアップロードする場合です。

そのまま画像をアップロードした場合と画像サイズを適切にした場合とでは、大きな差があります。

49.4KB 12.9KB

多少、手間がかかりますが、このような違いが出てきます。

私の場合、画像の縮小はGIMPを使っています。気になる方は、こちらをどうぞ。

画像の縮小は簡単

GIMPの使い方について！基本操作を学ぼう

こんにちは、みよし之です。今回は、GIMPの使い方について記事を書きました。 GIMPって何？　　　　　　　　　　　　　　　 GI…

2023年11月21日 2024年4月20日

EWWW Image Optimizerをダウンロードしよう

それでは、EWWW Image Optimizerをダウンロードしてみましょう。

なお、EWWW Image Optimizerは無料で使うことができます。有料版もありますが、無料でも十分に価値があるプラグインです。

ダウンロードの仕方は、

ワードプレス管理画面左側にあるプラグイン新規プラグインを追加右上ある検索にEWWWと入力
今すぐインストール有効化

EWWW Image Optimizerの設定について

ここでは、ダウンロードした後の設定について説明します。

有効化した後は、設定を開きます。

画面上部に基本・サポート・貢献しか表示されていない人は、その下にあるLudicrous Modeをクリックしてください。

基本・ローカル・高度な設定・リサイズ・変換・上書き・サポート・貢献

このような表示に変わります。

基本の項目設定について

基本の項目では、次の場所を確認します。

メタデータを削除にチェックを入れる
画像のリサイズ幅の上限を入力する
幅は1200がおすすめ
高さは0でOK
設定した数字以上の画像がアップロードされると設定した数字に自動的にサイズが変換される
例：1600×400px 1200×300pxなど
Webp変換にチェックを入れる

変更を保存します。

なぜ、幅が1200pxがいいのだろう・・・

これは、アイキャッチ画像を使用する際に、1200ｐｘで表示したいときに必要だからです。

テーマによって違いはあるかもしれません。

Cocoonや今使用しているテーマのXWRITEも同じでしたが、メインコンテンツ幅が850px～900pxくらい、サイドバーが320～350pxくらいなのです。

そのため、アイキャッチ画像が表示されるエリアを確認しておく必要があります。

テーマXWRITEはこちら

ブログのテーマはXWRITEがおすすめ！

こんにちは、みよし之です。ある日、エックスサーバーからメールが届きました。テーマXWRITEの無料期間が終了しましたみよし…

2023年10月26日 2024年4月20日

Cocoonでは、メインコンテンツ幅+サイドバー+他でしたので、1200pxが理想
XWRITEでは、メインコンテンツ幅に表示されていますので、900pxくらい

はじめてのブログに最適なWordPressテーマ『XWRITE(エックスライト)』

このように、アップロードしたい画像のピクセル数に合わせて、画像のリサイズ幅の上限を設定することがいいというわけです。

ただし、手間は少しかかります

上記のように、画像のリサイズ幅を1200pxに設定したとき、1600pxで表示させたい場合は、プライグインの設定を一度無効化してから画像をアップロードさせる必要があります。

しかも、有効化後にメディアライブラリで最適化を行うと、画像のリサイズ幅に変更されます。

このようなことがあるため、画像にリサイズ幅をどのようなピクセル数に設定したいのかは、自分で判断することになります。

詳しい説明に関しては、こちらをご覧ください。

横幅についてはこちら

ブログに画像をアップロードする際の横幅・縦幅について

こんにちは、みよし之です。今回は、ブログに画像をアップロードする時、横幅や縦幅についてを記事にしてみました。メインコ…

2023年10月22日 2024年4月20日

リサイズの項目について

既存の画像をリサイズにチェックを入れる
他の画像をリサイズにチェックを入れる

変更を保存します。

変換の項目について

変換リンクを非表示にチェックを入れる

変更を保存します。

なお、画像のリサイズに関しては、ワードプレス管理画面の設定も変更しておきましょう。

ワードプレス管理画面左側にある設定メディア設定メディアサイズを変更

プラグインの方を1200pxに設定していても、こちらの設定を1024pxにしておくと、画像のサイズは1024pxになってしまいますのでご注意ください。

Webpの設定について

Webpの設定には、注意が必要です。

なぜなら、.htaccessを編集することになるからです。

編集っていっても、コピーして貼り付けするだけですが、貼り付け場所を間違えたり、誤って他の文字を消去すると大変なことになります。

.htaccessの編集には、十分注意しておきましょう。

Webpの設定手順

基本項目にあるWebpの配信方法に注目してください
白い枠内に14行のコードが表示されていますので、コードをコピーする
レンタルサーバーの.htaccessを編集する
エックスサーバーだと、サーバーパネルホームページの項目にある.htaccess編集をクリック
ドメインを選択 .htaccess編集をクリック
編集画面左の一番上を改行して、1行目を空白にする
一番上に先ほどのコードを貼り付けする
1行目の空白の部分に貼り付け
画面一番下にある確認画面に進むをクリック
画面一番下にある実行するをクリック

これで、基本項目にあるWebp配信方法の左下にPNGと表示されているのがWebpとなっていれば、完了です。

反映されていない場合は、しばらく時間を置くかキャッシュをクリアしてみてください。

また、サイトを開いて、変になっていないか確認してください。

.htaccess編集のポイント

実行をクリックしないと反映されません
間違った場合は、サーバーパネルまで戻ると編集前に戻ります
編集するまえに、スクショやスマホでコードを撮影するのもおすすめ
余計なものを削除していないかの確認に役立ちます

リライトルールについて

リライトルールを挿入することで、.htaccessに自動でコードを入力することができます。

画面下段の方に挿入されました・・・・

私の場合、最初はコピーして貼り付けの手段を取りました。その時は、Webpのアイコンが表示されていました。

今回の記事を書くにあたって、一度コードとプラグインを削除して、リライトルールをクリックしたのです。

下段に挿入されたので、それを切り取って一番上に張り付けました。

ますます、おかしくなってしまいました・・・・

変になった例、

EWWW Image Optimizerの設定ではWebpになっているが、PageSpeed Insightsには次世代フォーマットの画像配信が表示されるパフォーマンスも若干落ちる
EWWW Image Optimizerの設定ではPNGになっているが、PageSpeed Insightsには次世代フォーマットの画像配信が解決されるパフォーマンスがもとに改善される

７回くらい、プラグインやコードを削除してみた結果です。

なお、おそらくポイントになるのは、.htaccessにある＃ BIGIN EWWWIOから＃ END EWWWIOになるのかなと思います。

私の場合は、.htaccessについて詳しくないので、ここでやめておくことにしました。

リライトルールを挿入した場合は、この中に挿入されます。

今は、この状態で使用しています。

挿入に成功しました。ただし・・・と表示されはしたものの、基本の項目にはＰＮＧやＷｅｂｐの表示はありません。

パフォーマンスも戻っているので、これでいいのかなという感じです。

なお、プラグインを削除しても.htaccess内の＃ BIGIN EWWWIOから＃ END EWWWIOは消えません

このようなことから、リライトルールを使って挿入するのはやめておいた方がよさそうだというわけです。