WordPressの画像をリサイズして自動で圧縮する方法

PR

medium_2261077597

プラグインを極力避ける事で、WordPressの高速化
できる限り実現していたのですが、如何せんブログでネックなのが

重たい画像!

とにかく、ENJILOGは画像を多用するので出来るだけ
「JPAEGmini」とかリサイズで対応しなければいけないのですが

現実問題として

面倒くさい!

ついついもうメディアサイズでサイズを指定するだけになってしまう・・・
そんな僕に朗報が!(ていうか検索してただけだけど・・・)

WordPressで画像をアップロードする際に自動的にリサイズする方法

これを実装したら予想以上の結果に・・・

先に言うと、どんなに重い画像をそのままUPしても

自動で、リサイズ&圧縮(※要プラグイン)して、
これ以上ない最適な状態で表示します!

photo credit: peasap via photopin cc

画像を適切に処理すれば
WordPressが驚くほど高速に!!

まず、使用したのはこちらの画像

b78_original1-546x364

Photo:モデルピース

これ、そのままだと5616px×3744pxで9.87MBもあるクソ重たい画像です。

で、これを10個並べる。

testC_Stinger2-demo_20130825-151444

で「GTmetrix」でサイトの表示速度を調べると

2013-08-25_120905

「E」「C」判定・・・orz

当然と言えば当然ですが良くないですね。
これが今までの僕のサイトです。

何で表示が高速になるの?

前述のサイトのコードを入れた事により、
画像をアップするだけで最大widthの546pxにリサイズされます。

どういう事かというと、今まではアップした元画像は

2013-08-25_144057

この通り「5616×3744px」の状態のままUPされ、表示の時のみリサイズされます。

しかし、新しいStingerではUPすると自動で
最適のサイズにリサイズされ、アップした元画像が546pxになります。

2013-08-25_144121

これにより、圧倒的に画像サイズが抑えられ

2013-08-25_122806

同じ内容でも「B」「C」とここまで変わります!

原理としては、非常に単純明快なのでこうなる事は当然ですよね。
ちなみに、画像サイズはStinger用にfunctions.phpで

function thumbnail_size_setup() {
if(update_option('thumbnail_size_w', 150)) {
update_option('thumbnail_size_h', 150);
}
if(update_option('medium_size_w', 400)) {
update_option('medium_size_h', auto);
}
if(update_option('large_size_w', 546)) {
update_option('large_size_h', auto);
}
}
add_action('after_setup_theme', 'thumbnail_size_setup');

 とそれぞれサイズを指定済みです。
メディアで設定したサイズは無視されますので注意して下さい。

※最大heightは、メディア指定に従います。

重要!対応はWP3.5以上より

2013-08-25_170139

「otocon」さんのサイトにも注意書きがある通り、バージョンは3.5以上の対応です。
以下の場合は「HTTPエラー」になりますので注意です。

素晴らしいコードを掲載頂いている「otocon」さんに
この場を借りてお礼申し上げます。

http://www.oto-con.com

※ちなみに「cloudflare」を使用されている方は最終的にはそんなに差はないかもしれません。でも、やって損は絶対無いので僕は設定しています。

追記!画像をついでに圧縮するプラグイン
EWWW Image Optimizer

2013-08-25_163440

@marubon_jpさんからのご紹介(ありがとうございます!)
プラグインのEWWW Image Optimizerを使用すれば画像サイズの削減、画像容量の削減、画像リスケールのオーバヘッド削減が全て対応できるとの事。

2013-08-25_163201

教えて頂いた@marubon_jpさんのブログはコチラ!「 試行錯誤ライフハック

もう、JPEGminiいらないのか?

有料版購入してるけど・・・

EWWW Image Optimizerの使い方

まずは以下からダウンロード
http://wordpress.org/plugins/ewww-image-optimizer/

アップロードして有効化したら英語だらけなのでGoogleさんでチェック!

2013-08-25_163920

PNGに変換出来たりもするようですが特別必要な事はなさそうなのでスキップ
というか下手にいじるとオリジナル画像が消えるので注意!

「メディア」を確認

2013-08-25_164658

2013-08-25_164119

「Optimize now!」というボタンが追加されています。
早速ポチッ

2013-08-25_164158

ちょっと上の画像が隠れて見えませんが

「380KB」→「323KB」

と圧縮終了!これは簡単。

2013-08-25_164228

BulkOptimizeで一気に全部圧縮できます。(時間かかります。)

ちなみにプラグイン有効化後は
画像をアップする時に自動で圧縮してくれるので手間いらずです。

2013-08-25_165822

圧縮完了したものは「Re-optimaize」になっています。

これはいいですね!
これならもう、画像をアップするだけで自動で最高の最適化をしてくれる!

519NdYFoJ5L._AA278_PIkin4,BottomRight,-30,22_AA300_SH20_OU09_

WordPress高速化&スマート運用必携ガイド

 

-Stinger