How to Convert HTML with Images to PDF Without Losing Formatting

When you convert HTML with images to PDF, a simple “Save as PDF” is not always enough. Images can disappear, backgrounds vanish, fonts change, and long pages break in strange places.

We’ll walk you through three main methods, explain how to keep layouts stable, and show how Smallpdf fits into the workflow when you need a polished final PDF.

Quick Overview: Convert HTML to PDF With Images (Fast)

If you just need a quick way to convert HTML with images to PDF: 1. Open the HTML page in Chrome, Edge, Firefox, or Safari. 2. Press Ctrl + P (Windows) or Command + P (Mac). 3. Choose “Save as PDF” or “Microsoft Print to PDF” as the destination. 4. Open “More settings,” enable “Background graphics,” and adjust scale. 5. Check the preview to confirm images and layout look right, then click “Save.”

If the layout still looks broken or images are missing, switch to a browser extension or an online converter and use the troubleshooting steps further down.

Method 1: Convert HTML to PDF in Your Browser

This is the fastest way to convert HTML with images to PDF if the page is already open in your browser.

Step 1: Open the HTML Page

• Open the webpage or local HTML file in Chrome, Edge, Safari, or Firefox.
• Scroll through the page once so lazy-loaded images can appear.

Step 2: Use the Print to PDF Dialog

1. Press Ctrl + P (Windows) or Command + P (Mac).
2. In “Destination,” pick:

• “Save as PDF” (Chrome, macOS)
• “Microsoft Print to PDF” (Windows)
• “Save to PDF” or similar in Firefox

3. Click “More settings” or the advanced options link.

Step 3: Adjust Layout and Image Settings

• Turn on “Background graphics” so background images and colors are included.
• Select the right paper size (A4 or Letter in most cases).
• Choose “Portrait” for standard pages, “Landscape” for very wide layouts.
• Adjust scale so content is not cut off or shrunk into unreadable text.

For simple pages, this method works well. For complex designs, multi-column layouts, or heavy CSS effects, you may get better results with the next methods.

Method 2: Use a Browser Extension to Save HTML as PDF

Browser extensions can give you more control when you convert HTML to PDF with images, especially for long or complex pages.

Step 1: Install A Reliable Extension

• Visit your browser’s extension store.
• Search for HTML to PDF or “Save as PDF” extensions.
• Install a trusted option with good reviews.

Step 2: Convert HTML With the Extension

1. Open the HTML page or website you want to capture.
2. Click the extension icon in your toolbar.
3. Choose “Convert to PDF” or a similar command.
4. Adjust any visible options such as page size, margins, or image quality.
5. Save the resulting PDF to your computer.

Many extensions handle:

• Print CSS rules more consistently
• Background images and gradients
• Longer scrolling pages with fewer cut-offs

Method 3: Convert HTML to PDF With Smallpdf Online

Online converters are often the most reliable way to convert HTML with images to PDF, especially when pages include JavaScript, custom fonts, or complex layouts. 1. Go to an online HTML to PDF converter. 2. Upload your HTML file or paste the URL of the webpage. 3. Choose your conversion settings, like page size and orientation. 4. Click convert and wait for the tool to process your file. 5. Download your new PDF file.

When the process finishes, download your PDF. From there, you can:

• Use Compress PDF to reduce file size.
• Use Edit PDF to tweak text, add notes, or highlight key sections.
• Use Merge PDF to combine several HTML-to-PDF outputs into one report.

Compare HTML to PDF Methods for Layout and Images

Each approach has strengths and trade-offs when you convert HTML to PDF with images:

1. Browser print to PDF

• Best for: quick one-off conversions, simple articles, short pages
• Pros: built-in, no installs, very fast
• Cons: can ignore some CSS rules, may crop images or change fonts

2. Browser extensions

• Best for: long pages, pages with complex CSS, multi-column layouts
• Pros: more control, often better at handling background images and full-page captures
• Cons: requires install, quality varies by extension, sometimes limited free use

3. Online converter

• Best for: professional outputs, JavaScript-heavy pages, regular workflows
• Pros: consistent results, cloud-based processing, easy to combine with other PDF tasks
• Cons: dependent on internet connection and file size limits on free plans

If layout accuracy and image quality matter a lot, we recommend using a good online converter and then polishing the result with our editing and compression features.

Key Settings to Preserve Layout, Images, and Fonts

Getting the settings right can make the difference between a messy PDF and a clean one.

Page Size, Margins, And Orientation

Page size:

• A4 for international use
• Letter for US-based documents
• Legal for longer content

Margins:

• “Default” for better readability
• “None” or “Minimum” when you need maximum content per page

Orientation:

• Portrait for standard articles and emails
• Landscape for dashboards, tables, or wide charts

Scale:

• Around 100% for most pages
• Slightly lower (80–90%) for very wide designs

Render Settings and Backgrounds

• Enable background graphics to capture colors, gradients, and image backgrounds.
• Allow JavaScript or use a render delay so animated or lazy-loaded elements can appear.
• Prefer print stylesheets (print CSS) when available, since they are designed for printing and PDF output.

Before you commit, always review the preview pane and scroll through the full length of the PDF.

Troubleshooting HTML to PDF Formatting and Image Issues

Even with the right method, things can go wrong. Here’s how to fix the most common problems when you convert HTML to PDF with images.

1. Images Are Missing or Partially Hidden

• Confirm “Background graphics” is enabled in the print or converter settings.
• Scroll through the whole page before converting to force image loading.
• Add a short render delay (for example, 2–3 seconds) in advanced settings where available.
• Try another browser or our online converter if certain images never show.

2. Fonts Look Wrong or Text Wraps Strangely

• Some tools substitute fonts if the original web font is not loaded.
• Wait a moment so fonts can load fully before converting.
• If a page uses very narrow columns, consider a Landscape layout.
• For critical documents, convert to PDF, then to Word, adjust fonts and spacing, and convert back to PDF.

3. Layout Breaks Across Pages

• Reduce margins or slightly lower scaling to fit more content per page.
• For extremely long sections, split the HTML content into logical chunks before conversion.
• Check CSS page-break rules (if you control the HTML) that might force awkward splits.

4. Images Look Blurry

• Increase DPI or image quality settings in advanced options if the converter offers them.
• Use higher resolution source images where possible.
• Avoid compressing the PDF too aggressively when image detail is important.

Optimize PDFs for Printing and Digital Sharing

Once your HTML with images becomes a PDF, you can tweak it based on how you plan to use it.

For printing:

• Choose A4 or Letter and set margins for comfortable reading.
• Keep scale near 100% so text stays crisp.
• Test print one page before sending large batches.

For digital sharing:

• Run Compress PDF to shrink file size for email or messaging apps.
• Use Protect PDF to add a password if the content is sensitive.
• Use Edit PDF to highlight key sections or add notes for readers.

These steps help you balance visual quality, readability, and file size for different audiences.

Best Path to Convert HTML to PDF With Images

To convert HTML to PDF with images and keep the layout:

• Start with browser print to PDF for quick, simple pages.
• Use a good browser extension or our online converter when layouts get complex.
• Turn on background graphics, adjust page size and scale, and use a small delay if needed.
• If the result still looks off, convert the PDF to Word, fix fonts and spacing, then convert back.

From there, Smallpdf helps you compress, edit, secure, and merge those PDFs so you can share them confidently with clients, colleagues, or your own future self.

Frequently Asked Questions

How do I convert an HTML file to PDF without losing formatting?

Use your browser’s print function with “Save as PDF” and enable “Background graphics.” For complex pages with many images or nested layouts, switch to an online converter.

Why are some images missing in my converted PDF?

This often happens with lazy-loaded images or background graphics. Scroll through the entire page before converting, enable “Background graphics,” and use a small render delay so images have time to load.

Can I convert multiple HTML files to PDF at once?

Most online converters process one file at a time. For batch work, you can use dedicated batch tools or scripts, then upload the resulting PDFs to Smallpdf and use Merge PDF to combine them into a single document.

What is the difference between HTML to PDF and webpage to PDF?

HTML to PDF usually refers to converting a local .html file on your computer. Webpage to PDF means capturing a live page from a URL. Both result in a PDF, but webpage to PDF reflects the current state of the site at the moment you convert.

How do I convert MHTML or web archive files to PDF?

Open the MHTML or web archive file in a compatible browser and use the same print to PDF process: “File” > “Print,” choose “Save as PDF” or “Microsoft Print to PDF,” adjust settings, and save.

How can I keep PDF file sizes reasonable when converting pages with many images?

After conversion, upload the file to Smallpdf and use Compress PDF. This reduces size while keeping images readable, which is ideal for sending by email or uploading to shared drives.