Units and measurement / resolution
What DPI should images be for a PDF
CSS works at 96 dots per inch. Print quality is conventionally 300, so an image needs roughly three times its CSS pixel dimensions to look sharp on paper.
What it is for
It is the arithmetic behind every blurry logo. The image looks right on screen because the screen is 96dpi; the printer asks for three times the detail and there is none.
Support: Works everywhere
This is arithmetic rather than a feature. The multiplier is 300/96, which is 3.125, and three is close enough for every practical purpose.
The syntax
Written the way it would appear in a document stylesheet, using resolution as intended.
/* A logo displayed at 40mm wide:
40mm = 151 CSS px, so the source should be about 470px wide.
A full-width photo at 178mm:
178mm = 673 CSS px, so about 2000px wide. Past that is wasted bytes. */
.logo { width: 40mm; } /* source ~470px */
.photo { width: 178mm; } /* source ~2000px */The mistake people make
Going beyond three times, on the theory that more is safer. It is not: the extra detail is not reproducible and the file size grows linearly with it.
Frequently asked
Does resolution work when generating a PDF?
Works everywhere. This is arithmetic rather than a feature. The multiplier is 300/96, which is 3.125, and three is close enough for every practical purpose.
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.
Which CSS units should a PDF use
mm, cm, in, pt. Works everywhere.
How many pixels wide is an A4 page in a PDF
px in a paged context. Works everywhere.
What does 100vh mean in a PDF
vh and vw. Works in a browser-based render.
How to stop an element splitting across PDF pages
break-inside. Works everywhere.
How to force a page break before an element in a PDF
break-before. Works everywhere.
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.