Image Resolution and File Weight
Last updated March 23, 2026
If your generated documents are larger than you expected, images are almost certainly the cause. This page explains how images end up in your files, why they inflate file size, and what you can do about it.
How images end up in your document
PDFMonkey uses a Chromium-based engine to generate documents. The process works like this:
- Your HTML and CSS are loaded into the browser engine.
- The engine renders the page: it downloads images, applies styles, and paints every pixel.
- Only then does it generate the PDF from the rendered result.
This matters because the PDF is not a simple package of your original files. The engine re-encodes every image as part of the rendering process. The original file format (JPEG, WebP, PNG) is discarded; what goes into the PDF is the rendered pixel data.
Why images inflate file size
Two things happen during rendering that can dramatically increase file size.
All source pixels are stored
If your source image is 3000 x 3000 pixels but you display it at 500 x 500 CSS pixels, the engine still embeds all 9 million source pixels in the PDF. The display size in your template has no effect on what gets stored.
This catches people off guard because on the web, the browser decodes the image into memory but never serializes it into a file. In a PDF, the full pixel data is written into the output.
Pixel growth is quadratic
JPEG compression is lost
This is the biggest contributor to unexpected file bloat.
JPEG compression does not carry through to the PDF
This affects every raster image format equally: JPEG, PNG, WebP, and AVIF all get decoded to pixels and re-encoded the same way. The source format has almost no impact on the final PDF size. What matters is the number of pixels.
Sizing images for print quality
When your document will be printed, you want images sharp enough to look good on paper. The key concept is PPI (pixels per inch): how many pixels of image data correspond to one inch of printed output.
Our rendering engine operates at 72 DPI, while CSS uses 96 pixels per inch as its reference. To calculate the effective PPI of an image in your document:
Effective PPI = (image pixel width x 72) / (CSS display width x 0.75)
In practice, a simpler way to think about it: multiply your CSS display size by the factor in this table to get the source image size you need.
| Print quality | Target PPI | Source image size | Example |
|---|---|---|---|
| Screen or digital viewing only | 96 | 1x CSS size | 400 CSS px → 400 px source |
| Good print quality | 150 | 1.5x CSS size | 400 CSS px → 600 px source |
| High print quality | 200 | 2x CSS size | 400 CSS px → 800 px source |
| Maximum (rarely needed) | 300 | 3x CSS size | 400 CSS px → 1200 px source |
For most printed documents (invoices, reports, certificates), 150 PPI is plenty. Going above 200 PPI yields diminishing returns that most people cannot see, while significantly increasing file size.
What inflates file size (and what to do)
| Factor | Impact | What to do |
|---|---|---|
| Oversized source images | All pixels are stored in the PDF, even those not displayed | Resize to 1.5-2x the CSS display size |
| Large image dimensions | 2x width = 4x file weight (quadratic growth) | Keep images as small as practical for your quality needs |
| Many images per document | Cumulative effect on total size | Compress and resize each image before uploading |
| CSS filters and blend modes | May force additional rasterization overhead | Avoid filter, mix-blend-mode, and complex clip-path on large images |
| Multiple copies of the same image | Deduplicated automatically by the rendering engine | No action needed |
CSS for constraining image display size
Use max-width and max-height to control how images display in your template. Remember that this only changes the display size; you still need appropriately sized source images.
.product-image {
max-width: 400px;
height: auto;
}
<!-- Source image should be ~600-800px wide for good print quality -->
<img class="product-image" src="{{product.imageUrl}}" />
Practical checklist
Before you generate
- Resize source images to 1.5-2x their CSS display size. No more.
- Check image dimensions before uploading. A 4000 x 3000 photo displayed at 300 x 225 CSS pixels wastes over 95% of its pixel data.
- Use SVG for icons, logos, and simple graphics. SVG stays vector in the PDF and adds almost no file weight.
- Avoid CSS filters on large images.
filter: blur(),filter: drop-shadow(), and similar effects can force extra rasterization. - Test with realistic data. Generate a document with the actual images you plan to use, not placeholders, to catch size issues early.
Frequently asked questions
What resolution should I use for my images?
For documents that will be printed, 150 PPI is a solid default. That means your source image should be about 1.5x the CSS display size. For screen-only viewing, 1x (96 PPI) is fine.
My document is 20 MB. How do I reduce it?
Check the pixel dimensions of your source images. This is almost always the cause. Resize them to 1.5-2x their display size in the template. A 4000 px wide photo displayed at 500 CSS px is storing 64x more pixel data than you need at 1x.
Does image format matter (PNG vs JPEG vs WebP)?
The source format has very little impact on PDF file size because the rendering engine re-encodes everything using lossless compression. A 100 KB JPEG and a 500 KB PNG of the same image will produce nearly identical PDF sizes. Focus on pixel dimensions, not file format.
Will SVG images make my document smaller?
Yes. SVGs remain vector data in the PDF and take up very little space regardless of display size. Use them for anything that does not need to be a photograph: icons, logos, charts, decorative elements.
Does using the same image multiple times increase file size?
No. The rendering engine deduplicates identical image sources. If you reference the same URL or data URI ten times, only one copy is stored. However, different crops or CSS transforms of the same source may not be deduplicated.
Do CSS background-image images behave the same way?
Yes. Background images follow the same rules as <img> elements. The source pixels are embedded in full, and the same sizing recommendations apply.
Related pages
- Images and Links: how to include images in your templates (URL-based, embedded, inline SVG)
- Page Layout: page sizes, margins, and full-page backgrounds
- Generate Images Instead of PDFs: produce WebP, PNG, or JPG output
- Our Engines: rendering engine versions and capabilities
Frequently asked questions
- Why is my PDFMonkey PDF file so large?
- Oversized source images are almost always the cause. The rendering engine embeds all source pixels in the PDF regardless of display size. Resize images to 1.5–2× their CSS display size to dramatically reduce file weight.
- What image resolution should I use for PDFMonkey PDFs?
- For printed documents, 150 PPI (about 1.5× the CSS display size) is a solid default. For screen-only viewing, 96 PPI (1× CSS size) is sufficient. Going above 200 PPI yields diminishing returns while significantly increasing file size.
- Does JPEG vs PNG format matter for PDF file size in PDFMonkey?
- No. The source format has very little impact because PDFMonkey’s rendering engine re-encodes all raster images using lossless compression. A 100 KB JPEG and a 500 KB PNG of the same image produce nearly identical PDF sizes. Focus on pixel dimensions instead.