vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

「EWWW Image Optimizer」プラグインで画像の自動圧縮を行う

      2015/10/11

LINEで送る
Pocket

wp-ewww-io
こんにちは、okutani(@okutani_t)です。WordPressで画像ファイルを扱う際に気を付けなければいけない事は、ファイルサイズをできるだけ小さくすることです。

画像を圧縮しないまま気にせずアップロードしてしまうと、サイト全体の読み込みが遅くなります。

そこで、WordPressのプラグイン「EWWW Image Optimizer」を導入することで、「これから投稿する画像」と「今まで投稿した画像」を全て圧縮できるようになり、とても便利です。

では、さっそくプラグインを導入していきましょう。

スポンサーリンク

EWWW Image Optimizerの導入

ダッシュボードから「プラグイン」→「新規追加」を選択します。

wp-plugin-install

右上の検索バーに「EWWW Image Optimizer」、「いますぐインストール」をクリック。

wp-ewww-io

インストールが完了したら「プラグインを有効化」をクリックしましょう。

wp-ewww-io2

これでEWWW Image Optimizerが使えるようになりました。

EWWW Image Optimizerの設定

「設定」→「EWWW Image Optimizer」をクリックして設定画面を開きます。

wp-ewww-io3

Basic settings

Basic settings」の中の「Remove metadata」にチェックします。これにチェックを入れておくと画像の不要なメタデータ(位置情報等)を削除してくれます。

wp-ewww-io4

Conversion Settings

次に「Conversion Settings」の「Hide Conversion Links」をチェックしましょう。このプラグインではJPG→PNGに変換できる機能があるのですが、ほぼ使わないのでこのチェックで無効にしています。

wp-ewww-io5

これで初期設定は完了です。設定項目も少なく、楽に導入できましたね。

画面下の「Save Changes」ボタンから、忘れずに設定を保存しておきましょう。

今までに投稿した画像を全て圧縮する

初期設定が終わったので、今まで投稿した画像を全て圧縮してみましょう。ダッシュボードから「メディア」→「Bulk Optimize」を選択します。

wp-ewww-io6

今までの画像(サムネイル含む)を一括で圧縮スタートするには「Optimize Media Library」の「Start optimizing」をクリックします。

wp-ewww-io7

ちなみに、その下にある「Optimize Everything Else」はテーマ内で使っている画像を全て圧縮してくれます。今回はおこないませんでしたが、画像が多いテーマを使っている方はこの項目で圧縮してみてください。

wp-ewww-io8

では話しを戻して、Optimize Media LibraryのStart optimizingをクリック。

wp-ewww-io9

今回はテストで画像を1枚だけ圧縮してみました。圧縮がスタートして、各サムネイルに対しても圧縮が行われているのが確認できます。各サイズで20%以上圧縮されていますね。

また、新しく投稿する画像はEWWW Image Optimizerが有効化されていれば全て自動で圧縮されます

一度このプラグインを入れてしまえば、次からは画像の圧縮を気にせずにアップロードすることができますね。

まとめ

このプラグインを導入するだけで、サイトにある画像全てが圧縮できてとっても便利です。WordPressを導入する時は忘れず導入しておきましょう。

サイト運営で画像の圧縮は必須なので、ぜひこの機会にEWWW Image Optimizerを導入して、その効果を確かめてみてください。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
このプラグインを使わずに、画像圧縮のWebサービスやアプリを使って圧縮を行ってもOKです。ご自身のやり方にあった画像圧縮を選択してみてください。

 - WordPressプラグイン

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

「Preserve Editor Scroll Position」プラグインでエディタのスクロール位置を固定する

こんにちは、okutani(@okutani_t)です。WordPressでは書 …

All in One SEO PackでSNSのシェア設定をおこなう

vdeep管理人okutani(@okutani_t)です。WordPressで …

「Broken Link Checker」を使ってサイトのリンク切れを防ごう!

こんにちは、okutani(@okutani_t)です。みなさんはサイトに貼り付 …

[WordPress] 画像をあとから読み込んで表示速度アップ!「Lazy Load」プラグイン

こんにちは、okutani(@okutani_t)です。皆さんはブログ記事を書く …

[WordPress]お問い合わせフォームを「Contact Form 7」で作成する

こんにちは、okutani(@okutani_t)です。サイトを運営していて必要 …

[WordPress] Amazonアソシエイトを綺麗に表示「AmazonJSプラグイン」導入方法

こんにちは、okutani(@okutani_t)です。Amazonアソシエイト …

カテゴリーの順番を変更する「Category Order」プラグイン使い方

こんにちは、okutani(@okutani_t)です。今回は、かんたんにWor …

All in One SEO PackのXML Sitemapで最低限行うべき設定項目

こんにちは、okutani(@okutani_t)です。WordPressでサイ …

WordPress全バックアップを「BackWPup+Dropbox」で行う

こんにちは、okutani(@okutani_t)です。みなさんはWordPre …

WordPressのサイトマップを「PS Auto Sitemap」で作成してみよう

こんにちは、okutani(@okutani_t)です。サイトマップとは、サイト …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。