Skill 学ぶ

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


今回は、ユーザーにとってWebサイトをより快適にするための各種圧縮ツールを紹介したいと思います。僕と同じく尿酸値高めの人、すいませんが今回はお役に立てそうにありません。

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

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

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

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

compressor.io