Files
bentopdf/src/pages/pdf-to-jpg.html
T
2026-09-04 16:26:08 +05:30

541 lines
18 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<meta
name="title"
content="PDF to JPG Converter Free - Convert PDF Pages to Images | BentoPDF"
/>
<meta
name="description"
content="Convert each PDF page into a JPG image. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta
name="keywords"
content="pdf to jpg, pdf to image, pdf to jpeg, convert pdf to pictures"
/>
<meta name="author" content="BentoPDF" />
<meta
name="robots"
content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
/>
<!-- Canonical URL -->
<link rel="canonical" href="https://www.bentopdf.com/pdf-to-jpg" />
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.bentopdf.com/pdf-to-jpg" />
<meta
property="og:title"
content="PDF to JPG Converter Free - Convert PDF Pages to Images | BentoPDF"
/>
<meta
property="og:description"
content="Convert each PDF page into a JPG image. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta
property="og:image"
content="https://www.bentopdf.com/images/og-pdf-to-jpg.png"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="BentoPDF" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://www.bentopdf.com/pdf-to-jpg" />
<meta
name="twitter:title"
content="PDF to JPG Converter Free - Convert PDF Pages to Images | BentoPDF"
/>
<meta
name="twitter:description"
content="Convert each PDF page into a JPG image. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta
name="twitter:image"
content="https://www.bentopdf.com/images/twitter-pdf-to-jpg.png"
/>
<meta name="twitter:site" content="@BentoPDF" />
<!-- Mobile Web App -->
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="PDF to JPG" />
<title>
PDF to JPG Converter Free - Convert PDF Pages to Images | BentoPDF
</title>
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest" />
<!-- Favicons -->
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/images/favicon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="512x512"
href="/images/favicon-512x512.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/images/apple-touch-icon.png"
/>
<link rel="icon" href="/favicon.ico" sizes="32x32" />
</head>
<body class="antialiased bg-gray-900">
{{> navbar }}
<div
id="uploader"
class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900"
>
<div
id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700"
>
<button
id="back-to-tools"
class="flex items-center gap-2 text-indigo-300 hover:text-indigo-400 mb-6 font-semibold"
>
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools">
Back to Tools
</span>
</button>
<h1
class="text-2xl font-bold text-white mb-2"
data-i18n="tools:pdfToJpg.name"
>
PDF to JPG
</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:pdfToJpg.subtitle">
Convert each PDF page into a JPG image.
</p>
<div
id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300"
>
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i class="ph ph-upload-simple text-4xl mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400">
<span class="font-semibold" data-i18n="upload.clickToSelect"
>Click to select a file</span
>
<span data-i18n="upload.orDragAndDrop">or drag and drop</span>
</p>
<p class="text-xs text-gray-500" data-i18n="upload.hints.singlePdf">
A single PDF file
</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">
Your files never leave your device.
</p>
</div>
<input
id="file-input"
type="file"
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf"
/>
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="options-panel" class="hidden mt-6">
<div class="mb-4">
<label
for="jpg-quality"
class="block mb-2 text-sm font-medium text-gray-300"
data-i18n="tools:pdfToJpg.imageQuality"
>Image Quality</label
>
<div class="flex items-center gap-4">
<input
type="range"
id="jpg-quality"
min="0.1"
max="1.0"
step="0.01"
value="0.9"
class="flex-1"
/>
<span
id="jpg-quality-value"
class="text-white font-medium w-16 text-right"
>90%</span
>
</div>
<p
class="mt-1 text-xs text-gray-400"
data-i18n="tools:pdfToJpg.imageQualityExplanation"
>
Higher quality = larger file size
</p>
</div>
<button
id="process-btn"
class="btn-gradient w-full"
data-i18n="common.convert"
>
Convert
</button>
</div>
</div>
</div>
<div
id="loader-modal"
class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
>
<div
class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl"
>
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
Processing...
</p>
</div>
</div>
<div
id="alert-modal"
class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden"
>
<div
class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700"
>
<h3
id="alert-title"
class="text-xl font-bold text-white mb-2"
data-i18n="alert.title"
data-i18n="alert.title"
>
Alert
</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button
id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
>
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-8 text-center"
data-i18n="howItWorks.title"
>
How It Works
</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload PDF</h3>
<p class="text-gray-400">
Select the PDF file you want to convert to images
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">
Choose Quality
</h3>
<p class="text-gray-400">
Select image quality (Low, Medium, High, Maximum)
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Select Pages</h3>
<p class="text-gray-400">
Convert all pages or choose specific pages to extract
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
4
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">
Download Images
</h3>
<p class="text-gray-400">
Save JPG images individually or as a ZIP archive
</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
data-i18n="relatedTools.title"
>
Related PDF Tools
</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a
href="pdf-to-png.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">PDF to PNG</h3>
<p class="text-gray-400 text-sm">Free online PDF to PNG tool</p>
</a>
<a
href="compress-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Compress PDF</h3>
<p class="text-gray-400 text-sm">Free online compress PDF tool</p>
</a>
<a
href="split-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Split PDF</h3>
<p class="text-gray-400 text-sm">Free online split PDF tool</p>
</a>
<a
href="pdf-to-webp.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">PDF to WebP</h3>
<p class="text-gray-400 text-sm">Free online PDF to WebP tool</p>
</a>
<a
href="extract-images.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Extract Images</h3>
<p class="text-gray-400 text-sm">Free online extract images tool</p>
</a>
</div>
</section>
<!-- FAQ Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
data-i18n="faq.sectionTitle"
>
Frequently Asked Questions
</h2>
<div class="faq-list">
<details class="faq-d">
<summary class="faq-d-q">
Can I convert just one page of a PDF to JPG?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
The tool converts every page in the file. To get a single page, pull
it out first with
<a
href="/extract-pages"
class="text-indigo-300 hover:text-indigo-400"
>Extract Pages</a
>
and convert that one-page PDF; it downloads as a plain .jpg instead
of a ZIP.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What resolution are the JPG images?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Pages render at 2x their PDF size, which works out to about 144 DPI:
a standard 8.5 by 11 inch page becomes roughly a 1,224 by 1,584
pixel image. There is no separate DPI setting.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What JPG quality setting should I use?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
The slider runs from 10% to 100% with a default of 90%. Around 80 to
90% is hard to tell from the original on screen, while lower values
shrink the files noticeably at the cost of compression artifacts
around text and sharp edges.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Why did I get a ZIP file instead of images?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
A PDF with more than one page produces filename_jpgs.zip containing
page_1.jpg, page_2.jpg, and so on, one image per page. Only
single-page PDFs download as a lone .jpg.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Should I choose JPG or PNG for my PDF pages?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
JPG is lossy and produces smaller files, which suits photos and
scans meant for email or chat. For text, diagrams, or anything that
needs exact pixels,
<a href="/pdf-to-png" class="text-indigo-300 hover:text-indigo-400"
>PDF to PNG</a
>
is lossless.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Will the text in the images be editable or searchable?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. A JPG is a flat picture of the page, so text, links, and form
fields become pixels. Keep the PDF if you need those.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I convert a scanned PDF with this tool?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Yes. Scanned pages are already images inside the PDF, and they're
rendered at 2x page scale like any other page. If the scan was low
resolution to begin with, the JPG won't add detail.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Are my PDF pages uploaded to convert them to JPG?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. The pages are drawn onto a canvas and encoded to JPG entirely in
your browser, and the images or ZIP are created on your device.
</p>
</details>
</div>
</section>
{{> footer }}
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/js/logic/pdf-to-jpg-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "PDF to JPG - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to convert PDF to JPG online",
"description": "Learn how to convert PDF to JPG using BentoPDF",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Upload File",
"text": "Click or drag and drop your file"
},
{
"@type": "HowToStep",
"position": 2,
"name": "Process",
"text": "Click the process button"
},
{
"@type": "HowToStep",
"position": 3,
"name": "Download",
"text": "Download your processed file"
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.bentopdf.com"
},
{
"@type": "ListItem",
"position": 2,
"name": "PDF to JPG",
"item": "https://www.bentopdf.com/pdf-to-jpg"
}
]
}
</script>
</body>
</html>