wordpress

EWWW Image Optimizerの設定方法!画像圧縮で高速化!

2020年7月7日

wordpress-ewww-image-optimizer-ic

まろ
画像を圧縮するにはEWWW Image Optimizerを使えばいいって聞いたけど、どうやって使うの?

ブログを書くときアイキャッチなど画像を多く使うと思います。しかし、圧縮せずそのままアップしてしまうと表示が遅かったりとサイト自体の動きを遅くしてしまいます

スマホで撮った写真をそのままブログにアップしてませんか?そのままだと恐ろしい事になりますよ!

サイトの表示が遅いと離脱率が高くなります!

今回はその解決方法として、おすすめしたいプラグインEWWW Image Optimizerについて詳しく解説していきます!

 

この記事でわかる事
EWWW Image Optimizerで出来る事
EWWW Image Optimizerの使い方設定方法
EWWW Image Optimizerの注意点

 

なお、サイト高速化の方法『ブログ高速化の方法と重要性!【wordpress初心者】についてはこちらの記事をどうぞ

サイトの表示が遅いと離脱率がなぜ高くなるのかについても詳しく解説しています!

 

 

1.EWWW Image Optimizerとは

GoogleのPageSpeed Insightsでサイトのスコアを測った時に『適切なサイズの画像』という項目が出て来ませんでしたか?

スマホで撮った写真を圧縮せずそのままブログにアップしてると良いスコアとはなりにくく、このような改善項目が出てきます

ぽっちゃりのアラフォーにスタートダッシュをさせているようなもんですよ!

 

そんな時はEWWW Image Optimizerでサクッと解決してしまいましょう!

 

EWWW Image Optimizerで出来る事

画像を劣化させることなくの圧縮が可能

  • アップロードと同時に自動で圧縮
  • アップロード済みの画像も一括で圧縮

 

 

ポイント

画像をアップロードするだけで、自動で圧縮してくれます

 

 

ewww-image-optimizer7

 

 

始める前に!

カスタマイズする前には必ずバックアップを取って不具合が生じた場合復旧できるように対策しましょう!

なお、wordpressのバックアップと復元をする方法『【初心者も超簡単】wordpressバックアップ&復元する方法!』についてはこちらの記事をどうぞ

 

 

 

2.EWWW Image Optimizerの設定方法

 

手順

  1. インストールと有効化
  2. ベーシック・変換の設定

 

インストールと有効化

手順①
①左のメニューからプラグイン新規追加EWWW Image Optimizerで検索
②インストール有効化
 

ewww-image-optimizer1

 

 

手順② 設定画面へ
①左のメニューから設定EWWW Image Optimizer または、プラグインEWWW Image Optimizer設定画面へ
 

ewww-image-optimizer2

 

 

ベーシックの設定

手順① ベーシックの設定
メタデータを削除チェックを入れる
変更を保存をクリック
 

ewww-image-optimizer3

ポイント

メタデータとは、撮影場所などの情報が記載されているデータのこと。これを削除することによりファイルサイズを小さくしてくれる

 

 

ベーシック設定 その他項目

基本的に無料で使用する場合は、特に何もする必要はありません

有料で使用する場合のみ下記の設定が出来ます

Optimization API Key  APIキーを入力
JPG・PNG・GIF・PDF最適化レベル  圧縮レベルの選択

 

変換の設定

 

手順① 変化の設定
コンバージョンリンクを非表示にチェック
 

ewww-image-optimizer4

 

ポイント

pngをjpgに変換したり、その反対のjpgをpngに変換する機能無効にします。変換によって画像の劣化される事を防ぎます。

 

 

変換の設定 その他項目

こちらは、特に何もする必要はありません

オリジナルを削除は、お好みでチェックを入れて下さい

その他の変換についてはおすすめしません

 

その他の設定

特に変更する必要はありませんが、各項目については下記の通りです

イージーモード

 

Easy IO

CDNのサーバーを使って圧縮する場合の設定

 

遅延読み込み

遅延読み込みとは、画面にに表示されてない画像の読み込みを後回しにしてその他の処理を優先させることにより表示速度を速める方法です。画像はスクロールして画面の枠に出てきた段階で読み込みされます。

他に遅延読み込みのプラグインを使っていない場合はチェックしましょう!しかしLazy loadなどを使用している場合は、チェックを外してください。重複すると表示速度や画像の表示に不具合が発生する場合があります!

 

 

上級者向け

 

JPG 品質レベル

デフォルトは82に設定されていますが、変更したい場合は70から90の間で変更する事が推奨されています

数字が小さいと画像が悪くなるがデータ量が小さくなり、大きくすると画質は維持されるがデータ量が小さくなりません

 

並列最適化

アップロードする時最大5つまでは高速で処理ができるが、サーバーに負担がかかるのでこれによって問題が発生する場合はチェックをいれてサーバーの負担を軽減することができる

 

予約済みの最適化

メディア以外の画像も最適化することが出来る設定

 

メディアフォルダを含む

テーマやプラグインがメディアライブラリの内に作成した画像について最適化するかどうかの設定。予約済みの最適化にチェックされている場合に有効

 

オリジナルを含める

WordPress 5.3以降、2,560ピクセルを超える画像はすべて縮小され、オリジナルとが縮小版が一緒に保存されますが、このオリジナルについて最適化するかどうかの設定

 

最適化するフォルダー

予約済みの最適化にチェックした時に最適化したいフォルダの場所を入力する

 

無視するフォルダ

一括最適化を実行する場合、メディアライブラリと予約済みの最適化で指定したフォルダも実行されるため、除きたいフォルダがある場合はここで指定する

 

 

 

リサイズ

 

リサイズ検知

ページで表示されいる画像が大きすぎる(150%以上)ものを知らせてくれる設定

 

画像のリサイズ

リサイズする場合の幅、高さの最大値を設定することが出来る

 

既存の画像をリサイズ

画像のリサイズを許可するかどうかの設定

 

他の画像をリサイズ

メディアライブラリ外にある画像のサイズ変更を許可するかどうかの設定

 

リサイズを無効化

WordPressでは、画像をアップロードすると自動で複数サイズの画像作成されますが、それを無効化したい場合の設定と、最適化を無効化したい場合の設定

自動で複数サイズを作成されることを無効化する事は一見便利に思われますが、適切なサイズで表示されなくなると困るので触らない方が良さそうです

 

 

 

WebP

webPとは

WebPはGoogleが開発している次世代画像フォーマットのこと。従来のPNGやJPEGより圧縮性が高いが、対応していないブラウザ(サファリなど)では表示されません

 

 

WebP変換

WebPが生成されます

 

JS WebP リライティング

CDNを利用している場合などでリライトが機能しない場合にチェックします

 

画像 WebP リライティング

画像タグを使用したJavaScriptを使用しない書き換えメソッド

 

WebPのURL

CDNのURLなどを入力します

 

強制 WebP

すべてのJPG/PNG画像に対して強制的にWebP画像が生成されることを許可するかどうかの設定

 

ポイント

WebPは別途設定が必要になるので、別でまとめたいと思います

 

3.一括最適化

既にアップロード済みの画像を一括で最適化してくれる便利な機能!

 

一括最適化のやり方

ポイント

EWWW Image Optimizerの注意点はこれ!一括最適化は場合によってはかなり時間がかかります!時間に余裕がある時に実行しましょう!

 

手順①
①左のメニューからメディア一括最適化をクリック
 

ewww-image-optimizer5

 

 

手順②
①最適化されていない画像をスキャンするをクリック
 

ewww-image-optimizer6

 

 

手順③
①スキャンが終わると最適化されるファイル数が表示されます
ここから先が場合によっては時間がかかるので注意!大丈夫であれば
最適化を開始をクリック

 

4.その他の画像圧縮方法

オンラインで編集できるサイト

 

オンラインでそのまま画像をアップするだけで簡単に圧縮が出来てしまうサイト その他サイズ変更などの画像編集も可能です

 

ポイント

EWWW Image Optimizerの圧縮率はそれほど高くない

 

まとめ

今回は、プラグインEWWW Image Optimizerの使い方について解説しました

サイトの高速化に画像の圧縮は欠かせません!なかなか開かないサイトだとせっかく訪問してくれた方を逃してしまうかもしれません。画像はEWWW Image Optimizerでサクッと圧縮してしまいましょう!

 

 

 

-wordpress

© 2024 maroroblog