image-rendering: smooth | Frontend Practical Guide

Limited supportUseful when image-rendering: smooth helps structure space, flow, or sizing without relying on brittle manual adjustments.

Overview

The image-rendering: smooth CSS declaration scales images while retaining a gradual color blending that is useful for photos.

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`css.properties.image-rendering.smooth` Experimental			93

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

CSS

.photo {
  image-rendering: smooth;
}
.pixel-art {
  image-rendering: pixelated;
}

CSS Smooth demo.

CSS Pixelated demo.

CSS Auto demo.

Component layout
Use image-rendering: smooth to create more predictable spacing and placement inside reusable UI patterns.
Responsive structure
Adapt containers and flow rules so layouts stay stable across viewport changes.

Test layout rules with real content, long labels, and small screens before depending on them broadly.
Prefer simpler layout primitives if they already solve the problem clearly.