coderef

image-renderingBaseline · Widely available

The image-rendering CSS property sets how images are scaled, retaining smoothness for photos, or hard edges for pixel art and QR codes.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Oct 5, 2021. Widely available since Apr 5, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–40Not supported
41+Supportedsince Mar 3, 2015
Current: 155
Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154
Firefox
1–92Not supported
93+Supportedsince Oct 5, 2021
Current: 157
Safari
1–9.1Not supported
10+Supportedsince Sep 20, 2016
Current: 27
MobileChrome Android
18–40Not supported
41+Supportedsince Mar 11, 2015
Current: 155
Firefox Android
4–92Not supported
93+Supportedsince Oct 5, 2021
Current: 157
Safari iOS
1–9.3Not supported
10+Supportedsince Sep 13, 2016
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: image-rendering.

Feature detection

CSS · check before using
@supports (image-rendering: initial) {
  /* styles that rely on image-rendering */
}

/* or in JavaScript */
if (CSS.supports("image-rendering", "initial")) {
  // use it
}

Documentation (MDN)

Specification

Usage share

Sub-features

Support for each part of the feature (3). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
image-rendering13793.661846
image-rendering.auto13793.661846
image-rendering.pixelated41799310419310