こんにちは、ツバサです。
商品画像をPhotoshopで編集してJPEG保存を何度か繰り返していたら、なんだか画質がザラザラしてきた気がした。なぜ保存するだけで画質が落ちるのか気になって調べたら、「非可逆圧縮」という仕組みが原因だった。
非可逆圧縮と可逆圧縮とは
ひとことで言うと、画像データを小さくするための圧縮方式のことで、2つの種類がある。「可逆圧縮（ロスレス）」は元のデータを完全に復元できる方式、「非可逆圧縮（ロッシー）」は元に戻せないかわりにファイルサイズを大幅に小さくできる方式だ。
Wikipediaの「非可逆圧縮」のページによると、非可逆圧縮は人間の目では気づきにくいデータを優先的に捨てることでファイルサイズを減らしている。捨てたデータは元に戻せないので「非可逆（もとに戻せない）」と呼ばれる。
| 圧縮方式 | 元データの復元 | ファイルサイズ | 代表的な形式 |
|---|---|---|---|
| 可逆圧縮（ロスレス） | 完全に復元できる | やや大きい | PNG、GIF、TIFF（LZW） |
| 非可逆圧縮（ロッシー） | 復元できない | かなり小さくできる | JPEG、WebP（lossy） |
BREEZEの画像圧縮解説にも、この2つの違いがシンプルに説明されていてわかりやすかった。可逆圧縮は「zipファイルに入れて解凍するようなイメージ」と書いてあって、なるほどと思った。
JPEGが保存するたびに劣化するのは、非可逆圧縮が毎回実行されるから。ファイルを開いてそのまま保存し直すだけでも、圧縮→展開→圧縮という処理が走って、そのたびに少しずつデータが失われていく。Kritaの公式ドキュメントにも、非可逆圧縮を繰り返すと劣化が蓄積されると書いてあった。
EC実務で出てくる場面
非可逆圧縮と可逆圧縮の違いを知っておくと、日々の画像管理で困ることが減る。僕が遭遇した場面を書いておく。
商品画像の加工と保存
商品写真の色味を調整して保存、次の日にまた修正して保存……というのを繰り返していたら、最初の写真と比べて明らかに画質が落ちていた。JPEGで作業用ファイルを管理していたのが原因だった。加工中はPSD（Photoshop形式）やTIFFなどの劣化しない形式で保存しておいて、最後にJPEGに書き出すのが正解だ。
背景透過が必要な画像
ECサイトでロゴや説明図に背景透過を使いたいとき、JPEGでは透過ができない。PNG（可逆圧縮）なら透過に対応しているので、そちらを使うことになる。ただしPNGは写真のような色数が多い画像では容量が大きくなりがちなので、用途に応じて使い分ける必要がある。画像形式ごとの特徴は画像ファイル形式まとめにも書いた。
WebPへの変換
最近はPageSpeed Insightsで「次世代フォーマットで画像を配信してください」と指摘されることが増えた。GoogleのWebP公式ドキュメントによると、WebPは非可逆と可逆の両方に対応していて、JPEGやPNGよりファイルサイズを小さくできるらしい。ECサイトの表示速度改善に使われることが増えている。武蔵野美術大学の造形ファイルにも、非可逆圧縮の仕組みがコンパクトにまとまっていて参考になった。
覚えておきたいポイント
マスター画像はJPEGで保存しない
加工用のマスター画像（元データ）は、PSD・TIFF・PNGなど劣化しない形式で保管する。JPEG保存は最終的な書き出し時に1回だけにするのが鉄則。これだけで画質劣化のリスクはかなり減る。
JPEG圧縮率は80〜90%くらいが目安
EC用の商品画像なら、JPEG圧縮品質80〜90%で保存すれば、肉眼ではほとんど劣化がわからない。品質を下げすぎると画像にブロックノイズ（モザイク状の荒れ）が出てくるので、バランスを見ながら調整する。ファイルサイズの軽量化については商品画像の圧縮テクニックに詳しく書いた。
用途に応じた形式選びが大切
写真のように色数が多い画像はJPEG（非可逆圧縮）、ロゴや図表のようにくっきりした輪郭が必要な画像はPNG（可逆圧縮）、両方の特性が必要ならWebPと、使い分けるのがベストだ。各モールの画像ルールはECサイト商品画像ルールまとめを参考に。
