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.
/* 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 print
print-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 mode
prefers-color-scheme. Works everywhere.
Why position: fixed behaves strangely in a PDF
position: fixed. Works in a browser-based render.
How to put a background or watermark on every PDF page
background on body. Works in a browser-based render.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.