こんにちは、ツバサです。
商品写真を拡大して確認していたら、画像の一部がブロック状にガビガビになっていることに気づいた。最初は画像が壊れたのかと思ったけど、調べてみたら「ブロックノイズ」と呼ばれるJPEG圧縮に起因する現象だった。原因と対処法をメモしておく。
ブロックノイズとは
ひとことで言うと、JPEG画像を圧縮しすぎたときに現れる四角いブロック状のノイズのことだ。
IT用語辞典e-Wordsの解説によると、JPEGは画像全体を8×8ピクセルのブロックに分割して、ブロック単位で圧縮処理を行う仕組みになっている。圧縮率が高いと、隣り合うブロック同士のつながりが不自然になって、格子状の模様が見えてしまうのがブロックノイズだ。
Wikipediaのブロックノイズの項目にはもう少し詳しく書いてあって、ブロックノイズにもいくつかの種類があるらしい。格子状に見える「グリッドノイズ」、斜めの線が階段状になる「ステアケースノイズ」などがあるとのこと。
似た現象に「モスキートノイズ」というものもある。こちらはブロックの格子ではなく、被写体の輪郭まわりにチラチラと現れるノイズのことで、色の境界がはっきりしている部分で目立ちやすい。CyberLibrarianのJPEG画質劣化の解説ページにどちらの例も載っていた。
撮影で出てくる場面
ブロックノイズに遭遇する場面は撮影よりも、撮影後の画像処理や保存のタイミングで多い。僕が経験したケースを書いておく。
JPEG品質を下げすぎた場合
ECサイト用の画像はファイルサイズを小さくしたいので、つい品質を下げて保存してしまうことがある。Photoshopの「Web用に保存」で品質を50以下にすると、拡大しなくてもブロックノイズが目立ち始める。商品画像の圧縮については商品画像の圧縮方法まとめに書いたけど、品質80前後がバランスの取れるラインだと思う。
何度もJPEG保存を繰り返した場合
JPEGは保存するたびに圧縮がかかる非可逆圧縮の形式なので、編集→保存→編集→保存を繰り返すと、どんどん画質が落ちていく。psgipsのPhotoshop解説記事でも、JPEG圧縮の劣化をキレイに修正する方法が紹介されていたけど、そもそも劣化させないのが一番だ。作業中はPSD形式で保存しておいて、最終的な書き出しのときだけJPEGにするのがいい。
スマホのスクリーンショットを拡大した場合
スマホの画面キャプチャはPNG形式で保存されることが多いけど、メールやSNSで共有するときにJPEGに変換されてしまうことがある。その圧縮時にブロックノイズが入って、文字がつぶれて読めなくなったことがあった。
覚えておきたいポイント
一度発生したブロックノイズは完全には戻せない
ブロックノイズは圧縮時に情報が捨てられたことで起きるので、捨てた情報を元に戻すことはできない。Photoshopのノイズ軽減フィルターや、biopapyrusの画像処理解説で紹介されているような平滑化処理で目立たなくすることはできるけど、ぼかし処理が入るので細部のシャープさは失われる。
圧縮と画質のバランスを意識する
ECの商品画像ではページの表示速度とのバランスも大事なので、画質を上げすぎてファイルが重くなるのも困る。JPEG品質80前後で保存して、ブロックノイズが出ていないか拡大して確認するのが実用的なやり方だと思う。圧縮の仕組み自体については非可逆圧縮と可逆圧縮の違いにまとめた。
グラデーション部分は特に注意
空や背景のグラデーションなど、色の変化がなだらかな部分ではブロックノイズが特に目立ちやすい。同じ圧縮率でも、色のコントラストが激しい部分より、単色に近い部分のほうが気になる。グラデーションが縞模様になる現象はトーンジャンプとも関係がある。
