ガジェット系や、旅行、ノウハウ系のブログを運営していると、１記事に使う画像の量って多いですよね。
画像のファイルサイズが大きいとページの表示速度に影響して、なかなか画像が出てこないなどといった事もあるかと思います。
WordPressには「Compress JPEG & PNG images」っと言うTinyPNGから提供されているプラグインもあるのですが、今回ご紹介するのは、すでにご存知の方も多いかと思いますが、WEBサービス版の「TinyPNG.com」を紹介しようと思います！
画像を簡単綺麗に圧縮できるTinyPNG.comとは
笹をを食べているパンダが目に入るこちらのサイトが「TinyPNG.com」です！
画像をTinyPNG.comへアップロードするだけで大幅に画像を圧縮してダウンロードできため、手軽と言う事もあり多くのブロガーやサイト運営者から人気があります。
また、高圧縮する割りに、画像の劣化はそれ程なく、綺麗に圧縮できる点も評価できる部分です。
圧縮する画像ファイルの拡張子は「.png」だけでなく、「.jpeg」にも対応しているため、プロが使用するような画像ファイルでなければ、こちらで十分と言えるのではないでしょうか。
-
-
TinyPNG – Compress WebP, PNG and JPEG images intelligently
tinypng.com
超簡単！TinyPNG.comで画像を圧縮する方法
画像の圧縮方法はとても簡単です！
ページトップにある「Drop your .png or .jpg files here!」と書かれた部分に、PNG形式もしくはJPG形式の画像ファイルをドラッグ&ドロップするだけです！
画像がアップロードできると、自動的に一枚ずつ画像圧縮が始まります。
完了すると、アップロードした画像ファイル名の横にある進捗確認するのバーが「Finished」となり、バー左側の圧縮前のファイルサイズと、バー右側の圧縮後のファイルサイズが確認できます。
圧縮前の画像ファイルサイズが大きいと、圧縮率も-70%を超える事も多く、大体250KB前後程まで圧縮してくれます！
なお、同時にアップロードできる枚数は20枚までで、１つのファイルサイズは5MBまでと制限されていますが、サイトを更新すれば、20枚以上繰り返して圧縮できる他、O-DANなどから取得する商用フリー画像は、5MB以内の画像ファイルサイズがほとんどなので、あまり気にする必要はなさそうです。
-
-
まとめて一括検索！完全無料写真素材は複数サービスまとめて一括検索できる「O-DAN」で決まり！
続きを見る
画像圧縮による劣化を調査してみた
TinyPNGは、画像を綺麗に高圧縮できる事で有名ですが、画質とファイルサイズはトレードオフの関係です。
圧縮率は圧縮前のファイルサイズによって大幅に変わってしまうため、圧縮率と言うよりも、画像ファイルサイズと画質の関係をみていこうと思います。
普段はTinyPNGでの画像圧縮は一度だけアップロードして画像圧縮するのですが、どこまで圧縮できるのか調査すべく、６回、画像圧縮した画像を再圧縮する形で繰り返しアップロードして画像圧縮してみました！
では、早速初めてみましょう！
今回準備した画像は417KBのこちらの画像です。
圧縮前の画像
第１回目の画像圧縮
まず第１回目、画像圧縮した画像が以下の通りです。圧縮前の画像サイズが大きくない事もあり、画像圧縮率は-37%でした。
左側が画像圧縮前で、右側がTinyPNG.comで画像圧縮した後の画像です。
ファイルサイズは261KBとしっかりと圧縮されていますが、画質についてはキレイ！っと言っても良い程、劣化を感じさせないレベルです。
第２回目の画像圧縮
続けて、第２回目の画像圧縮。
ポイント
以下、左側の画像は全て圧縮前の画像との比較です。
第２回目の圧縮率は-10%で画像ファイルサイズは235KBと、第１回目に比べ、圧縮率はそれ程良くないのですが、-これまたファイルサイズが小さくなりました。
是非、拡大しながら確認していただきたいのですが、画質の劣化具合が少し出始めた感じです。
とは言え、じっくりと見ないと分からないレベルで、比較をしなければ、十分キレイな画質と言えるのではないでしょうか。
どんどん圧縮していきます！
第３回目の画像圧縮
第３回目の画像圧縮。
パンダの首元をご覧いただくとわかりやすいかと思いますが、パンダの毛先辺りが鮮明でなくなっている事がわかります。今回の画像圧縮率は-4%と2桁にも届かない程度ですが、明らかに画質は低下している事がわかります。
では、４回から６回まで一気にご覧ください！
全て、再圧縮を繰り返した画像です。
第４回目の画像圧縮
４回目の画像圧縮。
画像圧縮率は-3%、画像ファイルサイズは220KBでした。
第５回目の画像圧縮
５回目の画像圧縮。
画像圧縮率は-2%、画像ファイルサイズは214KB。もうほとんど圧縮できないレベルに到達しています。
第６回目の画像圧縮
６回目の画像圧縮。
画像圧縮率は-1%！画像ファイルサイズは211KBで、画像圧縮前の半分とまではいきませんでしたが、大幅に圧縮されました。
いかがでしょうか？ここまで画像圧縮を繰り返す事はないと思いますが、明らかに画質が落ちてしまい、パンダの毛並みも分からなくなっている部分があります。
また、背景のぼかしはと言うと、昭和期に写真館で印刷するようなざらざらとした写り方をしています。
流石にこれでは画像を使ったレビュー記事を作成するには使えませんよね。
まとめ
画質と画像圧縮によるファイルサイズは、これでトレードオフである事が良くわかったのではないでしょうか。
ほとんどの方は１度の画像圧縮で良いと思いますが、もう少しファイルサイズを軽くしたい！っと言う方は、２回程度にしておいた方が良さそうです。
画像のファイルサイズをすごく気にするのであれば、記事に掲載する画像を選定するなどの対策も必要になるかもしれません。
以上、TinyPNG.comで画像圧縮する方法と画質とファイルサイズの関係についてご紹介しました。
-
-
ガジェット - UMEPAPA
umepapa.com
