劣化させずに高品質のまま画像のファイルサイズを圧縮するなら、Photoshopの書き出しの設定をしよう

劣化させずに高品質のまま画像のファイルサイズを圧縮するなら、Photoshopの書き出しの設定をしよう

ぱくたそで配布しているフリー素材は、「JPEG」形式の画像データです。ファイルサイズは、1枚5MBのものが平均で、夜景などノイズが多い画像は、1枚20MB近くになります。

 青空と雲|ぱくたそフリー素材

 満天の星々を望む(岡山県鏡野町笠菅峠から撮影)|ぱくたそフリー素材

上記写真では、青空が3MB、夜景が16MBと5倍近くの差があります。これは夜景の写真に記憶されている星やノイズなどの情報が、澄んだグラデーションの青空よりも圧倒的に多いためファイルサイズは大きくなっています。ですので、ファイルサイズが大きければ大きいほど、高品質の画像であるとは限りません。

ふまえて、JPEG画像のファイルサイズを圧縮する話にすすみましょう。

ファイルサイズが大きいという表現は、「重たい」という風に使うことが多々あります。「画像が重たくてメールで送れなかった」「画像が重たくてサイトの表示が遅かった」という感じ。画像ファイルは、軽いほうがみんな幸せになれます。重たいサイトは、ロードしている時間に離脱されちゃいますしね。

JPEG画像の圧縮で気をつけたいこと

JPEG自体は、RAWデータと違って色数が全然違います。

jpegraw_9b4e53b5-c00f-4913-884b-7ce356f41ac0.png

JPEG形式は、1670万色、RAWデータは、6870万色

JPEG形式にした時点でRAWデータと同じ色数は持っておらず、最高品質で保存しようが既に劣化した画像なのです。(写真のレタッチは、RAW→TFF→JPEGの順序で行うのが基本と言われている所以です。)

このJPEG画像を圧縮してファイルサイズを小さくする方法は、画像の解像度を小さくするか、更に画像を劣化させるしかありません。解像度を小さくする作業は簡単ですが、使用目的によっては使えないので、デザイナーのほとんどは、何らかのツールを使って画像を劣化させた上でファイルサイズを小さくしています。

代表的なツールとして、JPEGmini(Win/Mac)imageMINI(Mac) などが有名です。独自のアルゴリズムで見た目がほとんど変わらず画像を圧縮してくれます。

下記、グレー色の階調の画像で比較してみましょう。上がJPEG(高品質保存)の元画像で下がJPEGmini後の画像です。

motodeta.jpg

jpegmini.jpg

見た目はほとんど変わりませんが、ファイルサイズは、元画像が220KBで、JPEGminiが30KBです。その差、約7倍です。Webサイト用に使う場合、画像圧縮するだけで約7倍速くなるわけです。

ちなみに、ぱくたその画像はすべて JPEGmini を入れています。(この記事書くまでは・・・)

Adobe Photosop CC2017 の 書き出しはもっとすごかった

画像加工にAdobe Photoshop を使っていない人は、上記ツールを使っていてください(ニッコリ)。

画像加工のみ使いたい場合は、月額1,000円のフォトプランがあるので買っときましょう。

Adobe CC フォトプラン

今まで、Adobe Photoshop の画像保存(Web形式にして保存)は、品質を調整してもファイルサイズが大きくなりすぎて、保存した後に圧縮ツールで更に保存するという手間がかかっていました。

しかし、Adobe sensei の機械学習が向上したのか、圧縮ツールを使うよりも高品質で高圧縮が実現しています。もうツール使う必要なさそうなのです。(ちなみに僕の環境はWindowsです。)

やり方は、

PKTK_12-23_13.jpg

書き出し → (書き出しの環境設定でJPEG、品質の設定をした上で)JPEGとしてクイック書き出し を押しましょう。事前にキーボードショートカットを設定しておくのがおすすめ

PKTK_12-23_18.jpg

デフォルトだと「sRGBに変換」にチェックが入っているので用途に応じてチェックを外しておきましょう。

先程のグレーの階調で比べてみます。

jpeg60.jpg

上記画像は、Adoobe Photoshop CC2017 品質60で書き出したJPEG画像です。ファイルサイズは、30KBとJPEGminiで圧縮したのとほぼ同じサイズ。

見た感じ元画像とほぼ変わりませんので、まずこの時点で圧縮ツールを使う必要がなくなります。

では、300%で拡大比較してみましょう。

上がJPEGmini で 下がPhotoshop の品質60です。

PKTK_12-23_20.jpg

PKTK_12-23_19.jpg

Photoshop の方が階調が滑らかなのがわかります。では、PhotoshopでJPEGminiくらいまで劣化するまで品質を落としてみましょう。

20kakidashi.jpg

品質30~40くらいまで落とすとJPEGminiくらい劣化します。しかし、ファイルサイズは20KBを切るのです。

その他、街並みの写真、白背景のポートレートなどの高解像度写真も試みましたが、品質はほぼ変わらず最大1/2までファイルサイズを下げることができました。優秀なphotoshop ですが、JPEGminiのように複数枚ドラッグして自動処理はしてくれないので併用していきたいですね。(photoshop の場合バッチ作るとか・・・)

追記しました。僕の環境だけファイルサイズが小さくなるのか分かりませんが、他の写真やバナーなども検証しています。

画像の一括処理とかが面倒だったので、JPEGminiに代わるソフトを探していたら、Mozllaからリリースされているソフトが優秀でした。

JPEGとPNGのファイルサイズを画質劣化なしに一括で削減・最適化するアプリケーション | Antelope - Voralent Computer Solutions

Win/Mac対応で日本語、ポータブル版もあります。細かいクオリティ設定もできるので物凄くいい感じです。品質5-6でもPhotoshopなみに綺麗です。また高圧縮かけたい場合、非可逆圧縮モードがあり、このあたりも大変優秀です。

ぜひ参考にしてくださいませ。