vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万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
  • このエントリーをはてなブックマークに追加

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

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

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

[WordPress]外部リンクに自動でアイコンをつける「External Links」プラグイン

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

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

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

[WordPress]『Better Delete Revision』で不要なリビジョンを削除しよう

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

WordPress Popular Postsで人気記事一覧を設置&CSS装飾

こんにちは、okutani(@okutani_t)です。 ブログのサイドバーに「 …

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

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

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

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

WordPressに「AddQuicktag」を導入してタグ入力を楽チンに!

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

DISQUSでWordPressのコメント欄をパワーアップしよう!

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

Table of Contents Plusで任意のページだけもくじ番号を非表示にする方法

WordPressのプラグイン「Table of Contents Plus」を …

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