Image to PDF: How to Build Documents from Images in the Browser

The PDF format was designed to contain text, vector graphics, fonts, and images in a single portable file that renders identically on every device. Most of the time, PDFs are generated from documents — word processor files, presentations, web pages, or design layouts that contain a mix of content types. But one of the most common everyday uses of PDF generation is far simpler: wrapping one or more images in a PDF container so they can be shared, printed, or archived as a single document.

Scanned receipts, signed contracts, photo collections, ID documents, insurance claims, whiteboard captures, design proofs — all of these are commonly assembled into PDF files from image sources. The conversion is conceptually simple: create a PDF page, place the image on it, repeat for multiple images. But the details — page sizing, orientation, margins, image scaling, compression, and multi-image assembly — determine whether the result is a clean, professional document or a frustrating mess of cropped images and mismatched page sizes.

Why PDF Instead of Just Images

Images are self-contained and widely supported — why wrap them in a PDF at all? Several practical reasons drive the image-to-PDF workflow.

Single-file distribution. A set of 15 scanned receipt images is unwieldy to email or upload as individual files. A single PDF containing all 15 is one attachment, one download, one file to manage. The PDF preserves the order of images and ensures the recipient sees them in sequence.

Print formatting. Printing an image file depends on the application and printer driver handling the scaling — the image might be printed at its native pixel dimensions (potentially too small or too large for the paper), scaled to fit (potentially with incorrect aspect ratio), or centered with white borders. A PDF defines the exact page size and image placement, producing consistent printed output regardless of the viewing or printing application.

Professional conventions. Many industries and institutions require PDF format for document submission — insurance claims, legal filings, academic submissions, government forms, and corporate expense reports. Even when the source material is photographic (a scanned document, a photo of a receipt), the submission format is PDF.

Annotation and metadata. PDF supports text annotations, form fields, bookmarks, and document metadata (title, author, creation date) that image formats do not. Wrapping images in a PDF container opens the door to adding these elements — even if the initial conversion is image-only, the PDF can be annotated later.

How Image-to-PDF Works Technically

Building a PDF from images involves constructing a valid PDF file structure with the image data embedded as image XObjects. The process does not involve rasterization (the opposite direction — PDF to image — does) because the image is already rasterized. Instead, the image's pixel data is embedded directly into the PDF, with a page definition that specifies where and how to display it.

The minimum PDF structure for a single-page image document includes a document catalog (the root object that defines the document), a page tree containing one page node, a page object that defines the page dimensions and references a content stream, a content stream that contains a drawing operator to place the image, and an image XObject that contains the actual pixel data.

The content stream for a page displaying a full-page image is minimal — it saves the graphics state, applies a transformation matrix to scale and position the image, invokes the image XObject, and restores the graphics state. In PDF operator syntax, this is just a handful of operators.

The image data within the XObject can be stored in its original compressed format. If the source image is a JPEG, the JPEG data can be embedded directly using DCTDecode compression — the PDF viewer will decode it using the same JPEG decompression that any image viewer would use. This means no quality loss and no file size increase from re-encoding. PNG data requires conversion to the Flate-compressed format that PDF uses for lossless image storage.

In the browser, libraries like jsPDF handle all of this structural complexity. You provide the image data (as a data URL or ArrayBuffer), specify the page dimensions and image placement, and the library constructs the complete PDF file structure, embeds the image, and produces a downloadable blob.

Page Sizing: Fitting the Image to the Page

The most common image-to-PDF question is how to size the page. There are two main approaches, and choosing the wrong one is the source of most frustration with image-to-PDF tools.

Fixed page size uses a standard paper dimension — US Letter (8.5 by 11 inches), A4 (210 by 297 mm), or another standard — and scales the image to fit within that page. This approach is appropriate when the PDF will be printed on physical paper, because the page dimensions match the paper dimensions. The image is scaled to fit within the page (with or without margins) while preserving its aspect ratio. If the image's aspect ratio does not match the page's aspect ratio, white space appears on two sides.

Image-sized pages set the page dimensions to match the image's dimensions (at a specified DPI). A 3000 by 2000 pixel image at 150 DPI produces a page that is 20 by 13.33 inches. This approach preserves the image at its native pixel dimensions with no scaling, no white space, and no aspect ratio mismatch. It is appropriate when the PDF is a container for the image data rather than a printable document — for archival, for submission to systems that accept only PDFs, or for combining multiple images of different sizes into a single file.

Our image to PDF tool offers both approaches. You can select a standard page size (US Letter, A4, and others) and have the images scaled to fit, or choose image-sized pages where each page matches its image's dimensions.

Orientation: Portrait and Landscape

When using fixed page sizes, orientation matters. A standard US Letter page is 8.5 by 11 inches in portrait orientation and 11 by 8.5 inches in landscape. A landscape photograph placed on a portrait page is either scaled down significantly (to fit the 8.5-inch width) or rotated 90 degrees.

The best approach is automatic orientation detection: examine each image's aspect ratio and choose portrait or landscape page orientation to match. An image wider than it is tall gets a landscape page. An image taller than it is wide gets a portrait page. A square image gets whichever orientation is the default.

Our tool handles this automatically — each page in the output PDF can have a different orientation, matching the corresponding image. A mix of portrait and landscape photographs produces a PDF where each page is oriented correctly, rather than forcing all pages to a single orientation.

Multi-Image Documents

Assembling multiple images into a single PDF is where the format's value as a container becomes most apparent. Each image becomes one page of the document, and the PDF viewer provides a consistent browsing experience with page-by-page navigation, zoom, and scrolling.

The ordering of pages typically matches the ordering of the input images. Our image to PDF tool lets you add multiple images and reorder them before generating the PDF, so the final document's page sequence matches your intent.

When combining images of different sizes and aspect ratios, the page sizing strategy matters even more. With image-sized pages, each page simply matches its image — a tall screenshot followed by a wide panorama followed by a square photo produces three differently-sized pages, which is fine for on-screen viewing but can be awkward for printing. With fixed page sizes, all pages share the same dimensions and the images are scaled to fit, producing a uniform document that prints consistently.

Compression and File Size

The output file size depends primarily on the image data and how it is embedded. For JPEG source images, the most efficient approach is pass-through embedding — storing the original JPEG data directly in the PDF without re-encoding. This preserves the original file size and quality exactly. Re-encoding a JPEG (decoding it and then encoding it again) introduces a second round of lossy compression, which can degrade quality and may actually increase file size if the re-encoding quality is set higher than the original.

For PNG source images, the data must be re-encoded for PDF embedding because PDF uses a different lossless compression format (Flate/zlib) than PNG (DEFLATE with PNG-specific filters). The pixel data is identical, but the compression wrapper changes. The file size difference is typically small.

If the source images are very large (multi-megapixel photographs), the resulting PDF will be correspondingly large. For situations where file size must be minimized — email attachments with size limits, upload forms with restrictions — compress the images before converting to PDF. Our image compressor can reduce image file sizes significantly before they are assembled into a PDF, and our image resizer can reduce dimensions to match the intended display size.

Metadata and Document Properties

PDF supports document metadata that image formats cannot carry. When generating a PDF from images, the metadata fields are typically blank or set to defaults — the PDF creation tool, the creation date, and perhaps a title. Meaningful metadata (title, author, subject, keywords) must be added explicitly.

For archival and organizational purposes, adding metadata is valuable. A PDF titled "Insurance Claim — Vehicle Damage — 2026-09-07" with an author field and keyword tags is far more useful in a document management system than "image-to-pdf-output.pdf" with no metadata. Some image-to-PDF tools allow setting these fields during conversion; others require a separate metadata editing step.

Browser-Based Generation with jsPDF

jsPDF is a JavaScript library that constructs PDF files entirely in the browser. It provides methods for creating pages, adding images, setting fonts, drawing text and shapes, and outputting the result as a downloadable blob. For image-to-PDF conversion, the relevant methods are addPage (to create a new page with specified dimensions), addImage (to place an image at specified coordinates with specified dimensions), and save (to trigger a browser download of the generated PDF).

The library handles the low-level PDF structure — object numbering, cross-reference table generation, stream encoding, and trailer construction — so the calling code only needs to express the document's logical structure: pages, images, positions, and sizes.

jsPDF can accept image data as base64-encoded data URLs, which integrates naturally with the Canvas API workflow. An image loaded into a Canvas element can be exported as a data URL and passed directly to jsPDF's addImage method. This pipeline — file input to Canvas to data URL to jsPDF — is how our image to PDF converter works, with the entire process running in the browser.

The generated PDF files are valid and render correctly in all standard PDF viewers — Adobe Acrobat, Preview on macOS, Chrome's built-in PDF viewer, and others. The files support standard PDF features including page navigation, zoom, and printing at full embedded image resolution.

When to Use Image-to-PDF vs. Other Approaches

Image-to-PDF is the right tool when you need to assemble multiple images into a single document, when the receiving system requires PDF format, or when you need print-formatted output from image sources. It is not the right tool when you need to create a text-searchable document from scanned images — that requires OCR (optical character recognition), which is a separate and much more complex process. A PDF generated from images contains only raster data; the text in a scanned document image is just pixels, not selectable or searchable text.

For the reverse direction — extracting images from PDFs — see our article on PDF to image conversion, which explains the rasterization process and the role of DPI in determining output quality. Our PDF to image tool handles that direction using Mozilla's PDF.js library.

The Bottom Line

Image-to-PDF conversion wraps raster image data in a PDF document structure, providing single-file distribution, print formatting, professional submission compatibility, and the ability to combine multiple images in an ordered sequence. The key decisions are page sizing (fixed paper size vs. image-matched pages), orientation handling (automatic detection based on aspect ratio), and compression strategy (pass-through for JPEG, re-encoding for PNG). Our image to PDF tool handles all of these decisions in the browser using jsPDF — no upload, no server, no installation — producing valid PDF files that work in every standard viewer.

References

jsPDF — GitHub — The official repository for the jsPDF library, including documentation and examples for client-side PDF generation.

Mapsoft — PDF File Structure Explained — Clear breakdown of PDF internal structure including objects, content streams, and cross-reference tables.

ISO 32000-2:2020 — PDF Specification — The official ISO standard defining the PDF format, including image XObject embedding and content stream operators.

MDN — HTMLCanvasElement.toDataURL() — Documentation for the Canvas API method used to export image data for PDF embedding.

Stack Overflow — Insert JPG Image and Create PDF Using jsPDF — Community discussion on practical implementation of image-to-PDF conversion with jsPDF.