The image-rendering CSS property controls how the user agent resamples bitmap images when they are scaled, transformed, or otherwise displayed at a resolution different from their intrinsic pixel grid. It determines the algorithm used to convert source pixels into the pixels of the output device, which affects whether an image appears smooth and blended or crisp and blocky when enlarged, reduced, or rendered at fractional device pixels. This property is relevant whenever an image is painted at a size that does not match its natural dimensions - for example when an image is stretched to fill a layout area or drawn at fractional CSS pixels.

Because the property influences sampling and interpolation, it has a direct effect on perceived sharpness, texture, and aliasing. Choosing a rendering mode that favors sharpness preserves hard edges and the rectangular shape of original pixels, which is often desired for pixel-art, icons, and UI sprites where clarity of individual pixels is important. Conversely, a mode that favors smooth interpolation blends neighboring pixels, which reduces jagged edges and artifacts and is often preferred for photographs and high-resolution artwork. The runtime decision also interacts with device pixel ratios and subpixel positioning: on high-DPI screens there is less need to aggressively preserve pixel blocks, whereas on low-DPI displays or when intentionally scaling by integer factors, a pixel-preserving approach can make images appear more faithful.

The visual outcome of the property interacts with other layout and rendering rules. For example, when an image is fitted into a replaced element or container, the element’s sizing behavior affects how much scaling happens; properties that control how an image fills its box, such as object-fit, determine the scale factor that will then be subject to the chosen sampling strategy. Likewise, scaling applied via transforms or by changing the element’s size is combined with the image-rendering decision; see transform for how CSS transforms can change an image’s rendered size without changing its intrinsic dimensions. Background images and their placement also interact with sampling, so when using background images it’s useful to consider background-size because that property controls the painting size that image-rendering will then process.

Practical considerations include performance and visual consistency. Some resampling approaches are more computationally expensive than others, and using high-quality interpolation for many large images can increase painting cost and GPU/CPU usage; conversely, pixel-preserving sampling is cheap but can produce visual artifacts when the scale is not an integer. Also bear in mind accessibility and readability: text or iconography represented as bitmaps can become illegible if scaled with inappropriate sampling, whereas photographs can look noisy or posterized if pixel-blocking is applied indiscriminately. When designing, test on representative content and target devices to ensure the chosen rendering behavior aligns with both aesthetic goals and performance constraints.