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