*

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

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で

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

※最大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高速化&スマート運用必携ガイド

 

スポンサーリンク

  • このエントリーをはてなブックマークに追加
follow us in feedly

更新日:2014年5月18日

※Google+限定投稿もしています

お問合せ

IMG_0815
僕が売れる文章力の為に買いまくった39冊のライティング本など

少しでも良いという評判を聞いたライティング系などの本はすぐに購入してし...

14324010468_7f14d79700_z
Amazonプライム(送料無料)加入で悩む方に1年利用してる3つのメリットの感想

Photo: undefined by ActuaLitté 4/6に...

employee-1118183_1280
10年ほど面接して人を雇い、育ててきて思う事。

人を統率するには3つ方法があります。 恐怖で従える 信頼で従える マニ...

IMG_0628
仕事のスピードを上げる~やりたい事が多すぎて何も進まない人に「400のプロジェクトを同時に進めるスピード仕事術」

最近やりたい事、やらなければならない事は多いのに全然進まない、捗らない...

medium_2271513941
センス抜群!便利すぎる人気のアイデアグッズまとめ

ネットで話題になった商品や自分で使って便利だったグッズを随時上書きで更...

medium_322458462
Webで生きていくなら絶対にあった方が良い道具のまとめ[改訂版]

こんにちは。enjiです。 Web屋として7年程生き抜いているのですが...

medium_10575089545
人生で疲れたなぁと思ったら思い出したい当たり前の事

上手くいかない時、どうしようもない気分の時ってありますよね。 不安や恐...

medium_2546557644
仕事をする理由が無い〜日本人の目標は「楽をする事」なんじゃないか

昨日、たまたまつけていた番組が非常に良かった。加藤浩次さん司会の「全力...

medium_4175322330
面白いマンガ! 読んで損なし人気のおすすめ漫画を厳選紹介

photo credit: Stéfan via photopin c...

sgre
最安値!ポケットWiFi比較で一番安いおすすめ料金プランはどれ?

2016年5月現在、ポケットWiFiを比較した時に一番安い料金プランは...