Why Is My HTML-to-PDF Blurry? And How to Get Real 300 DPI

You built something nice in HTML, maybe with help from an AI, maybe by hand. On screen it looks perfect. You export it to a PDF or a PNG, send it to print, and it comes back fuzzy. The text has soft edges, the lines look furry, and it just does not have the crispness you saw on your monitor. This is one of the most common complaints about converting HTML to a file, and the cause is almost always the same one thing.

Here is what is actually happening, and how to get a file that prints sharp.

The real reason: screens and printers count pixels differently

A screen shows roughly 96 pixels per inch. A printer wants around 300 dots per inch to look clean. That gap is the whole problem.

When a tool converts your HTML "at screen resolution," it captures just enough pixels to look good on a monitor. That is fine if the file stays on a screen. But paper is denser. When those 96-per-inch pixels get spread across a full printed page, each one becomes big enough to see, and the result looks blocky and soft. It is the same reason a small image looks fine as a thumbnail and turns to mush when you blow it up.

So the file is not broken. It simply does not contain enough pixels for the size you are printing it at. The fix is to render more pixels in the first place.

What 300 DPI actually looks like in pixels

DPI on its own is just a ratio. What matters is the final pixel size of your file. Here is what different resolutions come out to for the two most common page sizes, so you can check whether your export is print quality or screen quality.

Resolution	US Letter	A4	Good for
96 DPI	816 × 1056	794 × 1123	Screen only. Blurry in print.
150 DPI	1275 × 1650	1240 × 1754	Rough drafts, internal proofs
300 DPI	2550 × 3300	2480 × 3508	Standard print. Sharp.
600 DPI	5100 × 6600	4960 × 7016	Large format, fine detail

The quick test: open your exported image or PDF and check its pixel dimensions. If a full-page US Letter file is around 816 by 1056, that is a 96 DPI screen capture and it will print blurry. If it is 2550 by 3300, you are at 300 DPI and it will print clean. This single check explains most "why is my export fuzzy" situations.

The three things that make an export look blurry

1. It was rendered at 96 DPI

This is the big one, covered above. The tool captured the page at screen resolution. The fix is to raise the DPI or scale setting to 300 before exporting.

2. It is a screenshot

A screenshot is a 96 DPI capture by definition. It shows what is on your screen, at the density of your screen. Screenshots are the single most common cause of blurry printed designs, because they look completely fine until you print them at full size. For print, you need the page re-rendered at 300 DPI, which produces a much larger image than any screenshot.

3. It got compressed too hard

Even a high-resolution export can look rough if it was saved as a heavily compressed JPEG. Compression smears fine edges and text. For anything with sharp lines or type, a lossless format like PNG, or a PDF that embeds the image without aggressive compression, keeps the edges clean.

How to actually get 300 DPI from HTML

The goal is simple: render the page at three times its normal pixel size, so each printed inch holds 300 dots instead of 96. Here is how, from easiest to most hands-on.

1. Use a tool with a DPI setting. The cleanest path is a converter that lets you pick 300 DPI directly and shows you the output pixel size before you export. You set the page to US Letter or A4, choose 300 DPI, and it renders 2550 by 3300 for you.
2. Render to an image, then place it in a PDF. For a designed page, render the HTML to a 300 DPI PNG and drop that into a correctly sized PDF. This reproduces the design exactly, backgrounds and all.
3. Avoid the screenshot shortcut. It is tempting to just screenshot the preview, but that locks you at screen resolution. Always export, do not capture.
4. Check the pixel size. Before you send anything to print, confirm the file matches the 300 DPI numbers in the table. Thirty seconds here saves a wasted print run.

Vector vs raster: another reason things can look off

There is a second, quieter cause of disappointing exports, and it is worth understanding. There are two ways to put HTML into a PDF.

A vector PDF keeps text as real text. It is razor sharp at any zoom and the text stays selectable, which is ideal for plain documents. But complex designs, with backgrounds, gradients, shadows, and precise positioning, can render differently than they looked on screen, because the PDF engine re-interprets the code rather than copying the picture.

A raster PDF takes a high-resolution image of the finished page and places that in the PDF. Text is no longer selectable, but the design is reproduced exactly, pixel for pixel, as long as you rendered at a high enough DPI. For a flyer, poster, invitation, or any real design, this is usually what you want, and it is why the DPI you choose matters so much. The raster file is only as sharp as the resolution you render it at.

So if your export is not blurry but simply looks different from your design, the issue may not be resolution at all. It may be that a vector method re-interpreted a design that needed a raster capture. Switching to a 300 DPI raster export fixes both problems at once for designed pages.

Does a home printer need the same DPI as a print shop?

Mostly, yes, and here is the practical version. Most home inkjet and laser printers reproduce somewhere between 300 and 600 DPI of real detail, so a file rendered at 300 DPI gives them everything they can use. Sending a 96 DPI file to a home printer still looks soft, because the printer can only print the detail that is in the file. It cannot invent sharpness that was never captured.

Professional print shops are stricter. Many will reject or warn about files under 300 DPI, because commercial presses hold fine detail and low-resolution art shows up immediately at full size. If you plan to send your design to a shop, an online printer, or a service that mails physical copies, treat 300 DPI as the floor, not the goal. For posters and anything viewed up close, 600 DPI is a safe choice.

One more thing worth knowing: printing larger does not need more DPI, it needs more total pixels. A design printed at poster size still wants 300 DPI across that larger area, which is why big pieces end up with very high pixel counts. This is exactly why a screenshot, which is small and low-resolution, falls apart the moment you scale it up to print.

A simple checklist before you print

• Is the file rendered at 300 DPI, not 96? Check the pixel size against the table.
• Is it an actual export, not a screenshot?
• For a designed page, is it a raster capture rather than a vector re-render?
• Is it saved losslessly (PNG) or as a lightly compressed PDF, rather than a hard-compressed JPEG?
• Does the page size match your paper, so nothing gets scaled or cropped?

Run through those five and the blurry-export problem goes away. The short version to remember: screens are 96 DPI, print is 300 DPI, and the whole trick is rendering enough pixels for the size you are printing at.

Frequently asked questions