チュートリアルマニアックスの中の人、@sakimitamaですこんにちは。
表示速度を速くする為に、画像のサイズって結構気を使いますよね？「JPEGmini」を使ってみたり。でも、そんな苦労ももしかすると意味が無いかも……。今回はそんな、WordPress使いが嵌りそうな画像圧縮の落とし穴についてのお話です。
表示速度向上の為に
私、このBlogの他にIllustratorのチュートリアルサイトを運営しています。（ステマ）
チュートリアルサイトってわかりやすさ命なので、画像は多めに使いよう心がけています。一記事20枚~30枚位。50枚くらい行く時も……。
そうすると、やっぱり表示が遅い。これではページが開く前に帰られてしまいます。せっかく来ていただいたのに、それはあまりにも悲しい。
ってことで、表示時間短縮のため、今までずっと画像圧縮をしていました。
たとえば「JPEG mini」
たとえば「Tiny PNG」
大きくても50KB以下を目安にポチポチポチポチ。
助けてくれたおじいさんに恩返しするため、隠れてパッタンパッタン、毎日頑張っていました。
それが、まったくの無意味だったなんて……。
画像圧縮、WordPressでは意味が無い？
私の場合は無意味でした。徒労でした。作業時間をドブに捨てたも同然でした。賽の河原の小石積み。ただでさえ無駄が多い私の人生、悔やんでも悔やみきれません。クウゥゥゥーッ！
今更後悔しても仕方がありませんが、画像の軽量化には結構気を使っていたので、この事実を知った時、かーなーりショックでした。
意味がなかった理由、それはWordPressでの自動リサイズにあります。
「リサイズ？どういうことだ？」by桐生一馬
いや、何かそんな気はしていたんです。
「一生懸命軽くしたけど、もしかしてWordPressで加工している時に重くなったりして……」って。
で、確かめてみたら、案の定、雪之丞。
WordPressでは画像をアップロードすると、サムネイルを自動生成してくる機能が備わっています。
（設定＞メディア＞画像サイズの各欄に数字が入っていれば作られている可能性が大きいです。）
私の場合は
サムネイル：150×150
中サイズ：300×300
さらにテーマで利用する
100×100
110×110
の４つの画像データが、アップロードする度に自動生成されます。この機能、大きいサイズの写真などをアップするときにはとても便利なのですが、使い所を見極めないと非常に痛い目を見ます。
下の画像をご覧ください。
色の付いているのが、元ファイル。大きさは500×500で76KB。
そしてその一つ上、自動作成された中サイズ(300×300)はなんと185KB！
もうお気づきかとは存じますが、ワタクシ記事内にはいつも『中サイズ』を貼っておりましたの！オホホホホホホホ！
画像圧縮の意味なし！完全に意味なし！
一生懸命サイズを小さくしたのにね！
倍以上ってなんだよ！ちょっと泣きそうだよ！
表示早くなんねーなーって、そりゃね！そうだよね！
そんなサイズの画像をペタペタ何十枚も貼っつけてたら重いよ！
うわぁぁぁぁあああぁぁぁああ……（AA略
と、まぁ、そうなったわけでね。
まとめ
WordPressで自動生成されたリサイズ画像を使う時は、その容量に注意！
圧縮をしていない普通の画像をアップロードしている方には、関係のない話ですが、画像圧縮とかして少しでもページサイズを抑えようと思っている方は注意して下さい。
圧縮されたファイルは、リサイズ後に重くなってる場合が多いです。数十KBの違いでも、ちりも積もればなんとやら。
使い勝手の良いリサイズのフリーソフトもあるので、サイズを小さく・軽くしたい方はそちらを使ってアップロードする画像のサイズをあらかじめ揃えておくといいかもしれません。
ちなみに、私のチュートリアルサイトでは、大きく見せたいモノ以外は最初から300×300でアップロードして元ファイルを記事に貼ることにしました。これで少しは表示速度が速くなればいいのですが……。では、また。
