画像を圧縮してブログを軽くしよう! EWWW Image Optimizerの設定をしてみるぞ

2018年8月31日ブログ管理EWWW Image Optimizer, Luxeritas, WordPress, プラグイン

EWWW Image Optimizerヘッダー

トリ師匠
トリ師匠
プラグインのインストールは完了したの。次は各プラグインの設定じゃ。まずはEWWW Image Optimizer(Ver4.3.2)画像圧縮のプラグイン設定からいくぞ

ぐず夫
ぐず夫
WWE? プロレス団体みたいな名前やの、強いんか?
トリ師匠
トリ師匠
EWWWじゃ。ブログに使用する画像を軽くするために使うソフトで、過去にアップした画像も自動で軽くしてくれる優れもんじゃ。早速設定するで!

ということで、今回はプラグイン「EWWW Image Optimizer」の設定を行います。

EWWW Image Optimizerとはなんぞや

ぐず夫
ぐず夫
まだよく分からん。もうちょい詳しく教えてくれや。
トリ師匠
トリ師匠
ブログを更新してると頻繁に画像を乗っけるやろ。何も対策を打たんとな、画像は意外にデータサイズが大きいんじゃ。サイズが大きければ、必然的にページを見る人も沢山通信せなあかんで、表示も遅なるしイライラするじゃろ
ぐず夫
ぐず夫
せやな。ワシのクラスやと表示されへんかったら別のページに移動してまうわ
トリ師匠
トリ師匠
そんな情けない状況を避けるために入れるプラグインじゃ。ミソは自動で画像をちっちゃしてくれるとこじゃの
ぐず夫
ぐず夫
自動で負債もちっちゃしてくれるとええのにのぅ…

EWWW選択イメージ

トリ師匠
トリ師匠
とにかく一つずつ設定するで!
まずはブログ管理画面に移動して、「設定」「EWWW Image Optimizer」の順にクリックや!

 

EWWW Image Optimizer設定【Basic(基本)タブ】

トリ師匠
トリ師匠
まずはBasicタブからじゃ

基本設定イメージ

① Optimization API Key
有料版認証キー入力欄です。有料版では圧縮レベルの変更などが可能ですが、無料版で構いません。

② デバッグ
設定ページと一括最適化ページにデバッグ(テストのようなものです)情報を表示するか選択します。
→ チェック不要

③ Remove Metadata(メタデータ削除)
メタデータ(画像に付与されている様々な情報)の削除選択。もし使用している画像が写真ならば「カメラタイプ」や「場所」などのデータがメタデータとして付与されますが、それらを削除しデータサイズを落とします。
→ チェックを選択

④ JPG 最適化レベル
⑤ PNG 最適化レベル
⑥ GIF 最適化レベル
⑦ PDF 最適化レベル
⑧ バックアップ元

画像別圧縮方法の選択。有料版は圧縮レベル変更が可能ですが、無料版は不可。
→ ④~⑥は「ロスレス圧縮」
→ ⑦は「無圧縮」 をそれぞれ選択

①~⑧全て設定し、「変更を保存」を選択

 

EWWW Image Optimizer設定【ExactDNタブ】

exactDNイメージ

⑨ ExactDN
有料の画像サイズの自動最適化機能
→ チェック不要

 

EWWW Image Optimizer設定【Advanced(高度)タブ】

高度な設定イメージ

⑩ JPG Quality Level(JPG画像レベル)
JPG画像の画質レベルを設定できます。プラグイン作成者は70~90の範囲で設定を推奨。70以下は好みで。
→ 70~90で設定(空欄の場合は82)。分からなければ空欄で構いません。

⑪ Parallel Optimization(並列最適化)
画像の最適化を高速化させるための設定。
→ 通常チェック不要

⑫ Scheduled Optimization(スケジュール最適化)
一定時間ごとに対象フォルダの画像を最適化
→ 通常チェック不要

⑬ Include Media Folders(メディアライブラリフォルダ選択有無)
メディアライブラリ(最新の2フォルダ)をスキャン対象にするかを選択。
→ 通常チェック不要(リサイズ機能等で未チェックの画像がある場合などはチェックも可)。

⑭ Folders to Optimize(フォルダ選択)
通常以外の場所に画像を保存している場合に使用。絶対パスを入力。
→ 通常空欄のままで構いません

⑮ Folders to Ignore(対象外フォルダ選択)
最適化しないフォルダの指定。
→ 通常空欄のままで構いません

⑯ 埋め込み型のヘルプを有効化
説明通りです。
→ チェック不要

⑰ 使用状況トラッキングを許可しますか ?
説明通りです。
→ チェック不要

⑩~⑰全て設定し、「変更を保存」を選択

 

EWWW Image Optimizer設定【リサイズタブ】

リサイズイメージ

⑱ リサイズ検知
説明通りです。
→ チェック不要

⑲ メディア画像をリサイズ
画像投稿時、指定のサイズより大きい場合に画像をリサイズします。
→ サイト方針によるため任意。画像サイズを変更されたくない場合はチェック不要
(ぐず夫はもちろん空欄)

⑳ 既存の画像をリサイズ
既に投稿された画像のサイズ変更許可する。
→ 通常チェック不要

㉑ リサイズを無効化
WordPressは画像を投稿する際に、自動で別サイズの画像(サムネイル)を作成し自動で保存します。作成したくない場合など個別にチェックする。
→ 通常チェック不要(※)。

18~21を設定し、変更点があれば「変更を保存」を選択。

※サムネイルの自動生成選択はLuxeritasの基本機能に標準装備されています(Ver3.X~)。Luxeritas使用の場合は変更不要です。

 

EWWW Image Optimizer設定【Convert(変換)タブ】

変換イメージ

㉒ コンバージョンリンクを非表示
メディアライブラリに表示されている画像の変換リンクを非表示にする。(例:JPG→PNG)
→ チェックを選択

㉓ Delete Originals(オリジナル削除)
変換後、オリジナル画像を削除する
→ チェック不要

㉔ JPG to PNG Conversion(JPG→PNG変換)
JPGからPNG形式に変換を有効にする
→ 通常チェック不要

㉕ PNG to JPG Conversion(PNG→JPG変換)
PNGからJPG形式に変換を有効にする
→ 通常チェック不要

㉖ GIF to PNG Conversion(GIF→PNG変換)
GIFからPNG形式に変換を有効にする
→ 通常チェック不要

22~26を設定し、変更点があれば「変更を保存」を選択。

トリ師匠
トリ師匠
画像ファイルは種類によってメリット・デメリットがあるんじゃ。普通のブログを運営するなら、圧縮率の高いJPGがメインになるじゃろうで、他への変換は基本的に不要じゃ

 

EWWW Image Optimizer設定【WebPタブ】

WebPイメージ

㉗ JPG、PNGからWebP
JPG,PNGからWebP形式(※)に変換を有効にする
→ 通常チェック不要

㉘ 強制WebP
既存画像をWebPに変換する
→ 通常チェック不要

㉙ WebPのURL
28を有効にした時、置き換えるための画像フォルダを指定する
→ 通常空欄で構いません

㉚ 代替WebPに書き換え
Apacheの書き換えルールが機能しない場合や、イメージがCDNから提供されている場合に使用
→ チェック不要

27~30を設定し、変更点があれば「変更を保存」を選択。
【上書きするタブ】は省略。変更不要です。

※2010年から採用された低トラフィック・表示速度短縮を目的に採用された形式。ブラウザにより表示不可のため使用は考慮する必要有。分からなければ使用するメリットはありません。

 

設定を終えたら…

トリ師匠
トリ師匠
次は実際に既存の画像を最適化するぞ。ブログの管理画面に戻って、「メディア」「一括最適化」をクリックじゃ

一括最適化イメージ

トリ師匠
トリ師匠
続いて「最適化されていない画像をスキャンする」をクリックじゃ

最適化開始

トリ師匠
トリ師匠
最適化されていない画像の総数が表示されたら、「最適化を開始」をクリック。これで画像ファイルが圧縮されるぞ
ぐず夫
ぐず夫
やっと終わったの。疲れたわ
トリ師匠
トリ師匠
ひとまずこれで完了じゃ。画像が増えてくると圧縮忘れが出ることもあるでの。たまに「一括最適化」をしてやるとええわ

これでEWWW Image Optimizerの設定は終了です。

次回は別のプラグインを設定するぞ。
お楽しみに!