crisp-edges
画像やキャンバスを拡大表示する際に、ブラウザのデフォルトのスムージング（アンチエイリアシング）を無効にし、ピクセルの境界を鮮明に保ちます。ピクセルアート、QRコード、低解像度の地図タイル、技術的な図表など、エッジのシャープさが重要な画像に適しています。pixelated 値と似ていますが、アルゴリズムが異なります。
概要
画像やキャンバスを拡大表示する際に、ブラウザのデフォルトのスムージング（アンチエイリアシング）を無効にし、ピクセルの境界を鮮明に保ちます。ピクセルアート、QRコード、低解像度の地図タイル、技術的な図表など、エッジのシャープさが重要な画像に適しています。pixelated 値と似ていますが、アルゴリズムが異なります。
対応ブラウザ
デスクトップ
Chrome 未対応
Edge 未対応
Safari 7+
Firefox 65+
モバイル
Chrome Android 未対応
Safari iOS 7+
Firefox Android 65+
基本構文
CSS
.pixel-art {
image-rendering: crisp-edges;
image-rendering: -webkit-optimize-contrast;
width: 256px;
height: 256px;
}実務での使いどころ
-
ピクセルアートの鮮明な拡大表示
ゲームのスプライトやピクセルアートを拡大しても、ぼやけずにシャープなピクセル境界を維持して表示できます。
注意点
- ChromeとEdgeでは crisp-edges は未サポートです。代替として pixelated 値を使用するか、ベンダープレフィックス -webkit-optimize-contrast を検討してください。
アクセシビリティ
- 画像の描画品質に関する設定であり、アクセシビリティに直接影響しません。ただし、シャープ化により画像が見にくくなる場合は、元の解像度の画像を提供することを検討してください。