今回は、最近使っている画像圧縮ツールのご紹介です!
画像圧縮とは
使用する画像の縦横サイズを変えることなく、画像データ内の不要なデータを削ぎ落して、データサイズを小さくすることです。
データサイズの大きな画像をたくさん使用すると、それだけページの読み込みに時間がかかり、サーバーの容量も圧迫されます。
特に、商品の画像をたくさん見せたいECサイトや、施工実績で綺麗な写真を使いたい工務店さんのサイトなんかは、写真のクオリティと同じくらい、画像のファイルサイズにも気を配る必要があります!
どんなに綺麗な写真が並んでいても、表示に時間が掛かって待たされるようだと、ページを見に来た人は写真を見る前に離脱してしまいます。
かと言って、画像の縦横サイズを小さくしたり、ファイルサイズだけを基準に無理矢理圧縮すると、せっかくの写真が台無しです。
そこで、画像のクオリティを保ったままファイルサイズを小さくしてくれる画像圧縮ツールの出番です!
私は以前、JPG画像の圧縮に「JPEGmini」を使っていて、当サイトのブログでもご紹介していたのですが、無料版の提供が無くなってしまったため、「Squoosh」と「ImageOptim」に乗換えました。
Squoosh と ImageOptim それぞれの特徴と使い分けのポイントをご説明していきます!
JPG画像の圧縮にSquooshがオススメなワケ
「Squoosh」は Google Chrome Lab が開発したオンラインツールです。
ページを開いて画像をドラッグ&ドロップすると、ブラウザ上で簡単に画像を圧縮できます。
オススメポイント
- 画像の劣化を抑えながら驚異的な圧縮率!
- 圧縮前後の見え方を確認できる!
- 表示が早い!
その1、画像の劣化を抑えながら驚異的な圧縮率!
圧縮したいJPG画像をドラッグ&ドロップすると、圧縮形式はMozJPEG、画像品質は75%の状態でデフォルトの設定になっています。
デフォルト設定のままで、元サイズ2.38MBから270kBまで圧縮した画像がこちら!
-82%という驚異的な圧縮率です!
縦横サイズは 1920px×1280px です。
元の画像と比べると若干ボヤッとしていて、よく見ると細部にすこしギザ付きも出ているのですが、こんな風にブログで紹介するには十分な画質を保っていますね。
以前ご紹介した「TinyPNG」でもJPG画像の圧縮ができますが、同じ画像を圧縮した場合の圧縮率がSquooshのデフォルトよりも低く、ファイルサイズは363kBでした。
その2、圧縮前後の見え方を確認できる!
圧縮した画像をダウンロードする前に、圧縮前後の見え方を比較できるようになっています。
画面中央に表示されるバーを左右に動かすと、左が圧縮前、右が圧縮後という形で表示されます。
ズームイン・ズームアウトもできますので、気になる箇所を細かくチェックしたり、全体をパッと見たときの印象も確認可能です。
デフォルトの設定だとちょっと劣化が気になるなぁ、と感じたら、画面右下のQuality(画像品質)の値をすこし上げましょう。
その分圧縮率は下がりますが、圧縮後のサイズもほぼリアルタイムに表示更新されますので、品質とファイルサイズのバランスを見ながら調整できるのはとても便利です!
その3、表示が早い!
数MBある画像をアップロードしても、わずか1秒程度で表示確認可能になります。
画像品質を変更した際の表示更新も早いです!
Squoosh 同様、表示確認しながら画質調整できるサービスとして、「OptimiZilla」もあるのですが、こちらはアップロード時に4〜5秒、画像品質を調整するたびに2〜3秒待たされることが多いため、比べてみると Squoosh の早さは歴然です。
Squoosh の難点は、複数の画像を一度に圧縮することができず、1枚ずつドラッグ&ドロップ→ダウンロードしなければならない点……ですが、数枚処理する程度なら表示の早さでカバーできます!
表示確認しながら圧縮できるオンラインサービスとしては、ダントツでオススメです!
大量に圧縮するならImageOptim(Macユーザー向け)がオススメなワケ
「ImageOptim」は、PCにインストールして使用する、無料の画像圧縮アプリです。
ただし、アプリはMac版しか用意されていないため、Windows機では使用できません……
Windows機で大量圧縮したい場合は、JPG画像ならJPEGminiがオススメです。下記の記事をご参照ください。
オススメポイント
- Squoosh と同等の高い圧縮率!
- アップロード・ダウンロードなしで一度に複数の画像を圧縮可能!
- PNG画像の圧縮にも対応!
その1、Squoosh と同等の高い圧縮率!
ImageOptim は、JPG画像の圧縮形式として、Squoosh のデフォルト設定と同じ MozJPEG を採用しています。
そのため、Squoosh とほぼ同じファイルサイズで、ほぼ同じ画像品質を保ちながら圧縮可能なんです!
元サイズ2.38MBの画像を、Squooshのデフォルト設定と同じく画像品質75%に設定して、ImageOptim で圧縮したものが下記の画像です。
こちらは267kBと、ほんのわずかですが Squoosh よりもファイルサイズが小さくなっています。
画像の品質は、ズームアップして比べてみても変わりありません。十分な圧縮率です!
その2、アップロード・ダウンロードなしで一度に複数の画像を圧縮可能!
ImageOptim を利用する最大のメリットはココ!
アプリを起動して、画像品質をあらかじめ設定し、圧縮したい画像をファインダーからドラッグ&ドロップすると、自動で圧縮して上書き保存してくれます!
複数の画像を選択してドラッグ&ドロップすれば、それらの画像を全て一気に圧縮可能です。
大量の画像を圧縮する必要がある時には、断然効率的です。
その3、PNG画像の圧縮にも対応!
PNG画像の圧縮にも対応していますので、画像形式を気にする必要もありません。
JPG画像、PNG画像それぞれに画像品質を設定でき、ファイル形式に合わせて圧縮処理されます。
たとえば、圧縮したい画像をPNG画像もJPG画像もごちゃまぜに全部ひとつのフォルダにまとめておいて、フォルダ丸ごと圧縮処理!なんてこともできちゃいます!
ただし、元サイズの大きな画像を大量に圧縮させると時間がかかることはあります。
あまり無茶はしないでください。
JPG画像もPNG画像もごちゃ混ぜにたくさん圧縮しなきゃいけない!という時には「ImageOptim」がオススメです!
まとめ
- 表示確認しながら圧縮できるオンラインサービスとしては、「Squoosh」がオススメ!
- JPG画像もPNG画像もごちゃ混ぜに大量圧縮する時は「ImageOptim」がオススメ!
ぜひ、用途に合わせて使い分けてみてください!