WordPressで画像を多用していたら、こんなことになったということはないでしょうか。
そのような時に画像軽量化を自動でおこなってくれる【プラグイン】EWWW Image Optimizer というものがあります。
このプラグインを使用すると、次のようなことができるようになります。
EWWW Image Optimizer は、圧縮を一括変更できること、WebP 変換もできるのが特徴です。
初期設定をしっかりしておけば、画像をアップロード時に自動で圧縮・WebP 変換してくれます。
それでは、機能の説明をしたいと思います。
目次
EWWW Image Optimizer とは
画像のファイルサイズを圧縮することで、軽量化してサイトの高速化を図るプラグインです。
WebP 変換・圧縮（一括）
このプラグインには、自動でWebP ファイルに変換される機能が備わています。また、メディアのライブラリにある画像を一括圧縮することもできます。
画像を軽量化はWebサイトの表示時間が短縮され、ユーザーからの信頼にもつながります。
画像の遅延読み込みができる
ページの表示が遅いと、ユーザーは待ちきれず離脱する可能性があります。
ですので、表示速度の改善はサイトの信頼性につながると言えます。
EWWW Image Optimizer を導入すると、画像の表示の遅延読み込みをすることができます。
これは、最初に全ての画像を読み込まないで、スクロールしたタイミングで表示させる機能のことをいいます。
画像のリサイズができる
大きい画像ファイル（容量）には情報データ（メタ）が入っており、削除することで容量を小さくします。
撮影場所や機種・設定などの細かい情報がメタデータにはあります。
しかし心配はいりません。
プラグイン初期設定で、「削除」にチェックを入れておけば圧縮と一緒にメタデータの削除もおこなってくれます。
無料版と有料版
このプラグインには、無料版と有料版が存在します。
無料版は、主に画像の最適化に特化した内容になっています。
しかし、有料版は画像最適化を高機能にしつつ、追加でウォーターマークやJS/CSSの最適化などできるようになります。
というような点があります。なお、有料版には
以上の３種類が存在します。細かい圧縮設定や追加機能を使いたい方におススメです。
EWWW Image Optimizer の設定方法
それではまず、プラグインのインストールをおこないます。
WordPress 管理画面のプラグインにカーソルあわせて「新規プラグインを追加」を選択します。
次に、右上にある検索ボックスに「EWWW」と入力します。
「今すぐインストール」をクリックしてインストールをおこないます。
インストール後は必ず「有効化」をしてください。
初期設定
まず、WordPress 管理画面の設定にある「EWWW Image Optimizer」を選択します。
初期設定で注意するべき項目は以下の３つです。
それでは初期設定画面について説明します。
以上で「次へ」を選択します。なお、「保存スペースを節約」は任意でチェックをつけてください。
次に、サイトの推奨設定の画面になります。
他の設定はデフォルトで構いません。
ただし、以前にすこし触れましたが「遅延読み込み」の設定は、使用しているテーマや他のプラグインと競合する可能性があるため、チェックを外すことをおすすめします。
最後に「完了」をクリックし、初期設定は以上になります。
変換リンクの非表示
まず始めに、基本タブにある「ルディクロスモード」に変えます。
これはいわゆる詳細設定のようなものです。これで設定に必要なタブが表示されます。
この中にある「変換タブ」を選択して、項目にある「変換リンクの非表示」にチェックを入れておきます。
これは、勝手に画像を変換しないようにする設定になります。非表示にチェック入れることで他のユーザーが画像を変換しないようなります。
WebP 画像の変換設定
次に、WebP 変換の設定です。
初期設定の時にチェックを入れたので、問題ないとは思いますがチェックが入っていないと設定できません。
WebP 変換のリライトルールのコードですが、コードをコピーして「.htaccess ファイル」に追記します。この時、必ず一番上に追記してください。
「WebP 変換」にチェックすると、下に「WebP の配信方法」が表示されます。
右下に緑色でWebPと表示できていればWebP変換可能です。
記述するコード下にある「リライトルールを挿入する」でコードを挿入すると、末尾に記載されます。これにより、「WebP 変換」されないということがあるそうです。
必ず、コードは.htaccess ファイルの一番上に追記してください。
これで、設定に関して以上になります。
EWWW Image Optimizer の使い方
では、実際に画像を圧縮してみましょう。画像の圧縮は以下２種類です。
それでは順番に見ていきます。
新規アップロードした画像
これは、画像を新規アップロードするだけで自動でWebP 変換されます。
ちなみ、既にアップロード済みの画像も自動でWebP 変換されます。
画像の一括圧縮
WordPress 管理画面にある「メディア」から「一括最適化」をクリックして画像を圧縮します。
再最適化を強制は、以前圧縮されたファイルをもう一度圧縮する場合、チェック入れます。デフォルトでは、スキップされます。
WebP のみは、画像圧縮ではなく、WebP 変換する場合チェックを入れます。(例：PNG → WebP )
「最適化されていない画像をスキャンする」をクリックして、アップロードされたファイルのスキャンをします。
最後に、最適化できる画像数が表示されるのでクリックして一括圧縮します。
EWWW Image Optimizer のデメリットとメタデータ
このプラグインにもデメリットがあります。
これは、このプラグインの圧縮するときの設定などが影響していると思われます。
「基本」タブにあるメタデータの設定です。
初期設定でメタデータ削除にチェックを入れたので、EWWW Image Optimizer ではWebP 変換される時「カラープロファイル」も削除されます。
「カラープロファイル」が削除された状態で、WebP 変換すると色彩に影響がでる可能があります。
もし、「カラープロファイル」を保持しながらメタデータを削除するなら、EWWW Image Optimize の簡単IO（有料版）を使用することで解決できます。
WebP 画像の補足
WebP フォーマットは 上記の特徴に加えて、２種類の圧縮方式があります。
可逆圧縮方式
まずは、可逆圧縮方式の説明です。
非可逆圧縮方式
次に非可逆圧縮方式の説明です。
Jpeg やPNG より圧縮率が高いといわれているので、WebP にするだけで十分な結果が期待できると私は考えています。
無圧縮（ロスレス）で変換したいのですが、EWWW Image Optimizer の無料版にはそのような設定がないようです。
「高度な設定」タブにWebP 品質に関する設定があります。ここである程度調整ができます。
まとめ
いかがだったでしょうか。今回は、EWWW Image Optimize の設定と使い方を紹介しました。
初期設定をしっかりおこなえば、後の設定は必要なく簡単に使用できます。
ここまでお読みいただき、ありがとうございました。
コメント