CSS image-rendering Property

Definition and Usage

The image-rendering property sets the scaling algorithm used when an image is drawn larger or smaller than its natural size. It applies to the element, images in its other properties, and descendants.

It is inherited. The initial value is auto. If the image is not scaled, the property has no visible effect. Pair sizing with object-fit when you need crop or cover behavior.

CSS Syntax

Older draft names optimizeQuality / optimizeSpeed map to smooth / pixelated.

Property Values

How to Use image-rendering

Scale the image first, then pick an algorithm that matches the content type.

1. Display the image at a size different from its natural size (CSS width/height or zoom).
2. Use auto (or smooth where supported) for photos.
3. Use pixelated or crisp-edges for sprites, icons, and pixel art.
4. Compare in your target browsers — some values still differ.

Live Preview

A 16×16 sprite scaled to 128px. Switch algorithms and compare blur vs hard pixels.

image-rendering

autopixelatedcrisp-edgessmooth Apply

auto pixelated crisp-edges smooth

smooth is mainly Firefox today. pixelated is the usual choice for upscaled pixel art.

Sprite

image-rendering: pixelated

CSS Examples

Each snippet focuses on image-rendering. The image must be scaled to see a difference. Use Try It Yourself for a live editor.

Example 1 — Pixelated Upscale

Keep hard pixels when enlarging a tiny sprite.

CSS

Theme Copy

<style>
  img {
    width: 128px;
    height: 128px;
    image-rendering: pixelated;
  }
</style>

<img src="sprite.png" width="16" height="16" alt="Pixel sprite">

View Output Try It Yourself

Output

How It Works

1. Start small. The source is 16×16.
2. Scale in CSS. Width/height 128px force an upscale.
3. Set pixelated. Nearest-neighbor style keeps blocky squares.
4. Good for sprites. Photos usually look better with auto.

Example 2 — Default Auto

Let the browser use its standard smooth scaling.

CSS

Theme Copy

<style>
  img {
    width: 128px;
    height: 128px;
    image-rendering: auto;
  }
</style>

<img src="sprite.png" width="16" height="16" alt="Scaled sprite">

View Output Try It Yourself

Output

How It Works

1. Use auto. This is the initial value.
2. Browser decides. Most engines smooth colors when upscaling.
3. Softer edges. Pixel art often looks blurry with auto.
4. Fine for photos. Soft scaling is usually what you want for camera images.

Example 3 — Crisp Edges

Preserve sharp contrast when scaling line art or icons.

CSS

Theme Copy

<style>
  img {
    width: 128px;
    height: 128px;
    image-rendering: crisp-edges;
  }
</style>

<img src="sprite.png" width="16" height="16" alt="Crisp sprite">

View Output Try It Yourself

Output

How It Works

1. Set crisp-edges. The engine prefers an algorithm that keeps edges sharp.
2. Less blur. Color smoothing is avoided when possible.
3. Similar to pixelated. On many sprites the two look alike; support still varies.
4. Check Chromium. Full crisp-edges landed later than pixelated in Chrome/Edge.

Key Takeaways