おすすめ方法.com

【おすすめ】をリサーチ・比較、【方法】を分析・紹介するサイト

【WordPressプラグイン】画像を自動圧縮してSEO効果を得る方法。サーバー容量低減のおまけつき「EWWW Image Optimizer」

time 2016/06/28

~求めているもの、欲しいもの~

  • 毎回画像を加工して容量を小さくするのは面倒。投稿したら自動で圧縮して欲しい。
  • 過去に投稿した画像も全部圧縮したい。
  • 画像圧縮でSEO効果を得たい。

そんなあなたにおすすめなのが、WordPressプラグイン「EWWW Image Optimizer」です!

sponsored link

綺麗な画像は容量が大きく、ページが重たい。でも画像の加工は面倒。

~現状と問題点~

記事に画像は欠かせませんよね。

  • 記事の顔であるアイキャッチ画像。
  • 適度に目を休めるためのイメージ画像。
  • 各種操作を説明するためのお手本画像。

できるだけ綺麗な画像をたくさん載せた方が、ユーザーに喜ばれます。

一方で、画像は容量を大きく使います。
容量が大きいと、たくさんの情報を読み込むために、サイトのページ表示速度が遅くなります。

「ユーサーは、ページを読むかを3秒で決める」
という定説があります。

ページの表示が遅ければ、ユーザーは離脱してしまう。
だから、「できるだけ情報を減らす」=「画像の容量を小さくする」必要があります。

ただ、画像の容量を小さくするために、毎回画像を加工するのは骨が折れます。
過去にアップロードした画像を、削除し、再度アップロードするのも大変です。

  • 画像は綺麗なまま、自動で圧縮してくれる。
  • 過去の画像もまとめて圧縮してくれる。

そんなお手軽な方法が欲しいですよね。

WordPressプラグイン「EWWW Image Optimizer」で、画像の自動圧縮をする。過去にアップした画像も一括圧縮。

~解決する方法~

対策として、WordPressプラグイン「EWWW Image Optimizer」を導入します。

「EWWW Image Optimizer」を導入するメリット

自動で画像ファイルを圧縮する

「EWWW Image Optimizer」は、アップロードした画像を自動で圧縮します。
さらに、圧縮した画像は、元の画像とほぼ変わらない綺麗さを保ちます。
サーバーが重くなることを気にせず、加工もする必要がなくなります。

また、過去にアップロードした画像も一括で圧縮できます。
100枚でも1000枚でも、好きなだけ圧縮できます。

メディアライブラリに保存されないWordPressテーマ(テンプレート)などの画像も、一括で圧縮できます。

画像容量低減により、SEO効果がある

画像ファイルの圧縮により読み込む情報量が減り、サイトの表示を速めます。
サイトの表示が速いと、SEOにプラスの効果があります。
検索エンジンは、表示の速いサイトを好みます。

サイトの表示が遅くなる最大の原因は、画像の読み込みです。
綺麗で大きな画像であるほど、サイトの表示に時間がかかります。

画像を圧縮すれば、画像の読み込み時間が減り、結果としてSEOになります。

ユーザーのリピート率が上がる

ページの読み込みが遅いと、ユーザーは離れていきます。
ラドウェアのレポートによれば、

  • 57%は、表示が3秒以上のページから離脱する
  • 79%は、パフォーマンスに不満を持ったサイトを二度と使わない
  • 48%は、表示が遅いとサイトを信用しない
  • 44%は、オンライン上の悪い体験を共有する
  • 表示が0.5秒遅れるごとに、検索ユーザーの20%を逃す
  • 表示が1秒遅れるごとに、コンバージョン率が7%落ちる
  • 表示が1秒遅れるごとに、顧客満足度が16%下がる

とのこと。
ざっくりのイメージとしては、表示速度が2秒かかると50%のユーザーが離脱するようです。

画像を圧縮し読み込み速度が上がれば、パフォーマンス(機能、使い勝手)によるユーザーの離脱を防げます。

ですから、最低条件として、ページは3秒以内に表示すること。
本当は2秒以内。
目指すは1秒以内です。

「EWWW Image Optimizer」で画像を圧縮し、サイト表示1秒以内を目指しましょう。

「EWWW Image Optimizer」を導入するデメリット

画像をアップロードする時間が、少し長くなります。
メリットが多いので、我慢しましょう。

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

まず、WordPressプラグイン「EWWW Image Optimizer」をインストールします。

【WordPress公式サイト Plugin Directory】EWWW Image Optimizer
から、直接ダウンロードもできます。

【WordPressの使い方】プラグインを確認、インストール、有効化、停止、削除する方法
から、インストールの操作手順方法(画像で説明付き)を確認できます。

「管理画面メニュー」→「プラグイン」→「新規追加」をクリック
「EWWW Image Optimizer」を検索
「今すぐインストール」をクリック
「プラグインを有効化」をクリック。

これで、インストールは完了です。

「EWWW Image Optimizer」を設定する方法

「EWWW Image Optimizer」をインストールしたら、
「管理画面メニュー」→「設定」→「EWWW Image Optimizer」をクリックし、各種設定をしていきます。

Basic Settings(基本設定)

基本設定を行います。8項目あります。
「5.PNG Optimization Level」は、「Lossy Compression(非可逆圧縮)」を試してみる価値があります。↓

2.EWWW Image Optimizer基本設定

1.Cloud optimization API Key

「EWWW Image Optimizer」の有料版を使用する際にAPI Keyを入力します。
使いませんので、空白のままにします。

2.Debugging

デバッキングとは、プログラム上の誤りを直すことです。サーバー管理者向けになります。
使いませんので、空白のままにします。

3.Remove metadata

画像撮影時に自動的に記録されるメタデータ(撮影場所、時間、コメントなど)を削除する項目。これらの情報が画像を重くする原因です。
チェックを入れたままにします。

4.JPG Optimization Level

JPEGの最適化レベルを設定します。「No Compression(圧縮しない)」か、「Lossless Compression(可逆圧縮)」か。可逆圧縮(lossless圧縮)とは、データを破損せずに復元できる圧縮方式のこと。その他の項目は有料版なら選択できます。
初期設定どおり、「Lossless Compression」を選択します。

5.PNG Optimization Level

PNGの最適化レベルを設定します。「No Compression(圧縮しない)」か、「Lossless Compression(可逆圧縮)」か、「Lossy Compression(非可逆圧縮)」か。非可逆圧縮(lossy圧縮)とは、データ内容を少し削減して圧縮する圧縮方式のこと。復元しても元のデータと一致しないが、圧縮効率が格段に良いです。その他の項目は有料版なら選択できます。
初期設定どおり、「Lossless Compression」を選択するのが無難です。
試してみて、画像がそこまで劣化しないようなら「Lossy Compression(非可逆圧縮)」を選択します。

6.GIF Optimization Level

GIFの最適化レベルを設定します。「No Compression(圧縮しない)」か、「Lossless Compression(可逆圧縮する)」か。
初期設定どおり、「Lossless Compression」を選択します。

7.PDF Optimization Level

PDFの最適化レベルを設定します。「No Compression(圧縮しない)」しか選択できません。その他の項目は有料版なら選択できます。

8.Bulk Delay

画像最適化後の停止時間を設定します。大量の画像を一回で最適化するとサーバに負荷がかかるため、画像間で停止時間を設けます。1回最適化したら1秒待つ、というように。サーバー管理者向けです。
使いませんので、空白のままにします。

9.Save Changes

全て選択したら、クリックして保存します。

Advanced Settings(高度な設定)

より詳細な設定をします。16項目あります。
特に何もしなくて良いです。↓

3.高度な設定

1.optipng optimization level

OptiPNG圧縮レベルの設定を設定します。OptiPNGとは、PNG画像を再圧縮してファイルサイズを減らす最適化ソフトウェアのこと。レベル1(1回)、レベル2(8回)、レベル3(16回)、レベル4(24回)、レベル5(48回)、圧縮します。圧縮レベルはさほど変わりません。
初期設定、「Level 2 : 8 trials」のままにします。

2.pngout optimization level

PNGOut圧縮レベルの設定をします。PNGOutとは、PNG画像を破損させずに圧縮する最適化ソフトウェアのこと。圧縮しすぎると画質が劣化するのと、「16.disable pngout」で無効化するので設定しません。
初期設定、「Level 2 : Longest Match (Fast)」のままにします。

3.Deferred Optimization

画像のアップロードまたは生成が完了した後に、それ以降のWP_cronを介して、画像を最適化する設定です。
使いませんので、空白のままにします。

4.Scheduled optimization

一定時間ごとに画像スキャンを実行して最適化します。サーバー管理者向けです。
使いませんので、空白のままにします。

5.Folders to optimize

WordPressのフォルダ以外を最適化したいとき、その相対パスを入力します。サーバー管理者向けです。
使いませんので、空白のままにします。

6.Include Media Library Folders

「投稿年、投稿月」と「その他全て」の2つのフォルダで画像を保存します。
使いませんので、空白のままにします。

7.Resize Media Images

投稿記事などにアップロードする際、最適化するサイズの上限値を設定します。例えば「Max Width 728、Max Height 0」にすると、元画像(横5184×高さ3456)がリサイズ画像(横728×高さ485)で保存されます。「Max Width 0、Max Height 0」だと最適化されません。
コンテンツ幅に合わせて設定するか、0にします。

8.Resize Other Images

メディアライブラリに保存されない、テーマなどの画像の、最適化するサイズの上限値を設定します。「Max Width 0、Max Height 0」だと最適化されません。
サイト幅に合わせて設定するか、0にします。

9.Resize Existing Images

既存の画像を最適化します。チェックを入れると「7.Resize Media Images」「8.Resize Other Images」の設定で最適化の許可がされます。
過去の画像を最適化しないなら、チェックはいれません。

10.Disable Resizes

最適化を無効化する設定です。WordPressは画像をアップロードすると、「サムネイルのサイズ(thumbnail)」「中サイズ(medium)」「元サイズ(medium_large)」「大サイズ(large)」の4種類の画像サイズを自動で生成します。「Disable Optimization」にチェックを入れると、その項目は画像が圧縮されません。「Disable Creation」にチェックを入れると、その項目は画像が生成されません。

11.Skip Small Images

指定した画像サイズ以下のサイズを圧縮しません。例えば、10,000バイト(10KB)以下の画像は圧縮しないなど。
使いませんので、空白のままにします。

12.Skip Large PNG Images

指定した画像サイズ以上のPNG画像のサイズを圧縮しません。
使いませんので、空白のままにします。

13.Exclude full-size images from lossy optimization

チェックを入れると、「元サイズ画像」を圧縮しません。
使いませんので、空白のままにします。

14.Exclude full-size images from metadata removal

チェックを入れると、「元サイズ画像」のメタデータ除去をしません。
使いませんので、空白のままにします。

15.Use System Paths

チェックを入れると、利用するツールを別の場所に置けます。サーバー管理者向けです。
使いませんので、空白のままにします。

16.disable pngout

チェックを入れると、PNGOut圧縮をしません。
初期設定どおり、チェックを入れたままにしておきます。

17.Save Changes

全て選択したら、クリックして保存します。

Conversion Settings(画像変換設定)

画像を変換する設定をします。7項目あります。
「1.Hide Conversion Links」にチェックを入れます。他は何もしません。↓

4.画像変換設定

1.Hide Conversion Links

デフォルト機能にpngからjpg、jpgからpngへ変換する機能があります。チェックを入れると、この変換を防ぎ、圧縮した画像の劣化を抑制します。
管理するファイルを減らすために、チェックを入れます。

2.Delete originals

チェックを入れると、圧縮した場合にオリジナル画像を削除します。
使いませんので、空白のままにします。

3.JPG/PNG to WebP

チェックを入れると、JPGやPNGからWebPに変換します。WebP(ウェッピー)とは、Googleが開発したWeb上の画像圧縮をする、lossy圧縮の静止画フォーマットのこと。
使いませんので、空白のままにします。

4.Alternative WebP Rewriting

チェックを入れると、WebPに書き換える設定をします。
使いませんので、空白のままにします。

5.enable JPG to PNG conversion

チェックを入れると、JPGからPNGに変換します。
使いませんので、空白のままにします。

6.enable PNG to JPG conversion

チェックを入れると、PNGからJPGに変換します。
使いませんので、空白のままにします。

7.enable GIF to PNG conversion

チェックを入れると、GIFからPNGに変換します。
使いませんので、空白のままにします。

8.Save Changes

全て選択したら、クリックして保存します。

「EWWW Image Optimizer」の使い方

「EWWW Image Optimizer」は、インストールして設定すれば、他にすることはありません。
毎回画像をアップロードするたびに、自動で圧縮します。

ただし、圧縮しすぎると画像に影響が出る場合もあります。
画像の綺麗さを保持できる、ぎりぎりの圧縮率を探してみると良いでしょう。

どこまで圧縮したかを確認するには、
「管理画面メニュー」→「メディア」→「ライブラリ」をクリックします。

下記の例だと、
Reduced by 3.6% (62.5 kB)→圧縮後にファイルサイズが3.6%減った
Image Size: 1.64 MB→圧縮後のファイルサイズ
になります。

5.圧縮率確認

1.アップロード済みの画像を一括圧縮する方法

メディアライブラリに保存している画像を一括で圧縮します。

「管理画面メニュー」→「メディア」→「Bulk Optimize」をクリック
→①「Start optimizing」をクリックします。↓

6.画像一括圧縮

「Finished」と表示したら圧縮完了です。

2.テンプレート(テーマ)に組み込まれた画像を圧縮する方法

テンプレートなど、メディアライブラリ以外に保存している画像を一括で圧縮します。

「管理画面メニュー」→「メディア」→「Bulk Optimize」をクリック
→②Scan and optimizeをクリックします。↓

6.画像一括圧縮

「Finished」と表示したら圧縮完了です。

まとめ:画像の圧縮はとても重要

綺麗な画像はたくさん使いたいものです。
でも画像はサイト表示を遅くしますから、できるだけ圧縮して使いやすいサイトにすると良いですね。

「EWWW Image Optimizer」を導入して、圧縮作業を短縮しましょう!

以上、
【WordPressプラグイン】画像を自動圧縮してSEO効果を得る方法。サーバー容量低減のおまけつき「EWWW Image Optimizer」
でした。

お疲れ様でした(^^♪

sponsored link

コメント

down

コメントする






sponsored link

カテゴリー

読者が読んでる人気記事