image-rendering
The image-rendering property specifies how to render images.
Formal Syntax
auto | smooth | high-quality | pixelated | crisp-edges
JavaScript Access
// Access via element.style
element.style.imageRendering = 'auto';
Browser Support
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| image-rendering | 13 | 3.6 | 6 | 79 |
| auto | 13 | 3.6 | 6 | 79 |
| crisp-edges | 13 | 65 | 7 | 79 |
| optimizeQuality | — | 3.6 | 7 | — |
| optimizeSpeed | — | 3.6 | 7 | — |
| pixelated | 41 | 93 | 10 | 79 |
| smooth | — | 93 | — | — |
Related Properties
- backdrop-filter
- background-blend-mode
- box-shadow
- clip-path
- clip-rule
- color-interpolation
- color-interpolation-filters
- color-scheme
- filter
- flood-color
- flood-opacity
- forced-color-adjust
- image-orientation
- isolation
- lighting-color
- mask
- mask-border
- mask-border-outset
- mask-border-repeat
- mask-border-slice
- mask-border-source
- mask-border-width
- mask-clip
- mask-composite
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- mask-type
- mix-blend-mode
- object-fit
- object-position
- opacity
- paint-order
- print-color-adjust
- shape-image-threshold
- shape-margin
- shape-outside
- stop-color
- stop-opacity
- text-shadow
- object-view-box 🧪
- box-shadow-blur 🚧
- box-shadow-color 🚧
- box-shadow-offset 🚧
- box-shadow-position 🚧
- box-shadow-spread 🚧
- image-resolution 🚧
- mask-border-mode 🚧
- shape-inside 🚧
- shape-padding 🚧
- shape-subtract 🚧
- clip 🗑️
- color-adjust 🗑️