WordPressの縮小画像はファイルサイズが増えるのは本当か体を張って調べてみた。

20150413-eyecatch

miyamoです。

先日の記事で、TinyPNGで画像圧縮して、サイトのパフォーマンスを上げましょうということを書きました。

TinyPNGの使い方は簡単!SEOにも効く画像サイズ圧縮のススメ
TinyPNGの使い方は簡単!SEOにも効く画像サイズ圧縮のススメ
miyamoです。 みなさんは、ブログに画像貼るときに、そのまま画像ファイルをアップロードしていませんか?サイトの表示スピード...

その中で、TinyPNGで圧縮した画像をアップロードした時に作られる、サムネイル画像のファイルサイズが、大きくなってしまうということに触れました。

WordPressのメディア機能は、アップロードした画像を自動的にリサイズして、小さいサイズのサムネイル画像を作ってくれます。大きな画像を貼るときに、サムネイルとして小さい画像を使えるので、便利な機能です。

この自動に作られるサムネイル画像のファイルサイズが、オリジナル画像よりも増えてしまうことがあります。

今回は、そのことを調べてみました。

すいません。体を張ってというのは言いすぎました。でも、ちゃん調べましたよ。

それでは、いってみよー。

photo by Oliver Symens

スポンサーリンク

実際に確認してみました

本当にそんなことがあるのか、実際に画像をアップロードして試して見ます。JPEGとPNGの2つの画像を使います。

実験対象の画像データ

今回は、JPEGとPNGの2つの画像で試してみます。JPEGはスマホで撮影した写真、PNGは画面のキャプチャです。

20150413-JPEGmini 20150413-PNGmini
JPEG画像 1280×960 PNG画像 1440×900

オリジナル画像をアップロードした場合

TinyPNGで画像圧縮せずに、オリジナル画像をアップロードした時のファイルサイズを見ていきます。

JPEG ファイルサイズ
オリジナル 798KB
600×450 103KB(12.9%)
320×180 46KB(5.7%)
150×150 33KB(4.1%)
100×100 28KB(3.5%)

まずはJPEGです。僕は設定で横幅600のサムネイルだけを作るようにしています。他の3つはテーマで作られるのですが、全ての画像で作られるので、使わないものも中にはあります。(アイキャッチ用なので、使わないものもあるのです。)

順当にファイルサイズが小さくなっています。写真サイトなどで、ブログ表示は600のサムネイル、クリックするとオリジナルのきれいな画像が表示される、というような使い方には良いですね。

次にPNGです。

PNG ファイルサイズ
オリジナル 668KB
600×375 188KB(28.1%)
320×180 58KB(8.7%)
150×150 23KB(3.4%)
100×100 12KB(1.8%)

こちらも順当にファイルサイズが小さくなっています。

ここまでは、問題なさそうです。全てオリジナルに対して、ファイルサイズが小さいサムネイル画像が作られています。

TinyPNGでサイズダウンしたものをアップロードした場合

問題はここです。TinyPNGで画像を圧縮したものをアップロードすると、どうなるのでしょうか?

まず、TinyPNGで圧縮してみます。

オリジナル 圧縮後
JPEG 798KB 139KB(17.4%)
PNG 668KB 188KB(28.1%)

あいかわらず、TinyPNGの圧縮ポテンシャルはすばらしいです。みなさんも、画像をアップするときは、圧縮しましょう。サーバーのディスク容量の節約にもなりますよ。

では、JPEGから見ていきます。

JPEG ファイルサイズ
圧縮画像 139KB
600×450 79KB(56.8%)
320×180 24KB(17.2%)
150×150 11KB(7.9%)
100×100 6KB(4.3%)

JPEGは、縮小されるにしたがってファイルサイズも小さくなりました。TinyPNGで圧縮していないオリジナル画像の時よりも、圧縮した画像のほうがそれぞれの縮小画像のファイルサイズも、小さくなることが分かりました。600の画像で2割減くらいです。

続いて、PNGです。

PNG ファイルサイズ
圧縮画像 188KB
600×375 174KB(92.5%)
320×180 55KB(29.2%)
150×150 22KB(11.7%)
100×100 12KB(6.3%)

こちらも、順当に縮小画像のほうが、ファイルサイズが小さくなっています。PNGファイルでも、縮小画像のファイルサイズは小さくなっています。ん?ファイルサイズが大きくなるはずで調べてたのに。

読んだ記事では、PNGファイルはファイルサイズが大きくなっていたのですが、今回の実験では小さくなりました。

もしかしたら、画像によっても違いがあるのでしょうか?

PNG画像で縮小画像のほうが大きくなることはあるのか?

過去にアップロードした画像の中で、オリジナルよりも縮小画像のほうが、ファイルサイズが大きくなっているものがあるか調べてみました。

いくつかありましたが、それほど多くはありませんでした。縮小画像のほうがファイルサイズが大きくなっていたのは、こんな画像です。

20150408-1

20150409-2

結構シンプルな画像は、縮小画像のほうが少しだけ、ファイルサイズが大きくなっています。

しかし、もともとファイルサイズが小さく、増えたとしてもそれほど影響はない程度です。1つ目の画像は、オリジナル画像の28KBに対して、600縮小画像は47KBです。19KB増えていますが、サイズ的には問題ない範囲ではないでしょうか。

まとめ

PNGがファイルは、文字だけ、線だけのようなシンプルな画像は、TinyPNGで圧縮したオリジナルよりも、WordPressで作られた縮小サムネイル画像のほうが、ファイルサイズが大きくなることがありました。

もともとのファイルサイズが小さい上、増えても微増ですので、それほど気にするものではないと思いますし、僕も気にするのをやめました。

ということで、結論。

気にしなくてもいいんじゃね?

おしまい。miyamoでした。

スポンサーリンク

この記事がおもしろかったらシェアしてもらえると嬉しいです。

Twitterでのフォローお待ちしています。