k8o

はじめに

ブラウザは画像を本来のサイズより大きく表示するとき、デフォルトでは色を補間（interpolation）して滑らかに見せようとします。写真ならこれで自然に拡大されますが、ドット絵やピクセルアート、QRコード、ピクセル単位で意味を持つ図版だと、ぼやけて元の絵柄が壊れてしまいます。

image-renderingプロパティはこの拡大時のアルゴリズムを切り替える指定で、crisp-edgesは色を補間せず境界をはっきり保つ値です。Firefox / Safariは早くから対応していましたが、Chromiumが長く未実装で、pixelatedを代用する場面が多くありました。Baseline 2026でChrome 148が対応し、3ブラウザでcrisp-edgesが揃いました。

image-renderingの値

image-renderingは<img>、<canvas>、background-imageなどラスタ画像をスケールして描画するすべての要素に適用できます。Baseline 2026時点の主な値は以下です。

• auto（既定値） - UAに任せる。多くのブラウザは双線形補間など滑らかな拡大を選ぶ
• smooth - 色を補間して滑らかに見せる。auto相当の挙動を明示したいときに使う
• crisp-edges - 色の補間やぼかしを避け、境界とコントラストを保つ。最近傍法（nearest neighbor）または同等のアルゴリズムが使われる
• pixelated - 整数倍までは最近傍法で拡大し、端数分だけ補間する

crisp-edgesとpixelatedはどちらも拡大時にピクセル境界をはっきり残す値ですが、仕様で求められるアルゴリズムが少し違います。

• crisp-edgesは色を混ぜず境界をぼかさないアルゴリズムを使うとだけ規定されていて、具体的な手法はUAに任されている
• pixelatedはまず最近傍法で次に大きい整数倍まで拡大し、そのあと補間で目的サイズに仕上げる

実装上の見た目はほとんど同じですが、画像のサイズが整数倍ぴったりでないときにpixelatedの方が境界がやや滑らかになる場面があります。

使い方

ドット絵風の小さな画像を<img>で拡大表示する例です。

img.pixel-art {
  image-rendering: crisp-edges;
  width: 256px; /* 元画像が16x16でも、最近傍法で滲まずに拡大される */
}

background-imageで背景に貼り付ける場合も同じプロパティが効きます。

.tile {
  background-image: url('/sprites.png');
  image-rendering: crisp-edges;
}

おわりに

crisp-edgesはChromiumに長く欠けていた値で、これまではほぼ同じ役目のpixelatedで代替していた人が多いと思います。Baseline 2026で揃ったので、仕様の意図に近いcrisp-edgesをそのまま指定する選択肢が取れるようになりました。