The image-rendering
CSS property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other properties, and to its descendants.
/* Keyword values */ image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; /* Global values */ image-rendering: inherit; image-rendering: initial; image-rendering: unset;
The user agent will scale an image when the page author specifies dimensions other than its natural size. Scaling may also occur due to user interaction (zooming). For example, if the natural size of an image is100×100px
, but its actual dimensions are 200×200px
(or 50×50px
), then the image will be upscaled (or downscaled) using the algorithm specified by image-rendering
. This property has no effect on non-scaled images.
Note: The Canvas API can provide a fallback solution for crisp-edges
through manual image data manipulation.
auto
smooth
high-quality
smooth
, but with a preference for higher-quality scaling. If system resources are constrained, images with high-quality
should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree.crisp-edges
pixelated
auto
.optimizeQuality
and optimizeSpeed
present in an early draft (and coming from its SVG counterpart) are defined as synonyms for the auto
value.auto | crisp-edges | pixelated
/* applies to GIF and PNG images; avoids blurry edges */ img[src$=".gif"], img[src$=".png"] { image-rendering: crisp-edges; }
div { background: url(chessboard.gif) no-repeat 50% 50%; image-rendering: crisp-edges; }
78% 100% 138% downsized upsized
78% 100% 138% downsized upsized
78% 100% 138% downsized upsized
Specification | Status | Comment |
---|---|---|
CSS Images Module Level 3 The definition of 'image-rendering' in that specification. | Candidate Recommendation | Initial definition. |
Initial value | auto |
---|---|
Applies to | all elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Note: Though initially similar to the SVG image-rendering
attribute, the values are quite different now.
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes | No | 3.6 | No | Yes | Yes |
crisp-edges
|
Yes
|
No | 65
|
No | Yes
|
Yes
|
pixelated
|
41 | No | No | No | 26 | ? |
optimizeQuality
|
No | No | 3.6 | No | Yes | Yes |
optimizeSpeed
|
No | No | 3.6 | No | Yes | Yes |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 41 | ? | ? | 4 | ? | ? | ? |
crisp-edges
|
? | ? | ? | 65
|
? | ? | No |
pixelated
|
? | 41 | No | No | 28 | ? | 4.0 |
optimizeQuality
|
? | ? | ? | 4 | ? | ? | No |
optimizeSpeed
|
? | ? | ? | 4 | ? | ? | No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering