画像ファイルを最適化し、サイズを小さくするサービス Compressor.io

今回は、Compressor.ioという、画像ファイルのサイズを小さくするネット上のサービスを紹介します。無料で、ユーザー登録なしで使えます。

Compressor.ioのトップページ

Compressor.ioとは

私は、写真や図を多用するサイトを運営していますので、画像ファイルのダウンロード時間の短縮が、読者に快適に記事を読んでいただくためのひとつのポイントとなります。そこで、画像ファイルのサイズを小さくするためCompressor.ioというネット上のサービスを利用して、画像ファイルのダウンロード時間の短縮を図っています。

また、FacebookやTwitterで、写真のファイルサイズが大きすぎて、アップロードできない場合にも使っています。

Compressor.ioはJPEG、GIF、PNG、SVGの4種類のフォーマットに対応した画像サイズ縮小サービスです。

JPEGとPNGの2つのフォーマットに関しては、画質を落とさずに最適化するlossless(可逆)モードが選択できますが、デフォルトでは画質をわずかに落としてファイルサイズをより小さくするLossy(非可逆)モードで動作します。

Compressor.ioを使ってみる

それでは、実際にCompressor.ioを使ってみましょう。

今回は、画像圧縮用のサンプル画像として、画像処理の分野では有名なレナの写真を使う事にします。

リンク先のサイトでは、次の様な、レナという女性の写真をダウンロードできます。(下の画像をフルサイズで見るには、画像をクリックしてください)

Lenna.png

このレナのPNGファイル(Lenna.png)は、512×512ピクセルの解像度で、ファイルサイズは463kBです。

Compressor.ioのトップページ(https://compressor.io)にアクセスすると、次の様なページが表示されます。

Compressor.ioのトップページ

ページ下部のTRY IT!ボタンをクリックすると、次の様な、画像をアップロードするためのページが表示されます。

圧縮を行うページ

画面上部には、LossyLosslessの2つのボタンがあります。デフォルトで選択されているLossyは、目に付かない程度に画質を落としてファイルを積極的に小さくするモードを表しています。ボタンをクリックしてLosslessに切り替えると、画質を変化させない範囲で、ファイルサイズを小さくします。

LossyLosslessかを選択したら、ページ上に小さくしたい画像ファイルをドラッグ&ドロップするか、SELECT FILEボタンをクリックして出てくるダイアログボックスで、小さくしたい画像を選択すれば、圧縮作業が始まります。

Lenna.pngLossyモードで小さくしてみます。先ほどのページでSELECT FILEをボタンをクリックすると、次の様なダイアログボックスが出てきますので、Lenna.pngを選択して開きます。

ファイルアップロード時のダイアログボックス

そうすると、次の様な画面になります。

ファイルアップロード後の画面

この画面では、アップロードした画像のプレビューが行えます。レナの写真の中央に白い縦線が見えますが、左側がアップロードした画像そのもので、右側がCompressor.ioでフ最適化した画像です。白い縦線は、マウスでドラッグすると左右に移動できます。

画像の確認が終わったら、DOWNLOAD YOUR FILEボタンをクリックして最適化後の画像ファイルを保存することができます。ダウンロード後のファイルは、元のファイル名に-compressorが付いたファイル名になります。今回はLenna.pngを最適化したので、ダウンロードしたファイルはLenna-compressor.pngになります。

圧縮前後のファイル

上の図の様に、463kBが186kBになり、元の40.2%にまでファイルが小さくなりました。

ダウンロードした画像(Lenna-compressor.png)を次に示します。クリックして大きく表示した状態で、元の画像と比較してください。パッと見る分には区別がつかない程度の品質を保っていることが分かります。

Lossyモードで圧縮したレナの写真

画像をアップロードする画面でLosslessを選択してから最適化処理をすると、画質を低下させない範囲でファイルを小さくします(可逆モード)。試してみると、Lenna.pngの場合は、可逆モードではさらにファイルを小さくすることはできませんでしたが、画像によっては幾分小さくなる事はあります。

広告

Compressor.ioの使用上の注意点

Compressor.ioを使う際に気を付けるべき点を説明します。

漢字などのマルチバイト文字のファイル名に対応していない

Compressor.ioは、漢字や仮名などのマルチバイト文字を含むファイル名の画像ファイルには対応していません。半角英数文字やハイフン(-)、アンダーバー(_)からなるファイル名にリネームしてからサービスを利用する必要があります。

アップロードできるファイルサイズに上限がある

アップロードできる画像のサイズに上限がありますので、あまり高解像度の画像は扱えません。アップロードページには上限が10MBと書いてありますが、実際にはもっと小さいファイルでも、アップロードに失敗する事があります。

画像ファイルをドラッグ&ドロップするとプレビュー機能が使えない

画像をアップロードする画面に、画像ファイルをドラッグ&ドロップしても画像ファイルの最適化は行えますが、最適化前後の画像のプレビュー機能は使えません。次の様に、圧縮前後のファイルサイズだけが表示されます。

プレビュー画像がない状態

ファイルをダウンロードする前にブラウザ上でプレビューしたい場合は、このページで説明した様に、SELECT FILEボタンを使ってください。

同じファイル名の画像ファイルはアップロードできない

以前アップロードしたファイルと同じファイル名で、内容の違う画像ファイルを最適化しようとしても、ブラウザのキャッシュ機能が働くようで、うまくいきません。この問題を回避するには、使用中のブラウザの全タブを閉じて、ブラウザを再起動する必要がある様です。

私はブラウザの再起動が面倒なので、こういう時は、ファイル名の最後に何か文字を付け加えて、ファイル名を変えた上で最適化しています。

サーバーが重い事が時々ある

Compressor.ioのサーバーが重く、なかなかファイルをアップロードできない時が時々あります。確実に使えるサービスではないという事を前提に運用する必要があります。

最後に

サイトの表示速度が少し遅いだけで訪問者が逃げてしまう事は、広く知られている話ですが、画像が多かったり、大きな画像を扱うサイトでは、Compressor.ioで画像を最適化すると、その対策になります。

GoogleのPageSpeed Insightsというサービスを使えば、入力したURLのページの表示速度の評価や改善点が出てくるのですが、Compressor.ioを使うようになって、自分のサイトで「画像の最適化が必要」という内容のメッセージがほとんど出なくなりました。

この様に便利なCompressor.ioですが、最適化後のファイル名に-compressorと、長い接尾語が付くのが若干不便です。ファイルが1つや2つの場合はそれほど気にならないのですが、多くの画像ファイルのファイル名を元に戻そうとすると、リネームに結構時間がかかります。

このリネーム作業を自動化するプログラムを作ったのですが、次回に紹介します。

関連ページ
広告

投稿者: しなぷす

電子工作サイトしなぷすのハード製作記の管理人です。フリーランスのエンジニアですが、大学の非常勤講師もやっています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

認証コード(計算結果を半角数字で入力してください) *