【デザイナー】軽いサイトは良いサイト。データサイズの圧縮ツールを紹介：Useful Design Tools Vol.02

Compressor.io | 見た目ほぼそのままに画像ファイルを圧縮

最近じゃPC・モバイル双方の環境においてユーザーの通信速度が上がっているため、以前よりも大きめの画像や低圧縮のPNGなどを使う機会が増えました。特に透過PNGは以前に比べて気軽に使える環境が整ったため、サイト内で使われる機会も増えてきました。

こうした大きい画像や透過PNGは、作る側にとっては都合がいいものの、閲覧者という立場になるとページ内の関連ファイルサイズが大きくなりがちです。サイト制作者としてはリッチコンテンツにするか素早いロードのサイトにするかでジレンマが起こります。
今回紹介するCompressor.ioは、そうした経験のある方向けの画像圧縮ツールです。このサイトでは画像ファイルを放り込むだけで、見た目はほぼそのままにファイルサイズを圧縮してくれます。使い方は簡単。まずはページ内の「TRY IT!」ボタンをクリックしてアップロード画面に進みましょう。

上記の画像は、520kbのやや大きめのPNG画像で試したところです。その結果282kbまで圧縮できました。元データの46%まで小さくなった上に、見た目にはそれほど劣化しているようには見えません。このサイトではJPEG、PNG、GIF、SVGの4つのフォーマットに対応しているため、Webサイトで通常使われる画像フォーマットはほぼ網羅されていると言えます。画像ファイル書き出し後、最後のフィニッシュ作業としてこのツールを使った圧縮工程を入れておくと、見る側のロード時間を短縮できると思います。

compressor.io

Clean CSS | CSSの圧縮ツール

次に紹介するのはCSSの圧縮ツールです。CSSファイルってサイトを運営する期間が長ければ長いほど、行単位やファイル単位でどんどん追記されて肥大化していきますよね。気づいたらCSSだけで4000行オーバーとか、よくある話です。このツールを使えば、ファイルサイズが大きくなったCSSファイルをある程度まで圧縮する事ができます。

ためしにエンカフェのCSSを圧縮してみました。その結果、約2,400行あったCSSソースがたったの2行になり、40KBあったファイルサイズは23KBまで圧縮。41%まで圧縮ができました。行数が減ると、それまでファイル内の各所にあった改行コードが削除されるので、1行につき1byteの節約になります。もちろんその結果CSSは読みづらくなるので、圧縮作業はサイトのパブリッシュ時にだけ行うようにし、圧縮前のCSSファイルは今後の作業用に取っておいた方が幸せになれます。

ちなみにこの圧縮ツールですが、どのようなフォーマットで圧縮するかを細かく設定できます。「Code Layout」では改行コードを除外するかどうかを段階別に指定できます。一番上の「Highest」設定では極限まで削るのに対し、「Low」ではそれほど圧縮しません。圧縮後の可読性をどこまで維持したいかによって調整ができます。
他にもセレクタやプロパティのソート、重複指定のマージ、色指定の圧縮、プロパティ指定最終行のセミコロンを削るかどうかなどを細かく指定できるので、様々な状況に対応できると思います。

Clean CSS

---

この記事のライター：小山勝正