image-rendering

概要

画像を拡大・縮小する際のレンダリングアルゴリズムを制御します。pixelatedを指定するとピクセルのエッジがシャープに保たれ、ドット絵やQRコードの拡大表示に適しています。autoではブラウザのデフォルトの滑らかな補間が使用され、写真の表示に最適です。

対応ブラウザ

基本構文

.pixel-art {
  image-rendering: pixelated;
}
.photo {
  image-rendering: auto;
}

実務での使いどころ

• ピクセルアートのシャープ表示

  ドット絵やレトロゲームのグラフィックを拡大しても、ピクセルのエッジがぼやけないシャープな表示を維持します。

注意点

アクセシビリティ

• QRコードにimage-rendering: pixelatedを適用する場合、代替テキストでQRコードの内容を説明してください。

参考リンク

• MDN Web Docs — image-rendering
• Can I use — image-rendering