Why convert a PDF page to PNG instead of JPG?
PNG stores every pixel exactly, so a PDF page converted to PNG keeps text, thin lines and chart labels perfectly crisp. JPG discards detail to save space. This tool renders the first page of your PDF with pdf.js at 144 pixels per inch and saves it as page-1.png, entirely in your browser.
PNG compression is lossless by design (W3C PNG specification). For a page of text on a white background that usually also keeps the file reasonably small, because large flat areas of one colour compress well. Pages full of photographs are the exception: there PNG gets heavy and JPG is the better choice.
Using the converter
- Click Choose a PDF file and pick your document.
- Click Convert. A preview of page 1 appears under the output box.
- Click Download to save
page-1.png.
The text box above the preview shows the image as a long data: URL. That's occasionally useful (you can paste it straight into an HTML img tag or a CSS rule), but for a normal file, use the Download link.
What size image do you get?
pdf.js renders at scale 2: each PDF point, 1/72 of an inch, becomes two pixels. Whether that's enough depends on where the image ends up.
| Where you'll use the PNG | Is 144 px per inch enough? |
|---|---|
| A web page, blog post or slide | Yes. A Letter page becomes 1224 x 1584 pixels |
| Reading on a phone or tablet | Yes, for normal text sizes |
| Zooming into small print or footnotes | Borderline; fine print gets soft |
| Printing at the original page size | Low. Printers typically want 300 pixels per inch for sharp output |
| Printing as a thumbnail or inset | Fine. At 300 ppi, 1224 pixels prints about 4 inches wide |
So the result suits screens well and printing only at reduced size. There's no resolution setting on the page.
Background, rotation and colour
The page is painted white before drawing, as in any PDF viewer, so the PNG has no transparent pixels even where the PDF page is empty. The page's own rotation setting is honoured, so a landscape page saved as rotated comes out landscape. pdf.js converts the page's colours to the RGB values a browser canvas works in, and any print colour profile inside the PDF isn't embedded in the PNG, so expect small shifts on CMYK print artwork.
Good uses for a page-one PNG
- Thumbnails and previews. Show the cover of a report or e-book on a web page. Crop away margins with the image cropper.
- Pasting a figure into a document where the original was a vector PDF, such as a chart exported from a spreadsheet.
- Embedding inline. Turn the PNG into a base64 string with Image to Base64 for an email template or a single-file HTML page.
- A lighter copy. If the PNG is bigger than you'd like and the page has photos, convert it with PNG to JPG instead of starting over.
To grab a page other than the first, cut it out with Split PDF (start and end page set to the same number) and convert that file.
When rendering fails
The page shows "Choose a PDF file." if nothing is selected. A file is accepted when the browser labels it as a PDF or when its first bytes contain the %PDF- signature, so a real PDF saved without a .pdf extension still converts; anything else, such as an image picked by mistake, gets "That file isn't a PDF". A file that needs a password to open fails with "Could not render that PDF: No password given", because there's no password prompt. Damaged files fail with a pdf.js parsing message after the same prefix.
Size is the other limit. Browsers cap how big a canvas can be, and drawing commands stop working beyond it. MDN says most browsers allow more than 10,000 x 10,000 pixels, while iOS devices limit canvases to 4,096 x 4,096 (MDN, canvas element). At scale 2, a page much over 2,048 points (about 28.4 inches) on a side can run into that iPhone and iPad limit. That only affects large-format drawings and posters; ordinary documents are nowhere near it.
Fonts that the PDF doesn't embed are replaced with similar ones, exactly as they would be in a viewer that lacks them.
Last updated