画像ファイルのサイズを小さくする方法|画質を保ちながら軽量化するテクニック

以前、エクスプローラーのメール送信オプションや「Image Resizer for Windows」というデスクトップアプリを使って画像ファイルのサイズを縮小する方法をご紹介しました。どちらも優れた方法ですが、画像を最適化するアプローチは他にもいくつかあります。また、多くのサイトではペイント(Paint)の使用を推奨していますが、実際に試してみると画質が大幅に低下してしまうため、おすすめできません。

まず理解しておきたいのは、画像サイズを縮小する手法の中には画質が低下してしまうものがあるという点です。Web表示用であれば問題ないことも多いですが、印刷用途には向きません。これは一般的に、画像の解像度を2560×1440から1920×1080のように変更した場合に起こります。

もう一つのサイズ削減方法が画像の圧縮です。圧縮には「可逆圧縮(ロスレス)」と「非可逆圧縮(ロッシー)」の2種類があります。可逆圧縮なら、元のファイルのピクセルを一切失うことなく画像サイズを減らせます。一方、非可逆圧縮では一部のデータが失われます。

さらに、画像フォーマットもファイルサイズに大きな影響を与えます。カメラで撮影した通常の写真は、圧縮効率の良いJPG形式であることがほとんどです。しかし、256色以下の少ない色数の画像であれば、GIF形式の方がはるかに小さくなります。PNGは可逆圧縮で高い圧縮率を実現できるフォーマットで、Webグラフィックや複雑な写真の両方に適しています。

この記事では、複数のフォーマットで画像を圧縮した実例をスクリーンショット付きで紹介し、サイズと画質の違いを比較できるようにします。

画像サイズを縮小する方法

まずは、画質を落とさずに画像サイズを縮小する方法から見ていきましょう。この方法なら、元の画質を保ったまま最小のファイルサイズを得られます。もちろん、後述の例でわかるように、非可逆圧縮を使えばさらに小さなファイルになりますが、その分画質は犠牲になります。

フォーマットと圧縮

まずは、フラットな単色グラフィックから始めましょう。例として、色数が少なく構造もシンプルなHDGサイトのスクリーンショット(600×319)を使用しました。以下は、圧縮なしの各フォーマットにおけるファイルサイズです。

元GIF:27KB

元JPEG:67KB

元PNG:68KB

ご覧のとおり、PNGとGIFはJPEGよりも明らかにシャープです。前述のとおり、JPEGは写真撮影に向いています。GIFはここでは27KBと、68KBのPNGよりはるかに小さいという好結果です。ただし、筆者の経験では、非可逆圧縮を使えばPNGははるかによく圧縮され、しかも画質は非常に良好に保たれます。

3つの画像を可逆圧縮してみたところ、サイズが減ったのはJPGとPNGだけで、それほど大きくは縮みませんでした。PNGは45KBに、JPGは58KBになりました。次に非可逆圧縮を行ったところ、最も印象的な数値を示したのはPNGでした。

非可逆圧縮GIF:22KB

非可逆圧縮JPEG:50KB

非可逆圧縮PNG:23KB

ご覧のとおり、PNGが最も見栄えが良く、GIFよりわずか1KB大きいだけです!だからこそ、当サイトではスクリーンショットのほとんどにPNG画像を使用しています。JPEGは通常、色数の多い写真画像に有利です。ただし、JPGは16ビット、PNGは24ビットなので、JPGは数百万色まで、PNGは無限の色数をサポートしている点には注意してください。

GIFは5KBしか減りませんでしたが、同時に画質も大きく損なわれました。JPGはあまり圧縮されませんでしたが、JPGはそもそもPNGほど圧縮効率が良くありません。

お使いの写真アプリで画像のフォーマットを変更して、どのサイズが最も小さくなるか確認してみてください。圧縮については、オンラインツールの利用をおすすめします。筆者自身は自分のサイトでKraken.ioを使用していますが、TinyPNGやOptimizillaなど、他にも優れたツールがあります。

画像の解像度を変更する

画像を縮小する最も基本的な方法は、画像の解像度を下げることです。4000×2500のファイルを2000×1250に縮小すれば、ファイルサイズは半分になります。元画像のデータの大部分を失うことになりますが、目的によっては問題にならないこともあります。

すべての画像編集ソフトには、画像のサイズ変更機能が備わっています。ここで幅/高さ、またはDPI(dots per inch)やPPI(pixels per inch)で表される解像度を変更できます。Web上のコンテンツについては、ドットではなくピクセルだけを気にすればOKです。ドットが影響するのは印刷画像のみです。

たとえば筆者のサイトでは、画像の幅は最大680ピクセルまでしか使えません。そのため、アップロード前に必ず680ピクセル以下にリサイズしています。そうしないとWordPressが680pxに自動リサイズしてくれますが、必要以上に大きなファイルサイズになってしまうからです。

72ppiという数値や「再サンプル」オプションについて詳しく知りたい方は、詳細に解説された専門記事を参照することをおすすめします。

色深度/カラーモードを変更する

上記の例のように、色数の少ない画像であれば、数百万色をサポートする画像フォーマットを使う必要はありません。先ほどのWebページの例では、GIFはインデックスカラーと8ビット/チャンネルをサポートしていれば十分です。

RGBカラーと16ビット/チャンネルを選択することもできますが、見た目はまったく同じでもファイルサイズは大きくなります。これらのカラーモードについては、Adobeの公式サイトで詳しく解説されています。Photoshop以外でも、ほとんどの画像編集ソフトで画像の色深度/モードを変更できます。

画像をトリミングする

画像サイズを減らすもう一つの簡単な方法は、トリミング(クロップ)です!切り取った部分は画像から完全に取り除かれます。どんな画像でも、少なくとも少しはトリミングできるはずで、それだけでも確実にサイズ削減につながります。

なお、トリミングは上下左右を切り取る典型的なものだけとは限りません。筆者のお気に入りの一つであるSnagIt Editorには、画像の中央部分を水平または垂直方向に切り抜ける「切り抜きツール」があります。これは思っている以上に役立つ機能です。たとえば、コマンド入力中のスタートメニューのスクリーンショットを含める必要がある場合の例を見てみましょう。

上のファイルは元々22KBでした。そこで、不要だった中央部分を切り取ると、下図のようになりました。

新しいファイルサイズはわずか9KB!圧縮もファイル形式の変更もせずに、ここまで小さくなりました。さらに圧縮すると、4.4KBまで削減できました。つまり、トリミングは画像サイズ削減において非常に重要な手段なのです。

画像のサイズを縮小でき、デジタル画像の仕組みについても少し学べたなら幸いです。ご不明な点があれば、お気軽にコメントしてください。