ワードプレスの始め方

【画像圧縮】EWWWImageOptimizerプラグインは必須！簡単設定でページ速度アップ！【ユーザーフレンドリ】

ワードプレスのページ動作が重く感じるのことありませんか？

より読みやすい構成するために記事内に画像を使うこと多々ありますよね。

見やすく！読みやすく！なる分、ページが重くなります。ページ速度の低下で訪れた方がストレスを感じます。

そこで自動で画像圧縮するプラグイン。おすすめのEWWW Image Optimizer を紹介&解説します。

結論！EWWW Image Optimizerは必須

ワードプレスで画像利用する場合、EWWW Image Optimizerプラグインはインストール必須です。

画像圧縮をしない場合、ページ速度が遅くなり2つデメリットが発生します。

  1. ユーザーにストレス
  2. Googleの評価に悪影響

この2つは見逃せないですよね！？

画像を多様するウェブサイトであれば有料版がGOOD！

安心してください。

無料版もありますから！

今回は無料版EWWW Image Optimizerの使い方を紹介しますね。

EWWW Image Optimizerとは

EWWW Image Optimizerプラグインを有効にすると、アップロードされた画像をすべて圧縮してくれます。しかも全自動。

このプラグインを有効にする前の画像は1クリックや一括で圧縮することができます。

特徴はファイルサイズ圧縮（軽く）するにも関わらず、画質劣化がほとんど分からなく、フォト専用サイトではない場合は絶対に使いたいプラグインです。

EWWW Image Optimizer 使い方

フォト重視のサイト運営でもEWWW Image Optimizerを有効にしたい方や、はじめて有効にする方はインストール前に必ずバックアップをしてから作業してくださいね！

いわゆる自己責任ってことになります。ご理解くださいね。

インストール

ワードプレスのダッシュボードの「プラグイン-新規追加」から「EWWW Image Optimize」を検索-インストールします。完了したら画像のように「有効」に切り替えます。

EWWW Image Optimize 設定

EWWW Image Optimizeをインストール-有効したら画像を圧縮（最適化）するための設定が必要です。

1.Enable Ludicrous Mode画面に切替

簡単モード
Enable Ludicrous Mode

ダッシュボード-設定-「EWWW Image Optimize」を選択すると設定画面が表示されます。「Enable Ludicrous Mode」をクリックして詳細設定ができる画面に切り替えます。

設定メニューのタブが8つに増えたら切替完了です。

基本設定-画像圧縮

メタデータを削除に✔することで、余計な情報をアップロード時に削除されます。「遅延読み込み」は、さらに画像の読み込み速度アップを目指すなら✔入れても良し。

✔を入れたら「変更を保存」をクリック

余計な情報とは

カメラ機種、位置情報などの撮影条件

「画像のリサイズ」では、アップロードする画像とアップロード完了した画像の幅・高さを入力した数値にリサイズができます。僕は必要ないので空欄ままにしています。

続いても「リサイズ」に関連する設定を行います。

メニュータブの「リサイズ」を移動して、「既存の画像をリサイズ」「他の画像をリサイズ」に✔を入れて「変更を保存」をクリックします。

これで全ての画像が圧縮されて画像容量を削減してくれます。

WebP変換

WebPとは！？

注目を集めているGoogle公式の画像形式の「圧縮率の高い画像フォーマット」です。

呼び方は「ウェッピー」。カワイイですよね。

「EWWW Image Optimize」では、WebP（ウェッピー）対応のブラウザを合わせて配信する事が可能です。

では、WebPの設定に進みます。

メニュータブの「基本」で画面を下へ移動して「WebP変換」に✔を入れて「変更を保存」をクリックます。

続いて、WebP変換の下に表示されているコードをワードプレスで使用しているサーバーにある.htaccessの一番上に書き込み-保存します。

サーバーの管理画面からコード書き込みができます。

Shinno & Oscar＊さんのブログでmixhostのコード編集方法が分かりやすく解説されていますので、ぜひ参考にしてください。

<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

こちらのコードをコピーしてお使いください。

EWWW Image Optimize使い方

EWWW Image Optimizeの設定完了するとアップロード画像は、自動的に圧縮されておりメディア-ライブラリで画像最適化された数値の確認が可能です。

最適化されていない画像をスキャンする
最適化できる画像

メディア-「一括最適化」をクリックすると「最適化されていない画像をスキャンする」と記載されたボタンが表示されたらクリックします。

すると、EWWW Image Optimizeで最適化できる画像数量が計算され、「●●●点の画像を最適化」ボタンをクリックすると最適化がスタートします。画像の数量によってす数時間かかる場合があります。

画像種類と特徴

最近、注目を集めているWebP（ウェッピー）をはじめとする代表的な画像フォーマットの特徴をまとめました。

画像形式圧縮方式透過
JEPG非可逆圧縮×約1,677万色
PNG可逆圧縮○約1,677万色
WebP非可逆圧縮○約1,677万色
非可逆圧縮とは

一度、圧縮すると元の状態に戻すことができない圧縮方式

JEPG＜WebP

圧縮率はWebPの方が優れていることが注目される理由

透過とは

背景色を透明色に指定すれば一括して背景を透明にすることがきます。

関連記事【オンラインストレージ】ドロップボックスは投稿記事の原稿や素材保存に超便利 【無料プラン】

EWWW Image Optimizer まとめ

設定も使い方も簡単なEWWW Image Optimizerはいかがでしたか？

おすすめ「プラグイン」ですので、ぜひ利用してみてくださいね。