Scale pixel art without blur. Keep it crisp with one line.
By default, browsers smooth images when you scale them, which makes sprites and icons look muddy.
image-rendering: pixelated; forces nearest-neighbor scaling so every pixel stays sharp.
Use it when you upscale low-res assets: pixel art, icons, retro screenshots, QR codes.
Skip it for photos or illustrations that should stay smooth. Apply it to the element you’re resizing (img, canvas).
It takes effect when the rendered size differs from the image’s intrinsic size. If you’re using background images, test in your target browsers since support can vary.
No extra assets. Smaller downloads. Clean, crunchy results. Modern browser support is broad with ~95%.
Don’t hesitate to share projects where you used this property!
To learn more tips about CSS, make sure to join my newsletter below ❤️