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

その中で、TinyPNGで圧縮した画像をアップロードした時に作られる、サムネイル画像のファイルサイズが、大きくなってしまうということに触れました。
WordPressのメディア機能は、アップロードした画像を自動的にリサイズして、小さいサイズのサムネイル画像を作ってくれます。大きな画像を貼るときに、サムネイルとして小さい画像を使えるので、便利な機能です。
この自動に作られるサムネイル画像のファイルサイズが、オリジナル画像よりも増えてしまうことがあります。
今回は、そのことを調べてみました。
すいません。体を張ってというのは言いすぎました。でも、ちゃん調べましたよ。
それでは、いってみよー。
photo by Oliver Symens
目次
実際に確認してみました
本当にそんなことがあるのか、実際に画像をアップロードして試して見ます。JPEGとPNGの2つの画像を使います。
実験対象の画像データ
今回は、JPEGとPNGの2つの画像で試してみます。JPEGはスマホで撮影した写真、PNGは画面のキャプチャです。
![]() |
![]() |
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画像で縮小画像のほうが大きくなることはあるのか?
過去にアップロードした画像の中で、オリジナルよりも縮小画像のほうが、ファイルサイズが大きくなっているものがあるか調べてみました。
いくつかありましたが、それほど多くはありませんでした。縮小画像のほうがファイルサイズが大きくなっていたのは、こんな画像です。
結構シンプルな画像は、縮小画像のほうが少しだけ、ファイルサイズが大きくなっています。
しかし、もともとファイルサイズが小さく、増えたとしてもそれほど影響はない程度です。1つ目の画像は、オリジナル画像の28KBに対して、600縮小画像は47KBです。19KB増えていますが、サイズ的には問題ない範囲ではないでしょうか。
まとめ
PNGがファイルは、文字だけ、線だけのようなシンプルな画像は、TinyPNGで圧縮したオリジナルよりも、WordPressで作られた縮小サムネイル画像のほうが、ファイルサイズが大きくなることがありました。
もともとのファイルサイズが小さい上、増えても微増ですので、それほど気にするものではないと思いますし、僕も気にするのをやめました。
ということで、結論。
気にしなくてもいいんじゃね?
おしまい。miyamoでした。