How to generate a pdf preview image strip for a website embed
- Step 1Trim to the preview pages first (optional) — The strip includes every page. For a typical 3-5 page "preview" (cover, contents, a body page), extract those pages first with Extract Pages so the strip shows only what you want public.
- Step 2Open the strip tool and drop the PDF — Go to PDF to Image Strip and add the (trimmed) PDF. On free, over 50 pages or 2 MB is blocked before rendering — another reason to trim first.
- Step 3Let it render the preview — It runs automatically at the fixed 1.5x scale. There's no width or DPI control here, so the raw PNG width is the widest page's rendered width.
- Step 4Download the PNG — Saved as
<name>-page-1.png— one image containing the preview pages stacked. - Step 5Resize to your container width in your pipeline — Since the tool has no width box, resize the PNG to your product-image container (e.g. 800px) at build time or in an editor, and serve responsive
srcsetvariants if needed. - Step 6Embed with lazy loading — Add the image to your CMS or storefront and set
loading="lazy"on the<img>so the preview defers until it nears the viewport — much lighter than an embedded PDF.
Preview-strip capabilities for website embeds
What product-page and document-library teams typically need, mapped to the strip tool's real behaviour. Width, format, and page selection are handled outside the tool.
| Requirement | In the strip tool? | Where it actually happens |
|---|---|---|
| Single preview image | Yes | This tool — one PNG with pages stacked. |
| Fixed container width (e.g. 800px) | No width control | Resize the PNG at build time or in an editor; serve srcset. |
| First 3-5 pages only | No page selector | Extract Pages before stripping. |
| JPEG for web weight | No (PNG only) | Convert the PNG to JPEG in your build pipeline, or use PDF to JPG per page. |
| Lazy loading | Set in your HTML | Add loading="lazy" to the <img> tag. |
| Watermark the preview | No | Watermark the source with PDF Watermark before stripping. |
Resize targets for common embed slots
The raw strip width is the widest page at 1.5x; resize the downloaded PNG to these targets in your pipeline. PNG is lossless; convert to JPEG if web weight matters more than crisp text.
| Embed slot | Target width (px) | Notes |
|---|---|---|
| Product thumbnail | 400-600 | Convert to JPEG ~80% for weight |
| Product main image | 800-1000 | Keep PNG if text must stay sharp |
| Document library card | 300-400 | Tiny — JPEG is fine |
| Full-width preview | 1200+ | Consider splitting tall strips |
Cookbook
Production embed recipes. The strip tool generates the raw PNG; width, format, and page selection are handled before or after it.
3-page preview for a template product page
Show the cover, an interior page, and the back so buyers know what they're getting — without exposing the whole template. Trim first, then strip.
Step 1 Extract Pages: 1, 5, 12 -> preview.pdf Step 2 PDF to Image Strip: preview.pdf Result preview-page-1.png (3 pages stacked) Step 3 Resize to 800px, embed as product image Trim tool: /pdf-tools/pdf-extract-pages
Lazy-loaded embed markup
Once you have the PNG, embedding it well is HTML, not the tool. Use lazy loading and explicit dimensions to avoid layout shift.
<img src="/previews/whitepaper-page-1.png" width="800" height="4200" loading="lazy" decoding="async" alt="Whitepaper preview" />
Watermark the preview before publishing
To deter copying of a paid document, watermark the source PDF first, then strip — the watermark is baked into the preview image.
Step 1 PDF Watermark: text 'PREVIEW' on source.pdf Step 2 PDF to Image Strip: watermarked.pdf Result preview shows the watermark on every page Watermark tool: /pdf-tools/pdf-watermark
Convert the PNG to JPEG for page weight
PNG previews can be heavy. If text sharpness isn't critical, convert the downloaded strip to JPEG in your build pipeline, or export per-page JPEGs directly.
Option A Strip -> PNG -> convert to JPEG (build step) Option B PDF to JPG per page -> stitch/serve as gallery Per-page JPEG: /pdf-tools/pdf-to-jpg
Whole-document preview blocked on free
Trying to strip a full 90-page report on free fails before rendering. For a public preview you only want a few pages anyway.
Input: report.pdf (90 pages) Free limit: 50 pages Result: blocked -> extract a 3-5 page preview first Fix: Extract Pages -> preview.pdf -> strip
Edge cases and what actually happens
You wanted a specific 800px width
Not supportedThere's no width input — the raw strip width is the widest page at the fixed 1.5x scale. Resize the downloaded PNG to your container width in your build pipeline or an editor, and serve responsive srcset variants for different breakpoints.
Whole document exposed in the preview
By designThe strip includes every page of whatever PDF you give it. For a public product preview you usually want only a few pages — trim with Extract Pages first so the strip doesn't reveal the entire paid document.
Preview PNG is heavy and slows the page
ExpectedA multi-page PNG can be large. PNG is lossless by design. Convert the downloaded strip to JPEG in your build step (or export per-page JPEGs with PDF to JPG) when web weight matters more than crisp text, and always set loading="lazy".
PDF over 50 pages or 2 MB on free
Blocked (free limit)Both page count and size are checked before rendering. Over 50 pages or 2 MB on free triggers an upgrade prompt. For previews this is rarely a problem because you should trim to a few pages first; otherwise compress with Lossy PDF Compress or upgrade.
Tall strip causes layout shift
ExpectedA stacked strip is very tall relative to its width. If you embed it without explicit width/height attributes, the page reflows as the image loads. Set both attributes (or a CSS aspect-ratio) on the <img> to reserve space and avoid cumulative layout shift.
Very long PDF fails the strip render
Browser limitHeight is the sum of page heights, so a long document can exceed the browser's maximum image dimension and the tool reports "Failed to create image strip." For previews, extract a few pages first; for full-document galleries, split with Split by Range.
Preview needs a watermark
Not supported hereThe strip tool doesn't add watermarks. Watermark the source with PDF Watermark before stripping, so the mark is rendered into the preview image and can't be trivially removed.
Source PDF is encrypted
May fail to renderPage counting tolerates encryption, but pdfjs rendering can fail on a protected PDF. Remove the password with PDF Unlock (owner password required) before generating the preview strip.
Frequently asked questions
How many pages should the preview strip show?
For a website preview, 3-5 pages is typical — cover, a contents or sample page, and a body page. The strip itself includes every page you give it, so trim to those pages first with Extract Pages; otherwise you'll publish the whole document.
Can I set the preview to 800px wide?
Not in the tool — there's no width control. The raw strip width is the widest page at the fixed 1.5x scale. Resize the downloaded PNG to 800px (and serve responsive srcset variants) in your build pipeline or an image editor.
Should I use PNG or JPEG for the embed?
The tool outputs PNG only. PNG keeps text sharp, which is good for template and document previews, but the file can be large. If page weight matters more than crisp text, convert the PNG to JPEG in your build step, or export per-page JPEGs with PDF to JPG.
Can I lazy-load the strip image?
Yes — that's an HTML setting, not a tool option. Add loading="lazy" to the <img> so the browser defers loading the preview until it nears the viewport. Also set explicit width/height to prevent layout shift, since the strip is very tall.
Will the strip reveal my whole document?
Yes, unless you trim first. It renders every page of whatever PDF you give it. For a public preview, extract just the pages you want shown with Extract Pages, and consider watermarking the source with PDF Watermark before stripping.
Can I watermark the preview?
Not in the strip tool. Apply the watermark to the source PDF first with PDF Watermark, then generate the strip — the watermark is rendered into the preview image, so it can't be removed without editing the image.
Is the document uploaded to generate the preview?
No. Rendering and stitching happen entirely in your browser via pdfjs; nothing is sent to a server and the result panel shows 0 bytes uploaded. This keeps unpublished product PDFs and paid templates private during preview generation.
Why is the file named -page-1?
It's the image-download naming pattern for this tool. The single PNG contains all the (preview) pages stacked vertically — the -page-1 suffix doesn't mean only the first page was captured.
How do I avoid layout shift when embedding?
Set explicit width and height attributes (or a CSS aspect-ratio) on the <img> so the browser reserves the right space before the tall strip loads. Pair this with loading="lazy" and decoding="async" for a fast, stable embed.
My full report won't strip on free — what now?
A 90-page report exceeds the free 50-page limit and is blocked before rendering. For a preview you only need a few pages anyway — extract a 3-5 page sample with Extract Pages first, then strip the small result.
Can the strip image be cached by my CDN?
Yes — it's a normal PNG file, so it caches and serves like any static image, unlike a live PDF iframe. Generate it once, upload it to your asset host or CDN, and reference it from the product page.
Do I have to click anything to generate it?
No. The tool has no options panel and no Process button — it runs automatically when you drop the PDF (and it passes the tier limits). The strip appears in the result panel ready to download.
Privacy first
All PDF processing runs locally in your browser using PDF-lib and pdf.js. No file is ever uploaded — only metadata counters are saved for signed-in dashboard stats.