image-rendering | Frontend Practical Guide

Overview

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

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

CSS

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

CSS Auto(default) demo.

CSS Pixelated demo.

CSS Crisp-edges demo.

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