WordPressサイト構築?EWWW Image Optimizerプラグインをインストールして自動画像圧縮?!

EWWW Image Optimizer WordPressサイト構築

ChromebookでWordPressのブログやサイトを構築したり記事を投稿を行う上で、自動的にPNG画像ファイルを適切なサイズのJPG画像に圧縮して投稿できる「EWWW Image Optimizer」プラグインを紹介します。

はじめに

以下の記事までに、ユーザー参加型PCファンサイト「PeaCie」をXserver上のWordPressに企業向け無料テーマ「Lightning」のクイックスタート雛形サイトを構築してカスタマイズする方法を紹介してきました。

以後のサイト・カスタマイズにおいて、スクリーンショットなどのPNG画像適切なサイズのJPG画像に圧縮して投稿し、サイトの表示速度を高速化するために「EWWW Image Optimizer」プラグインをインストールして自動化する方法を紹介します。

従来の画像投稿方法

対象WordPressサイトの管理画面にログインします。

Screenshot 2020 03 09 at 11.16.12 1024x428 - WordPressサイト構築?EWWW Image Optimizerプラグインをインストールして自動画像圧縮?!

私が現在運営しているWordPressブログでは「EWWW Image Optimizer」プラグインをインストールしているので、スクリーンショットのPNG画像を投稿する際に自動的に適切なサイズに圧縮されます。

従来は、手作業でスクリーンショットのPNG画像をJPG画像に圧縮して投稿していました。

使っていた画像圧縮ツールはオンラインで使えるWebアプリ「squoosh.app」などです。

Screenshot 2020 03 09 at 11.16.56 - WordPressサイト構築?EWWW Image Optimizerプラグインをインストールして自動画像圧縮?!
Screenshot 2020 03 09 at 11.17.43 1024x572 - WordPressサイト構築?EWWW Image Optimizerプラグインをインストールして自動画像圧縮?!
Screenshot 2020 03 09 at 11.17.55 - WordPressサイト構築?EWWW Image Optimizerプラグインをインストールして自動画像圧縮?!

私の場合は、スクリーンショットの数が多いので、こうした作業を効率的に行うと、かなりの省力化ができています。

EWWW Image Optimizerプラグインのインストール

管理画面の左メニューから「プラグイン > 新規追加」をクリック。

Screenshot 2020 03 09 at 11.38.35 - WordPressサイト構築?EWWW Image Optimizerプラグインをインストールして自動画像圧縮?!
Screenshot 2020 03 09 at 11.40.03 1024x458 - WordPressサイト構築?EWWW Image Optimizerプラグインをインストールして自動画像圧縮?!

右上の「キーワード」に「ewww」と入力すると、上記のような画面になるので、左上の「EWWW Image Optimizer」の「今すぐインストール」をクリック。

Screenshot 2020 03 09 at 11.42.06 - WordPressサイト構築?EWWW Image Optimizerプラグインをインストールして自動画像圧縮?!

有効化」をクリック。

Screenshot 2020 03 09 at 11.42.58 - WordPressサイト構築?EWWW Image Optimizerプラグインをインストールして自動画像圧縮?!

トップの「許可する」をクリックしておきます。

EWWW Image Optimizerの使い方

左メニューの「設定 > EWWW Image Optimizer」をクリック。

Screenshot 2020 03 09 at 11.46.13 - WordPressサイト構築?EWWW Image Optimizerプラグインをインストールして自動画像圧縮?!
Screenshot 2020 03 09 at 11.47.37 - WordPressサイト構築?EWWW Image Optimizerプラグインをインストールして自動画像圧縮?!

トップの「許可する」をクリックしておきます。

変換」タブをクリック。

Screenshot 2020 03 09 at 11.50.34 - WordPressサイト構築?EWWW Image Optimizerプラグインをインストールして自動画像圧縮?!

PNGをJPGに変換」にチェックを入れ「変更を保存」をクリック。

私の場合はこれしか行っていませんが、とりあえず十分な表示速度を得ています。

従来通りの方法でメディアライブラリーにスクリーンショットのPNG画像をアップロードすると、自動的にJPG(例外はある)に圧縮変換されます。多少変換に要するタイムラグがありますが・・・

そのまま代替テキストなどを入力後、投稿しています。

APIキー Freeの入力

メールで送られてきたAPIキー(Free)を入力すると圧縮率がアップしましたが・・・

Screenshot 2020 03 09 at 12.41.05 - WordPressサイト構築?EWWW Image Optimizerプラグインをインストールして自動画像圧縮?!

まとめ

さらなる表示速度の向上のために、EWWW Image Optimizer設定の各種タブを開いて細かい設定を行うと良いと思います。

サイトの表示速度などのパフォーマンスの向上では、多くの要素が複雑に絡んでいるので、何か一つの要素を改善したからといって、全体のパフォーマンスが改善するとは限りません

このブログ「Chrome VR」のトップページを、Chrome拡張機能の「Lighthouse」で評価したパフォーマンス・レポートは以下です。

Screenshot 2020 03 09 at 12.04.40 - WordPressサイト構築?EWWW Image Optimizerプラグインをインストールして自動画像圧縮?!

まだまだ改善が必要とは感じていますが、パフォーマンスを向上することと、ブログの質ユーザビリティーの向上などのバランスを取りつつ、正解の無い課題の解決を進めたいと思います。

ではでは、きらやん

(Visited 9 times, 1 visits today)

コメント