Guide

How to save a webpage as PDF with images

You save a webpage as PDF and half the images are missing. Blank rectangles where photos should be, broken icons, placeholder text where infographics lived. This happens because browser PDF cannot handle lazy-loaded images, relative URLs, or CDN-served content. Pretty PDF Printer resolves every image before rendering, so your PDF looks complete.

Free — 3 PDFs per month. No credit card required.

The problem

Why images break in browser PDF

When you use Ctrl+P or "Save as PDF" in your browser, the resulting file often has missing or broken images. There are five common technical reasons this happens, and each one produces the same frustrating result: blank spaces where your images should be.

Lazy-loaded images

Modern sites load images only when you scroll to them. If you have not scrolled the full page, those images are not in the DOM when Ctrl+P captures it. The browser prints placeholder elements or empty containers instead of the actual photos.

Relative URLs

Images referenced with relative paths (/img/photo.jpg) may not resolve correctly during PDF rendering. The browser's print engine sometimes loses the base URL context, turning valid image references into broken links.

CDN image URLs

Sites serve images from CDNs (content delivery networks) with complex URL patterns that browser print can sometimes fail to fetch. Token-based URLs, query string parameters for responsive sizing, and cross-origin restrictions can all prevent images from loading during PDF generation.

SVG graphics

Some SVGs are inlined directly in the HTML, some are referenced as external files, and some are embedded via <object> or <iframe> tags. Browser print handles each of these differently, often resulting in missing icons, invisible charts, or blank diagram placeholders.

Background images

CSS background images are excluded from print output unless "Background graphics" is explicitly enabled in the print dialog. Most people do not know that setting exists, and even when enabled, the results are inconsistent across browsers and websites.

The solution

How Pretty PDF handles images

Pretty PDF Printer addresses every common cause of missing images. The Chrome extension captures the fully-rendered page, and the server resolves all image references before generating your PDF.

URL resolution

All relative image URLs are resolved to absolute URLs before rendering. The server reconstructs the full path for every image reference, eliminating broken links caused by relative paths, protocol-relative URLs, or missing base tags.

Lazy-load handling

The Chrome extension captures the fully-rendered DOM, including lazy-loaded images that have been triggered by scrolling. Unlike the browser print dialog, which captures a static snapshot, the extension preserves every image element that is present in the live page.

CDN compatibility

Resolved URLs work with all major CDN providers. The server fetches images from their source URLs directly, bypassing the cross-origin restrictions and token expiration issues that trip up browser PDF rendering.

SVG preservation

SVG graphics are preserved as vectors in the final PDF. They remain crisp and sharp at any zoom level or print size. Both inline SVGs and externally referenced SVGs are rendered correctly by the WeasyPrint engine.

Figure captions

Images with <figcaption> elements maintain their captions and layout in the PDF. The figure-caption relationship is preserved so images appear with their descriptive text exactly as the author intended.

Walkthrough

How to save a webpage as PDF with all images intact

Four steps to a complete, image-perfect PDF. The entire process takes about 30 seconds.

1

Scroll through the full page

Before capturing, scroll from the top of the page to the bottom. This triggers lazy-loaded images to load into the DOM. On long pages with many images, pause briefly as you scroll to give each image time to load. This single step prevents the most common cause of missing images in PDFs.

2

Click the Pretty PDF icon

Click the Pretty PDF Printer icon in your Chrome toolbar to open the extension popup. It will display the page title and your conversion options. Choose your preferred template and page size. If the icon is hidden, click the puzzle piece in Chrome's toolbar and pin Pretty PDF for quick access.

3

Extension captures the complete DOM

When you click Generate, the extension takes a snapshot of the fully-rendered DOM, including every image that has been loaded into the page. This captures inline images, background images, SVGs, and any content that was dynamically loaded through JavaScript or lazy loading.

4

Server resolves URLs and generates your PDF

The server receives the captured HTML, resolves all image URLs to absolute paths, fetches each image at full resolution, applies your chosen template, and renders the final PDF with WeasyPrint. Every image is embedded directly in the PDF file. The result downloads automatically with all images intact.

Quality

Image quality in PDFs

Pretty PDF renders images at their original resolution. The PDF engine (WeasyPrint) fetches each image from its source URL and embeds it at full quality. Images are not downscaled or re-compressed during the PDF generation process.

SVGs remain as vectors in the final PDF, which means they stay sharp at any zoom level or print size. Raster images (JPEG, PNG, WebP) are embedded at their native resolution. The result is print-quality output — your PDF images look as good as, or better than, what you see on screen.

This matters especially for infographics, charts, product photos, and technical diagrams. When you save a reference page, research article, or product listing as a PDF, the images need to be clear enough to read fine text in charts, see detail in photographs, and reproduce accurately if printed on paper. Pretty PDF delivers that level of quality by preserving the original image data rather than applying lossy compression.

Common pitfall

The background graphics setting most people miss

In your browser's Ctrl+P print dialog, background images are hidden by default. You have to expand "More settings" and check "Background graphics" to include them. Even then, the results are inconsistent. Some background images render correctly, others appear at wrong sizes, and some are still missing entirely. Most people do not even know this checkbox exists, which means every PDF they generate is missing a category of images without their knowledge.

Pretty PDF does not have this problem. All visible images are captured by the extension's DOM snapshot, regardless of whether they are inline <img> elements or CSS background images. The server renders them into the PDF as part of the content, so nothing is silently excluded. You do not need to hunt through print dialog settings to get a complete PDF.

Frequently asked questions about saving webpages as PDF with images

Images go missing from browser-generated PDFs for several reasons. Lazy-loaded images that have not been scrolled into view are not in the DOM when the browser captures the page. Relative image URLs may not resolve correctly during PDF rendering. CDN-hosted images with complex URL patterns can fail to load. CSS background images are excluded from print output by default. Pretty PDF Printer solves all of these issues by capturing the fully-rendered DOM through its Chrome extension and resolving every image URL server-side before generating the PDF.
Yes. The Pretty PDF Chrome extension captures the fully-rendered DOM, which includes any images that have been loaded into the page. For best results, scroll through the entire page before clicking the Pretty PDF icon. This triggers all lazy-loaded images to load into the DOM. The extension then sends the complete HTML, including all loaded image references, to the server for PDF generation. Images that have not been scrolled into view will not be in the DOM, so the scroll-first step is important for pages with many lazy-loaded images.
Pretty PDF preserves SVG graphics as vectors in the final PDF. This means they remain crisp and sharp at any zoom level or print size, unlike raster images which can become pixelated when enlarged. Both inline SVGs embedded directly in the HTML and externally referenced SVG files are handled correctly. This is especially valuable for technical diagrams, charts, icons, and logos that use vector formats for scalability.
No. Pretty PDF's rendering engine (WeasyPrint) fetches each image from its source URL and embeds it at its original resolution. Images are not downscaled or re-compressed during the PDF generation process. The result is print-quality output where your PDF images look as good as, or better than, what you see on screen. This is important for reference material, product photos, infographics, and any content where image detail matters.
Broken image icons in browser PDFs typically occur when the browser cannot resolve the image URL at render time. This happens with relative URLs that lose their base path context during PDF generation, images served from CDNs that require specific request headers or authentication cookies, images loaded dynamically via JavaScript that have not executed in the print context, and externally referenced SVGs or images inside iframes. Pretty PDF avoids these issues because the extension captures images from the live, fully-rendered DOM, and the server resolves all URLs to absolute paths before fetching and embedding them in the PDF.

Save webpages as PDF with every image intact

No more blank rectangles, broken icons, or missing photos. Every image captured, resolved, and rendered in full quality.

Install Free Extension