画像圧縮の神ツール『ImageOptim』の使い方（JPG, PNG対応）
ブログを運営していて『サイト重すぎでしょ…』との声を数多くいただいていました。
サイト診断用のブックマークレットを使って診断してみると、原因は以下のとおり。
- 画像の読み込み
- CSSの読み込み
- JavaScriptの読み込み
※サイト診断用のブックマークレットの使い方は以下の記事を参考にどうぞ。
» あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット
CSSは外すことできないし、JavaScriptは嫌いなので放置。そこで『画像の圧縮をするしかないかぁ…』と考えていました。
そこで見つけたのが『ImageOptim』( ◜◡‾)
今回のテーマは以下です。
画像圧縮のツール『ImageOptim（JPG, PNG対応）』のすばらしさ紹介
記事のながれ
- 画像圧縮の神ツール『ImageOptim（JPG, PNG対応）』のDL方法
- 『ImageOptim』とその他の画像圧縮ツールの比較
- 『ImageOptim』の欠点は？
ではブログはじまり㏄= ㏄=┌( ・_・)┘
１．画像圧縮の神ツール『ImageOptim（JPG, PNG対応）』のDL方法
書くまでもありませんが、以下の公式サイトからダウンロードできます。
» ImageOptim — better Save for Web
ちなみにMacのみに対応しているので、WindowsユーザーはMBAを買っちゃいましょう笑。UIはとってもシンプル( ◜◡‾) ※この画像もImageOptimで圧縮しました。
上記スペースに画像をドラッグ＆ドロップするだけ。
２．『ImageOptim』とその他の画像圧縮ツールの比較
有名な画像圧縮ツールは以下、3つかと思います。
それぞれのツールの特徴をかんたんにまとめます。
JPEGminiの特徴
JEG専用で画像圧縮できるアプリ。無料版は1枚ずつしか圧縮できないが、有料版（1700円）は複数のJPG画像を一括で圧縮できる。
TinyPNG
PNG専用で画像圧縮できるサイト。同時に20枚まで画像圧縮ができます。
PNG mini
PNG専用で画像圧縮できるアプリ。一括で複数毎の画像圧縮ができます。100円で売られているので、安さにつられて買ってしまうアプリ代表。
もうおわかりかと思います。
上記ツール、サイトはJPG専用、もしくはPNG専用です。
「いちいち使い分けるのだるい。。。」
よって、JPG, PNG対応の『ImageOptim』が神ということです＼(＾o＾)／
「ImageOptimは圧縮率や鮮度が悪いのでは…？」と思う人もいるかと思いますので、ためしに、同じ画像をつかって実験してみました。
画像圧縮コンペの結果：ImageOptimの勝利( ・ ̫・)
ほんとすばらしすぎる。。ImageOptim。。
3, 『ImageOptim』の欠点は？
最強だと思われていたImageOptimにも欠点がありました。
ImageOptimの欠点は処理速度の遅さです。
どれくらい遅いかというと『ImageOptimで画像の圧縮中に他の作業ができる』くらいです。
抽象的ですいません。。
ただ、ImageOptimに画像を放り込んだあとに他の作業をしていればいいだけなので、個人的にはあまり気にしていません。
ぜひ、ImageOptimをダウンロードして、UXの優良ブログをつくってください。
おわりー。