ECサイトの運用をしていてると画像を扱う機会が多くありますよね。
特に商品画像などはできるだけ美しく、実物と遜色なく見せたいものです。ただ、画像を高画質でみせようとした時につきまとってくるのがページの読み込み速度と保存スペースの圧迫です。普段の掲載業務に追われていると簡単にアップロードできるものだからついつい軽視しがちになったりします。ただ、ページの読み込み速度は売上高にも影響すると言われており、1秒読み込みが遅れると7%コンバージョン率が下がるというデータも出ているほど実は重要なポイントなのです。（Kissmetrics）

しかし、Web担当者として普段働いていると中々そのような細かいところまで気が回らないというのも実情かと思います。そこで今回紹介したいのがCompressor.ioというツールです。

Compressor.ioについて

このツールの良いところは何といっても使い勝手がシンプルというところとWeb上で作業が完結できてしまうという点です。画像を最大で90%まで圧縮することができ、画質をほぼ劣化させることなくファイルサイズを最適化してくれる優れもの。対応している画像のフォーマットはJPEG, PNG, GIF, SVGの４種類で、圧縮方法もLossless（可逆圧縮）とLossy（不可逆圧縮）の２つから選ぶことができます。

Compressor.ioの使い方

まずはCompressor.ioのサイトを開きます。説明は全て英語で書かれていますが、ポイントとなる単語の意味さえ理解していれば問題ないのでご心配なく。次に、「TRY IT」のボタンを押します。

すると画像をアップする画面が出てきます。"Choose your compression” というのが先ほど説明した圧縮方法の選択です。デフォルトではLossy（不可逆圧縮）で選択されていますが基本は変更せずそのままで良いかと思います。画像はドラッグアンドドロップで指定、若しくは "SELECT FILE” というボタンから選択することができます。（＊アップできる画像の最大サイズは10MBとなっているので注意が必要!）

アップロードが完了すると次のような画面が出てくると思います。画像に引かれている縦のラインは動かすことができ、ORIGINAL（元画像）とCOMPRESSOR（圧縮後の画像）の領域で見比べることができます。BeforeとAfterで表示されている箇所は圧縮前と圧縮後のファイルサイズでパーセンテージで示されている部分は圧縮された割合になります。今回は31%ファイルサイズを削減できました！

まとめ

実際試していただけると分かるのですが、いい感じに最適化してくれるので画質の劣化はほとんど感じられないです。
圧縮した画像は“DOWNLOAD YOUR FILE” というボタンでダウンロードすることもできますし、普段GoogleドライブやDropbox使っているようであれば直接保存することもできます。複数の画像を一度に圧縮できないのが難点ですが、手短に圧縮作業を行いたいときには便利です。

Compressor.ioは商品ページなどの掲載作業だけ出なく、大きいファイルサイズの画像をSNSにアップする際にも活躍するかと思いますのでSNS担当の方もぜひ参考にしてみてはいかがでしょうか？