■ 当メディアの記事は、広告による収益を得ています。

wordpress画像圧縮プラグイン【EWWW Image Optimizer】→軽量化

ナミさん
ねぇ、asuhare。画像を圧縮しないと、サイトが重たくなって表示速度もおそくなるの?もしそうなら、対策教えてほしいな…。

 
asuhare
OK。それならwordpressプラグインの【EWWW Image Optimizer】が、その問題解決してくれるよ。無料だしね^^ 導入方法も紹介するね!

ナミさん
ありがとう!今回もヨロシクね asuhare。

今回は、wordpress画像圧縮プラグイン「EWWW Image Optimizer」を紹介します。

この記事を読むことで、

  • 「EWWW Image Optimizer」の導入・設定方法・使い方

上記がわかります。

【プラグイン導入時の注意ポイント】

wordpressプラグイン導入の際は、あらかじめバックアップしておくことが大事です。

wordpressテーマによっては、エラーや不具合が起こる可能性もあるからです。

情報確認をしつつ、自己責任でプラグイン導入を検討してください。

≫バックアップ方法はこちら。

この記事を書いているぼくは、

こんな人です。

それでは、ぜひ最後までご覧ください。

wordpress画像圧縮プラグイン【EWWW Image Optimizer】とは

wordpress画像圧縮プラグイン【EWWW Image Optimizer】とは

「EWWW Image Optimizer」は、

画像サイズを軽量化してくれる、無料プラグインです。

ブログにアップロードした画像を、自動で圧縮してくれます。

記事のファイルサイズが小さくなるから、記事の表示速度がアップして「SEO対策」にも最適。

「ね、すごいでしょ」。

【画像の軽量化とは】

画質は元のキレイなままで、容量だけを軽量化すること。

画像を軽量化することで、表示速度もアップします。

ブログでは、少しでも表示速度が遅いと「即離脱」ありえます。

なので、「EWWW Image Optimizer」は必須プラグイン。

「ぜったい、忘れないでね!」

wordpress画像圧縮プラグイン「EWWW Image Optimizer」導入手順です。

wordpress画像圧縮プラグイン「EWWW Image Optimizer」導入手順です。

「準備は、いいですか?」それじゃ、はじめますね。

はじめに、「EWWW Image Optimizer」導入手順としては、

  • インストール
  • 設定
  • 使い方

こんな順番で、進めていきます。

やり方は、とってもシンプル、かんたんですよ。

「それじゃ、はじめます」。

「EWWW Image Optimizer」をインストールする

「EWWW Image Optimizer」をインストールする

はじめに、wordpressダッシュボード画面に移動します。

  • wordpressダッシュボード画面に移動
  • プラグインにカーソルを移動
  • 新規追加をクリック
「EWWW Image Optimizer」をインストールする

すると、

「プラグインを追加」画面に移動します。

  • 検索窓に「EWWW Image Optimizer」と入力
  • 「EWWW Image Optimizer」が現れる
  • 「今すぐインストール」をクリック
  • 「有効化」をクリック
「EWWW Image Optimizer」をインストールする

そして、

  • 「有効化」をクリック
「EWWW Image Optimizer」をインストールする

つぎに、

プラグン一覧で「EWWW Image Optimizer」がインストールされているか、確認します。

  • 「EWWW Image Optimizer」を確認
「EWWW Image Optimizer」をインストールする

上記のようになっていれば、インストールは無事完了です。

つぎは、設定について解説。

「EWWW Image Optimizer」の設定

「EWWW Image Optimizer」の設定

それでは、「EWWW Image Optimizer」の設定を進めていきます。

この時点で、画像圧縮は有効化されているので、安心してください。

  • 「EWWW Image Optimizer」下の【設定】をクリック
「EWWW Image Optimizer」をインストールする

もし、下記画面がでた場合は、

各項目にチェックは入れず、

  • 赤枠の所をクリック
「EWWW Image Optimizer」をインストールする

そうすると、

「EWWW Image Optimizer」の設定画面が開きます。

  • 「Ludicrous Mode」をクリック
「EWWW Image Optimizer」をインストールする

画面が切り替わるので、

「メタデータを削除」設定

  • 「メタデータを削除」のところに、チェックを入れる
「メタデータを削除」設定

こんどは、

「画像のリサイズ」設定

  • 「画像のリサイズ」、幅・高さともに「0」でOK
  • 遅延読みは、チェックしなくてもOK
「画像のリサイズ」設定

下にスクロール、

「WebP 変換」設定

  • 「WebP 変換」の横、「ほかのブラウザ~」にチェック
  • 画面右下が「PNG」になっているのを確認
  • 「リライトルールを挿入する」をクリック
「WebP 変換」設定

すると、

「PNG」が「WEBP」に切り替わりました。これで、OKです。

  • 「変更を保存」をクリック
「WebP 変換」設定

以上で完了です。

WebP設定の注意ポイント

最後に、注意ポイントがありまして、

たとえば、下記画像が出た場合です。

WebP設定の注意ポイント
【注意ポイント】

1.【挿入は成功しましましたが、セルフテストに失敗しました:PNGの応答がMINEタイプのテストに失敗しました】と表示された場合。

2.【このサイトには mod_headers が抜けているようです。この Apache モジュールを有効化するよう、ホスティング会社やシステム管理者にご連絡ください。】と表示された場合。

結論、正しく設定はされてますので、気にしなくてOKです。

※使用しているサーバーによって、上記のメッセージが出る場合があります。

上記のように、「挿入は~失敗しました」と出ても、気にしなくてOKです。

  • 「PNG」が「WEBP」に切り替わったことを確認
  • 「変更を保存」をクリック

で完了です。

「変換リンクを非表示」設定

簡単にいうと、画像拡張子の変更を防ぐことです。

「いいんです、わからなくても」。とりあえず今は、設定作業を進めましょ。

  • 変換をクリック
  • 「変換リンクを非表示」横にチェック
  • 「変更を保存」をクリック
「変換リンクを非表示」設定

以上で完了です。

「EWWW Image Optimizer」の使い方

「EWWW Image Optimizer」の使い方

「EWWW Image Optimizer」の使い方2つを解説。

  • 新しく投稿する画像を軽量化
  • すでにアップロードされている画像を軽量化

こんな感じ。

使い方は、めちゃカンタン、心配しないで大丈夫。

サクッと、すませちゃいましょう。

新しく投稿する画像を軽量化

「EWWW Image Optimizer」は、

インストールした時点で、新規アップロード画像をすべて自動で軽量化してくれます。

「すごいでしょ。」

新規画像が、どのぐらい軽量化されているかの確認は、

  • wordpressダッシュボード画面に移動
  • 「メディア」にカーソルを移動
  • 「ライブラリ」をクリック
新しく投稿する画像を軽量化

そうすると、

メディアライブラリ画面が現れます。

画像が、どのくらい圧縮されているか確認してみます。

  • リスト表示に切り替え
  • 上の画像は、18.1%減少してますね
  • 下の画像は、16.7%減少してます
新しく投稿する画像を軽量化

今度は、

最適化になっていない画像があった場合、

  • 「今すぐ最適化!」をクリック
新しく投稿する画像を軽量化

これで、画像が圧縮されますよ。

OKですか?

次は、アップロード済みの画像を最適化しますよ。

アップロード済みの画像を最適化

アップロード済みの画像を、一括で最適化する方法ですね。

  • 「メディア」にカーソルを移動
  • 「一括最適化」をクリック
アップロード済みの画像を最適化

すると、

「一括最適化」画面が表示されます。

  • 「WebP のみ」にチェック
  • 「最適化されていない画像をスキャンする」をクリック
アップロード済みの画像を最適化
【注意ポイント】

一括最適化は、元の画像を変更するので、元に戻すことができなくなります。

画像のバックアップデータを取っておきましょう。

画面が切り替わります。

今回は、「54点の画像を最適化」できるようです。

  • 「54点の画像を最適化」をクリック
【注意ポイント】

最適化は、数十分から数時間かかる場合もあるので、「いそがしくない時」がいいかもです。

アップロード済みの画像を最適化

しばらくすると、

「完了」の表示が現れます。

アップロード済みの画像を最適化

これで、

「WebP対応の最適化」は無事完了です。

WebPが反映されているか確認

WebPが反映されているか確認

「WebP」が、無事反映されているか確認します。

最初に、

ブラウザでキャッシュされた画像を、あらかじめ削除します。

キャッシュを削除しないと、「WebP」が反映されないからです。

はじめに、ブラウザキャッシュします

手順は、

  • ブラウザの右上「⁝」をクリック
  • 「その他のツール」にカーソルを移動
  • 「閲覧履歴を削除…」をクリック
はじめに、ブラウザキャッシュします

「閲覧履歴データの削除」画面が表示される。

  • 「キャッシュされた画像とファイル」にチェック
  • ほかは、気にしなくて大丈夫
  • 「データを削除」をクリック
はじめに、ブラウザキャッシュします

「安全確認」画面が出ます。

以上で、完了です。

このタイミングで、ブラウザ「再起動」を求められることもあります。

そしたら、指示にしたがって再起動しましょう。

はじめに、ブラウザキャッシュします

以上で完了です。

あらためて「WebP」が反映されているか確認

それじゃ、かくにん作業です。

画像が挿入されている記事を、プレビュー画面にします。

  • 「画像」のうえで、右クリック
  • 「名前を付けて画像を保存…」をクリック
あらためて「WebP」が反映されているか確認

「名前を付けて保存」画面が表示される。

  • ファイルの種類が「WebPファイル」になっていればOK
あらためて「WebP」が反映されているか確認

以上で完了です。

「ほんと、、つかれましたね…」。

wordpress画像圧縮プラグイン【EWWW Image Optimizer】まとめ

wordpress画像圧縮プラグイン【EWWW Image Optimizer】まとめ

今回は、「wordpress画像圧縮プラグイン【EWWW Image Optimizer】」について解説しました。

「画像圧縮・軽量化」するのも大事ですが、ブログ運営で「wordpress日本語の不具合修正」は、さらに重要です。

英語が標準機能のwordpressを、日本語対応にしてくれるプラグインです。

文字化け対策などの機能もあり、重要なので下記記事もあわせて読んでみて下さい。

関連記事

 asuhare ナミさん!言うのわすれてた…。wordpressブログ出来たら、「日本語の不具合を修正」してくれるプラグイン、初期段階で導入すること。 ナミさん へ~そうなんだ。でもさ、それってなに? […]

WordPressプラグイン【WP Multibyte Patch】が必要なワケ→「日本語の不具合を修正」