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!
image-rendering: pixelated is perfect for pixel art and retro assets that need hard edges when scaled. Apply it selectively, because photographs and gradients usually look degraded with this mode.
image-rendering: pixelated preserves hard edges for pixel art and retro sprites. Use it selectively, since photos and gradients usually degrade with this mode.
Keep fallback rendering in mind so unsupported effects still produce clear, readable visuals.
When introducing image-rendering: pixelated, begin with one reference component and treat it as the canonical pattern. That rollout sequence preserves clarity and reduces regressions during future refactors.
Reserve the pixelated mode for true pixel art assets, and keep other imagery on normal rendering to avoid accidental degradation.
Want to build modern interfaces with less JavaScript?
I wrote a guide about building modern UI with HTML and CSS first. It covers practical patterns you can use before reaching for JavaScript.
Learn more