PNG画像を簡単に圧縮して軽くするにはOptimizillaを使おう！
PNG画像ってめっちゃきれいですよね。
フラットデザインが普及して、よりPNG画像を使う機会は増えたのではないでしょうか。
でも、画像が綺麗な分、重くなってしまいがち。
今回はそんなPNG画像を簡単に軽くする方法をご紹介します！
そもそもPNGとは
画像のフォーマットを現します。保存形式です。「ピング」と読みます。
jpgとの違いは？
画像のフォーマットで一番有名なのは「jpg」でしょうか？
違いとしては、jpgが「非可逆圧縮」なのに対し、pngは「可逆圧縮」である点です。
つまり、「圧縮によりデータが劣化することがない」形式。
だからjpgよりもキレイに保存できる、というイメージがあるのではないでしょうか？
PNGは単調で色数が少ない場合におすすめ
PNGはJPEGのような24bitフルカラー（1677万色）にも、8bitカラー（256色）にもすることができます。
その代わり、フルカラーで保存する際にはとっても重くなってしまうので、写真よりもべた塗りイラストのような単調な画像を保存するのに適しています。
単調な画像であればとっても軽いサイズで保存できます。
これほんと〜の初心者の方にはありがちなのですが、web用に画像保存といえばjpg！といった概念からか、全てjpgにされてしまいます。
実は、JPEGで単調な画像を保存する方が、ノイズも出るだけでなく画像が重くなってしまうんです。
なので、色数が少なかったり、アイコンなどの場合はpngで保存しましょう。
透過ができちゃう
PNGは透過することが可能です。
サイト制作をしていると、ロゴなどで特に、背景に溶け込むようにしたい！となることが多いのではないでしょうか。
jpgだと、白背景になってしまってなんだかダサいですよね。。
そんなときはぜひ、PNGで作成してみてください。
周りが透過されて保存されますよ！
photoshopなどを使われる際は、書き出しの際に「透明部分」にチェックを入れてくださいね。
そんなPNGを圧縮して軽くしよう
さて、PNGは「可逆圧縮」であり、基本劣化しない画像だとお伝えしました。
そのため、単調な画像や色数が少ない画像を使うことを推奨しています。
しかし…
色数は多いし複雑なイラストだけれど、どうしてもWEB上で透過したい！！どうしてもキレイに表示させたい！！
こんな時、ありますよね！？
こんな時にぜひお試しいただきたいサイトがあります。
サイトにドラッグするだけで簡単圧縮！
以下のサイトで、簡単にPNG画像が圧縮できちゃいます！
画像の重さが半分以上軽くなる！
なんと見た目をほぼ変えずに、重さを半分以上軽くすることができます！
もちろん、単純な画像でも軽く出来ます。
複雑な画像も、多少の劣化はありますがかなり軽くできてしまうのです！！
色数を減らすことで軽くなる画像
先程フルカラーだと重くなるという話もしましたが、色が増えるとその分情報が増えるので重くなります。
そこで、こちらのサイトで色数を減らして調整することが可能です。
パンダで有名な画像圧縮サイトもありますが、Optimizillaは色数を更に調整することができます！！
Optimizillaの使い方
①まずはサイトにアクセス
恐竜が目印。
②「Drop Your Files Here」に圧縮したいファイルをドラッグ＆ドロップ
すると勝手に61%も画像が圧縮されました！！
なんと、310KBもあった画像が121KBに！！
見た目も、ほぼ代わりませんね…！！
たくさんの画像を同時にドラッグ＆ドロップすることもできます！
一気に素材を圧縮しちゃいたいときに便利ですね。
③色数を調整して画像を更に軽く
最後に、もう少し軽くしたい！という場合は
右側にある「colors」とかかれたバーを下げて調整。
こちらで色数が少なくなります、上記の場合は19色のようです。
良いなと思った段階で、「APPLY」をクリックすると、反映されます。
更に、 「＋」「ー」ボタンを押してズームしました。
よく見ると画像がザラザラしています。gif画像にしたときみたいですね。
色数が少ないので、ボカしたり色が徐々に変化していくグラデーションのような画像ではこのようにざらついてしまうことがわかります。
④DOWNLOAD
最後にダウンロードをすればOK！
たくさんの画像を同時にアップした場合には、この下にある「DOWNLOAD ALL」をクリックすると、一括でzip形式になってDLできますよ。
以上で簡単にPNGが軽くなりました！！
WEBでも使いやすいですね。
ちなみにPNGの他にも、SVG画像も使いやすいですよ〜！！
SVG画像を活用して、どんなデバイスでも綺麗に画像を表示！ベクター画像でレスポンシブ対応 - misallychan.com
WEBで役立つ画像「SVG」とは【保存形式】 - misallychan.com
