iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
You can build a browser-only PDF size-reduction workflow with PDF.js, OffscreenCanvas and a Web Worker, but the key step is to render each source page as an image and create a new PDF from those images. PDF.js parses and renders PDFs; it is not, by itself, a PDF compressor or PDF writer. This reconstruction can make some scan-heavy files smaller, but it can also enlarge a file and discard useful document features. Compare the output with the original for size, readability and fidelity before presenting it as a compression result.
How the browser-only workflow works
The process has two distinct jobs: turn source pages into image data, then assemble that data into a new PDF. PDF.js handles the first job. A separate PDF-generation library, such as pdf-lib, handles the second.
- Load the source. Read a user-selected PDF as bytes and pass it to PDF.js. Its API exposes a document and page objects asynchronously.
- Render a page. Retrieve each page, choose a viewport scale, and render it to a canvas. Set the canvas dimensions from the viewport and the chosen output scale.
- Encode the page image. Convert the rendered canvas to an image format and quality setting supported by the implementation. Those settings determine the image detail supplied to the output PDF.
- Build a new PDF. Create a PDF with the output library, add a page for each rendered image, embed the image, and save the result in the browser.
- Compare results. Check output bytes, legibility, and retained features against the source. A smaller file is not guaranteed.
In PDF.js terminology, the display library provides the document and page rendering APIs; the prebuilt distribution also includes a separate core worker file, pdf.worker.mjs. The worker asset must be deployed with the library version it belongs to.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallWhat each component does—and does not do
PDF.js parses and renders
Mozilla describes PDF.js as a platform for parsing and rendering PDFs. Its documented flow loads a document, retrieves pages, creates a viewport, and renders pages to a canvas. That makes it the source-page rendering component in this workflow, not the component that writes the replacement PDF.
#1 Best Overall
- EVERY PDF TOOL UNLOCKED - 30+ tools in one app: edit text and images, convert, merge, split, compress, sign, OCR, redact, watermark, batch process, and more. No feature gates, no upsells, nothing held back.
- PAY ONCE, OWN FOREVER — A one-time purchase, not a subscription. Other apps runs $240/year — Scrivar is yours for life, with free updates included.
- UNLIMITED eSIGN, BUILT IN — Send contracts and forms for signature and track every step. Recipients sign in their browser with no account or app needed. Replace DocuSign and save hundreds a year.
- PC, MAC, AND WEB — Install on any Win 10/11 PC or macOS 11+ Mac (Intel or Apple Silicon), or work in your browser at scrivar.com. Same tools, same account, everywhere you work.
- OCR + FULL OFFICE CONVERSION — Turn scanned documents into searchable, selectable text, and convert PDFs to and from Word, Excel, and PowerPoint with formatting kept intact.
OffscreenCanvas can help with image work
PDF.js documents worker OffscreenCanvas support primarily as an aid to image conversion and rendering performance. Its API also describes a canvas-area setting used to decide when an image should be resized through OffscreenCanvas. OffscreenCanvas is neither a PDF file format nor a PDF-writing or compression engine, and its presence does not establish that every page render will happen off the main thread.
A Web Worker is not a blanket guarantee of background rendering
The prebuilt PDF.js core worker and optional rendering in a worker thread are related but distinct parts of the setup. The current draft API documentation says worker rendering requires GlobalWorkerOptions.rendererSrc. If that renderer worker is not configured or fails, PDF.js falls back to rendering on the main thread. A custom ownerDocument also disables worker rendering. Test the production build rather than assuming a worker file alone moves all rendering off the UI thread.
Rank #2
![PDF Extra 2024| Complete PDF Reader and Editor | Create, Edit, Convert, Combine, Comment, Fill & Sign PDFs | Lifetime License | 1 Windows PC | 1 User [PC Online code]](https://m.media-amazon.com/images/I/41eZq4aiipL._SL160_.jpg)
- EDIT text, images & designs in PDF documents. ORGANIZE PDFs. Convert PDFs to Word, Excel & ePub.
- READ and Comment PDFs – Intuitive reading modes & document commenting and mark up.
- CREATE, COMBINE, SCAN and COMPRESS PDFs
- FILL forms & Digitally Sign PDFs. PROTECT and Encrypt PDFs
- LIFETIME License for 1 Windows PC or Laptop. 5GB MobiDrive Cloud Storage Included.
A PDF-generation library writes the replacement
pdf-lib documents creating PDFs, embedding JPEG and PNG image bytes, adding pages, and saving in browser contexts. If the images supplied to it are rendered page images, the output is still image-based even though the result is a valid PDF.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Choose settings around the document, not a promised percentage
There is no universal setting that guarantees a smaller file. A rendered page’s dimensions and image encoding affect both output size and visible detail. Scan-heavy or image-heavy input may respond differently from a document containing mostly text and vector graphics. The cited component documentation does not publish a general compression ratio for this pipeline, so measure the actual source and output rather than advertising an expected percentage.
Rank #3
- Pay once, own Forever
- Modern PDF App. Scrivar requires no download. Use scrivar from your browser. Optional Windows/Mac app available.
- Create and edit PDFs. Collaborate with ease. E-sign documents and collect signatures. Get everything done in one app, wherever you go.
- E-sign documents or request e-signatures on any device. Recipients don’t need to log in or have an account to e-sign.
- Make editable PDF forms in just a few steps to quickly and securely capture form data.
- Render scale: A higher scale produces more pixels and can preserve fine detail better, but increases the amount of image data to encode and process. A lower scale may reduce detail enough to make small text difficult to read.
- Image format and quality: Choose an encoding supported by the output library and offer a clear quality control where applicable. Compare the encoded images at normal reading size, especially for small text, diagrams, and fine lines.
- Page dimensions: Use the rendered page dimensions when creating each output page so the image fits without unintended stretching or cropping.
- Document features: Tell users that this is rasterization, not a transparent optimization of the original PDF. Test whether selectable or searchable text, vectors, links, forms, and document structure remain usable; the workflow does not preserve them in the same manner as the source.
- Acceptance checks: Record source and output size, inspect small text and detailed areas, check page count and orientation, and test any features the intended audience needs.
Plan for canvas memory and page-by-page processing
Canvas memory can become substantial before encoding or assembling the output PDF. Mozilla’s PDF.js FAQ estimates that one letter-size page rendered at 816 × 1056 pixels uses 3,446,784 bytes—about 3.5 MB—at 4 bytes per pixel and 96 DPI. The FAQ estimates about 14 MB per page at device pixel ratio 2. These are illustrative canvas-memory estimates, not measurements of compression performance; the FAQ does not state a publication year.
The FAQ notes that 100 pages at those settings require that amount of memory per page before rendering time is considered. Treating pages incrementally, reusing or releasing canvas resources when practical, and avoiding unnecessarily high output scales are sensible engineering measures, not benchmarked guarantees. Also account for the memory needed for encoded images and the new PDF while designing the workflow.
Rank #4
- EDIT text, images & designs in PDF documents. ORGANIZE PDFs. Convert PDFs to Word, Excel & ePub.
- READ and Comment PDFs – Intuitive reading modes & document commenting and mark up.
- CREATE, COMBINE, SCAN and COMPRESS PDFs
- FILL forms & Digitally Sign PDFs. PROTECT and Encrypt PDFs
- 1 Year License for 1 Windows & 2 Mobile (Android and/or iOS) devices.
Configure and deploy the worker deliberately
- Keep versions aligned: Use a PDF.js display library and worker asset from the same version. PDF.js says mismatched versions are not guaranteed to work and can produce an API/worker version error.
- Test the intended hosting setup: PDF.js says its worker is not enabled for
file://URLs in the getting-started guide. Test through the local development server and production hosting arrangement you plan to use. - Exercise failure behavior: Confirm the renderer worker starts in the production build and that the fallback path remains usable if worker rendering is unavailable or fails.
- Check cross-origin access: A locally selected PDF avoids the remote-origin dependency. Fetching a PDF from another origin is subject to normal browser permissions and requires suitable CORS behavior or an application proxy.
The PDF.js API reference is explicitly a draft documentation surface, and browser support and worker configuration can vary by version. Pin the versions used by an implementation and verify the relevant API and browser behavior against those versions.
Free tools Windows power users keep installed
One-click scans. No signup required.
Decide whether rasterization is the right approach
Use this architecture when a replacement made of page images meets the reader’s needs and measured output is acceptable. It may be unsuitable when preserving searchable text, vector sharpness, links, forms, or document structure matters. In either case, compare the source and generated PDF using the same checks: bytes on disk, small-text readability, fine detail, required features, processing time, peak memory, and whether worker rendering actually ran or fell back to the main thread.
For a locally selected file, the workflow can process bytes in the browser without sending the PDF to a server if the application is designed not to upload or transmit it. The use of browser APIs alone is not proof of a privacy guarantee; that depends on the complete application.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
