2001Yのプロフォール画像

2001Y@Y20010920T

みなさんこんにちは2001Y(@Y20010920T)です。

テーマ作成での高速化にあたって、HTTPリクエスト数を減らすためにテーマ内の画像はインライン化することんしたのですが、JPEGとSVGだったら 絶対にSVGの方が軽くて拡大に強い! と思い込んでいたのですが、どうやら場合によるとSVGの方が重いことがあるようです。

もちろん、JPEGは JPEGmini と ImageOptim を併用して圧縮して比較していましたので、SVGも圧縮すべきです。探してみると、 SVGO というものがあるようで、それは node.js を使って、ターミナルで操作するようでした。今後も使っていきたいので、GUIで操作できるものを探していたら、同じ SVGO でGUI操作に対応した「svgo-gui」を見つけました。

コマンド操作いらずで、高速な「svgo-gui」

ScreenShot
svg/svgo-gui: Node-WebKit based GUI for SVGO
hatena

ダウンロードはGithubからです。ファイルは7zで圧縮されていますので、解凍ソフトが必要です。

自分にあったものをダウンロードしましょう。
MacとWindowsに対応しており、Electron似のnw.jsがベースで作られているようです。なので自分でやればLinuxも使えそうです。

使い方は簡単で、ドラッグ&ドロップするだけでかなり高速(一瞬)で圧縮されます。

ファイルが置き換わるので比較したいときは複製してから行った方が良いです。ImageOptimのようにゴミ箱に入るわけでもないので。

40%ほど圧縮できました。なかなかの制度だと思います。圧縮前との比較はこんな感じです。

圧縮前
圧縮後

SVGO をWebツールでも使える!

ScreenShot
SVGOMG - SVGO's Missing GUI
hatena

今回はダウンロードが必要なアプリを使用しましたが、同じく SVGO を使用したWebで完結するツールも存在します。

試して見たのですが、ぼくの場合ほぼ圧縮されず、 svgo-gui の方が優秀だったので使いませんでしたが、たまに使用するものなのでWebツールもありかもしれません。

参考

ScreenShot
見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI | コリス
hatena

最後に

MyIcon2001Y これで高画質(無限ですがw)で軽量な表示が可能になりました!
使っているMacBookAir自体がRetinaに対応してないので、どうしてもRetina対応は大変なのですが、SVGなら大丈夫ですね!(スクリーンショット撮って載せてる時点で既に未対応ですね笑)