画像スケーリングの仕組み — Nearest、Bilinear、Bicubic、Lanczos

ラスター画像は有限個のサンプルの配列です。100 × 100pxを200 × 200pxへ拡大すると出力画素は4倍になり、縮小では複数の入力画素が持つ情報をまとめなければなりません。

• 拡大: 既存サンプルの間を再構成する
• 縮小: 小さいグリッドで表現できない周波数を除去してから再サンプルする

元画像を連続信号のサンプルと考えると、全ての画像に対して一つの方式が最良ではない理由が分かります。

NyquistとShannonに関連するサンプリング定理では、帯域制限された信号を損失なく再構成するには、最高周波数の2倍を超える周波数でのサンプリングが必要です。縮小前に十分なフィルタリングをしないと、新しいナイキスト周波数を超える成分が低い周波数へ折り返します。

画像ではモアレ、斜線のジャギー、細部のちらつき、別の模様への変化として現れます。高品質な縮小は概念的には次の処理です。

ローパスフィルタ → 小さいグリッドでサンプリング

Nearest Neighborは、各出力画素の中心に最も近い入力画素を選びます。座標の対応方法は実装によって異なるため、次は入力・出力の画素中心をそろえ、画像外では端の画素へ制限する一例です。

u = (x + 0.5) / scaleX - 0.5
v = (y + 0.5) / scaleY - 0.5
output(x, y) = input(
  clamp(round(u), 0, inputWidth - 1),
  clamp(round(v), 0, inputHeight - 1)
)

高速で、中間色を作りません。ピクセルアート、マスク、色番号を持つ図には適しています。写真の拡大ではブロック状になり、不適切な縮小では強いエイリアシングが生じます。

Bilinear補間は周囲4画素を混合します。fx、fyを入力セル内の小数距離とすると次の式になります。

output = (1-fx)(1-fy) I00
       +    fx (1-fy) I10
       + (1-fx)   fy  I01
       +    fx    fy  I11

計算量が少なく、グラフィックスハードウェアでも広く利用できます。一方、特に変形を繰り返すと、目に見える軟化が起きます。

Bicubic補間は通常4 × 4の近傍と、分離可能な3次カーネルを使います。「Bicubic」は一つの固定方式ではなく、パラメータによって鮮明さ、ぼけ、リンギングが変わる方式群です。

CatmullとRomは1974年に局所補間スプラインを、Keysは1981年に広く使われる3次畳み込み式を、MitchellとNetravaliは1988年に2パラメータのフィルタ族を発表しました。B = 1/3、C = 1/3は、ぼけとリンギングのバランスを取る選択としてよく使われます。

帯域制限信号の理想的な再構成カーネルはsinc関数ですが、無限に続くため、そのままの計算は実用的ではありません。Lanczosカーネルはsincへ別のsinc窓を掛け、有限半径に制限します。

sinc(0) = 1
sinc(x) = sin(πx) / (πx),  x ≠ 0
L(x) = sinc(x) × sinc(x/a),  |x| < a
L(x) = 0,                         |x| ≥ a

a = 2やa = 3が一般的な選択です。縮小で細部をよく保つ場合がありますが、強い境界の前後に明暗のハローが出ることがあります。窓を広げても全ての画像で好ましい結果になるとは限りません。

境界、細線、文字、繰り返し模様を必ず確認してください。人物写真で鮮明に見えるフィルタが、UI画像では不自然なハローを作ることがあります。

NanTooのGIF 作成は画像をサーバーへ送らず、ブラウザの Canvas で指定寸法に描画してから gif.js でGIFへ変換します。ブラウザ側での再サンプリング結果を使うため、細線や文字を含む素材は出力サイズで確認してください。

img {
  image-rendering: auto;
  image-rendering: smooth;
  image-rendering: high-quality;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

CSS Imagesは、これらをユーザーエージェントが方式を選ぶためのヒントとして定義しています。全ブラウザ・全端末で同じ数学カーネルを強制する指定ではありません。硬いピクセル境界を保ちたい場合はpixelatedを出発点にし、対象ブラウザと拡大率で確認します。

超解像モデルは、学習データから得たパターンを使って、もっともらしい質感を生成できます。見栄えが良くなる場合はありますが、追加された細部は元画像で測定された情報ではなく推定です。

証拠、科学測定、医療など、見栄えより忠実性が重要な用途では、元画像を保持し、挙動を説明できる決定論的な再サンプリング方法を使用します。

• スケーリングは信号を再構成し、新しいグリッドでサンプリングする処理
• 縮小にはエイリアシングを抑えるローパスフィルタが必要
• Nearestは離散画素を保ち、Bilinearは高速だがやわらかい
• Bicubicは特性の異なる3次フィルタの総称
• Lanczosは鮮明な結果を得やすい一方、リンギングが出る場合がある
• AI拡大の細部は推定であり、証拠の復元ではない