Skip to content

How it renders / image-rendering

Why images look blurry in the PDF

image-rendering hints at the scaling algorithm, but blurry images in a PDF are almost always a resolution problem rather than an algorithm problem.

What it is for

A PDF is typically viewed and printed at a higher effective resolution than a screen. An image that is exactly its CSS pixel size looks correct on screen and soft on paper, because there is nothing extra to draw with.

Support: Works everywhere

The property is supported. It is also rarely the answer: pixelated is for deliberate pixel art, and no value adds detail that is not in the source.

The syntax

Written the way it would appear in a document stylesheet, using image-rendering as intended.

css

/* The actual fix is source resolution, not a rendering hint. Roughly three
   times the CSS width covers print. */
.logo {
  width: 40mm;
  /* so the source should be about 450px wide, not 150px */
}

/* Where the source genuinely is pixel art and should stay crisp: */
.pixel-icon {
  image-rendering: pixelated;
}

The mistake people make

Reaching for image-rendering: crisp-edges to fix a soft photograph. It will not help, and the same effort spent on a larger source image would have.

Frequently asked

Does image-rendering work when generating a PDF?

Works everywhere. The property is supported. It is also rarely the answer: pixelated is for deliberate pixel art, and no value adds detail that is not in the source.

How would I know if it were not working?

You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.

Related properties

Things that come up in the same part of a document stylesheet.

How to force background colours to printprint-color-adjust. Works in a browser-based render.Does @media print apply when generating a PDF@media print. Works everywhere.How to stop a PDF rendering in dark modeprefers-color-scheme. Works everywhere.Why position: fixed behaves strangely in a PDFposition: fixed. Works in a browser-based render.How to put a background or watermark on every PDF pagebackground on body. Works in a browser-based render.Every property, with its support statusThe full reference, grouped by what part of the page it touches.

Paste the CSS and see what the rendered page does with it.

Try it live, no signup Try it in the playground