【Mac】PNG画像を圧縮するならリサイズしてからにしよう。仕上がりが３倍違う！

画像よ画像、もうどうにでも軽くなぁ〜れ。


サイトの表示速度を速くする為に何をすれば良いのか。まずやるべきは、、、『画像！画像の圧縮ですよ！』そう声を大にして言いたいぐらい圧縮した事によって激変しました。その過程で手順を変えるだけで3倍の違いがあったのでその方法をご紹介。

今回使用するもの

画像　「PNG画像」

今回はPNG形式の画像です。後でJPEGに関しても少し触れます。

Mac標準アプリ　「プレビュー」

使い方：画像をダブルクリックすると自動で開きます。検索窓の横にある「工具箱のアイコン」をクリック、「左上と右下を向いた矢印のアイコン」をクリックし数値を打ち込む。

Webアプリ　「Tinypng」

https://tinypng.com/
使い方：画像をドラッグアンドドロップして、緑色の「finished」に変わったら「download」をクリックで保存。

卵が先か鶏が先か

というわけではないのですが、早い話が「リサイズしてからTinypngで圧縮」するのか、「Tinypngで圧縮してからリサイズ」するのか、という事です。素人感覚だと『どっちも同じでしょ』と思ってしまったのですが数字はそうは言っていません。ハッキリとこう言うんです。『リサイズしてから圧縮せいや!!!』と。

では次に、その手順で本当に3倍の違いがあるのかを検証していきましょう。

検証

この画像のスペック

・大きさ：1200×800
・サイズ：713KB
・種類：PNG

リサイズしてから圧縮を「手順①」、圧縮してからリサイズを「手順②」とします。

手順①と手順②の比較

気になる劣化具合もこの通り。全然気になりません。①と②を比較しても劣化の違いはほぼないのではないでしょうか。
※どちらも横幅640pxの縦幅427でリサイズしています。
※①と②で色味が少し違って見えますが、現物は見分けが付かないぐらい同じです。

手順①のスペック

・大きさ：640×427
・サイズ：78KB　←注目
・種類：PNG

手順②のスペック

・大きさ：640×427
・サイズ：356KB　←注目
・種類：PNG

結果

この画像で言えば４倍近く差がありますが、まあ３倍ということで。笑　サイズもそうですが、画像によっては色味や劣化具合が違う場合もあるかもしれませんので悪しからず。

全く同じ素材と同じツールを使ってるにも関わらずこの差です。メカニズムはよくわからないのですが。この事を意識するだけで、「サイトの表示速度もPVも３倍に!!!」とまではいかないでしょうが、同じようなクオリティーなら"軽い"にこした事はないですよね。圧縮する必要があった場合はぜひ思い出してみてください。

オマケ

この現象を発見した後に同じようにJPEGで試してみたところ、ほんの少しですが「手順②」の方が小さくなりました。PNGとは逆ですね。詳しいことはよくわかりませんが、どうするべきかは数字を見ればいい。そんな気がします。

あとがき

この手法に限った事ではないのですが、画像を圧縮することによってかなりサイトの読み込み速度が上がりました。まぁ正直めんどくさい作業なんですが、読み込みが遅いと"凄くよろしくない"ので出来るだけ軽くするべきです。ということで、「PNG画像を圧縮するならまずリサイズをしよう！」でした。