Convert HTML to JPG Online Free
Quick answer: Paste your HTML/CSS code into the box, or upload an .html/.htm file, choose a render (viewport) width, a background color (white or custom, since JPEG can't store transparency), and a quality level, then click Convert to JPG. Everything happens locally in your browser using html2canvas, an open-source rendering library, which walks the live DOM and computed styles inside a sandboxed, script-disabled frame and redraws it onto an HTML5 Canvas - your code is never sent to a server. Download the JPG, copy it to your clipboard, or open the raw HTML in a new tab to compare.
- Cost: Free, unlimited conversions, no signup.
- Where it runs: 100% in your browser — no code upload, no server storage.
- Input: Pasted HTML/CSS code, or an uploaded .html/.htm file.
- Output format: JPG/JPEG, lossy, always fully opaque — no transparency support.
- Live URLs? No — fetching a webpage by URL requires a server request, which this tool intentionally avoids. Paste the page's HTML instead.
- Limitations: JavaScript in your HTML does not execute; a small number of advanced CSS features may render as an approximation, not pixel-perfect.
🧱 No Transparency Support: JPEG has no alpha channel, so any area that would otherwise be see-through is filled with your chosen background color (white by default, or custom). Need real transparency? Use our HTML to PNG Converter instead.
🔗 No Live URLs: This tool can't fetch a webpage by address — that would require a server request, breaking the zero-upload privacy model. Copy the page's HTML (View Page Source) and paste or upload it here instead.
🚫 JavaScript Doesn't Run: Before rendering, your code is sanitized — script tags, inline event handlers, and javascript: links are stripped out for your safety. Static HTML and CSS render fully; anything generated dynamically by JS will not appear.
🎚️ Lossy Compression: JPEG discards some detail to shrink file size — use the quality slider to balance sharpness against file size.
🖼️ Approximate, Not a Screenshot: html2canvas reconstructs your page from the DOM and computed styles rather than taking a literal screenshot, so a few advanced CSS features may look slightly different.
🌐 External Images Need CORS: Cross-origin images without permissive CORS headers can block export ("tainted canvas"). Use CORS-enabled hosting or base64 data URIs for external images.
✅ Privacy: Your code is rendered and captured locally — it is never uploaded, transmitted, or stored anywhere.
🚀 Step 1 — Add Your HTML
Paste code below, or drag and drop an .html/.htm file. Nothing leaves your device.
Drag & drop an .html or .htm file here
Or just paste your code directly into the box below
🖼️ Preview & Export 0×0
This is your rendered HTML based on the current code and settings. Change a setting and click Convert again to update.
✅ 100% Private: Your HTML/CSS is rendered and captured locally in your browser using JavaScript. No code, image data, or filename is ever uploaded to a server or stored anywhere.
Note: Your code will be cleared once your session ends or you clear the app.
How to Convert HTML to JPG
Add Your HTML
Paste code, or upload an .html/.htm file.
Set Render Width
Choose a viewport width so your layout flows correctly.
Background, Quality & Size
Pick a background color, set JPEG quality, then choose resolution.
Download or Copy
Export a JPG, or preview the raw HTML in a new tab.
🔒 Your Code Never Leaves Your Device
Most "online converters" quietly upload your code to a server to render it. This tool renders your HTML/CSS inside a sandboxed, script-disabled frame and captures the result with html2canvas onto an HTML5 Canvas — all running entirely inside your browser tab. There is no upload step, no server-side rendering, and no network request that contains your code.
Common Uses for an HTML to JPG Converter
Email-Friendly Snapshots
Turn an HTML/CSS-designed signature or card into a small, universally viewable JPG image.
Invoices & Receipts
Render an HTML invoice template as a compact, shareable image snapshot.
Social Share Images
Design a quote card, stat graphic, or announcement in HTML/CSS and export it as a lightweight JPG for social media.
Code Snippet Images
Turn a styled code block or terminal mockup into a small image for blog posts or documentation.
UI Component Previews
Quickly capture a component's rendered look for a design review or changelog.
Archiving Design Snapshots
Keep a small JPG record of an HTML template's appearance at a point in time.
Why Use This HTML to JPG Converter?
- Fully Client-Side: An open-source rendering library and Canvas 2D both run in your browser — no upload.
- No Design Tool Needed: Convert HTML/CSS to an image without Photoshop, Figma, or any design app.
- Responsive Width Control: Render at mobile, tablet, desktop, or a fully custom viewport width.
- Adjustable Quality: Fine-tune the compression level to control file size versus sharpness.
- Resolution Control: Standard, 2x, or 3x export scaling for crisp, high-DPI images.
- Safe by Design: Scripts never execute in the rendering frame, protecting you from malicious pasted code.
- Raw HTML Preview: Open your code in a real, unsandboxed new tab to compare against the captured image.
- 100% Free & Private: No account, no watermark, no server storing your code.
HTML to JPG Converter – Complete Guide
HTML and CSS are wonderful for building interactive, responsive interfaces - but they're not a shareable image format. If you've designed a card, banner, invoice template, or social graphic using plain markup and styles, you often need a single flattened picture to drop into a slide deck, chat message, or email. This tool bridges that gap by rendering your code and capturing the result as a compact JPG, without ever sending your markup to a server.
What Is HTML to JPG Conversion?
HTML to JPG conversion means taking a structured document written in HTML (optionally with embedded or inline CSS) and producing a single flattened raster image that represents how that markup visually renders - preserving layout, colors, and typography, but discarding interactivity, semantics, transparency, and any script-driven behavior. Any area of the layout that would otherwise be transparent is filled with your chosen background color before the pixel data is compressed and saved, since JPEG has no channel to store transparency. Unlike the source code, the resulting JPG cannot be edited as markup; it is purely the final, compressed visual result.
How This Converter Actually Works
When you paste code or upload a file, the text is read directly in your browser's memory and injected into a hidden sandboxed iframe using its srcdoc attribute, with the sandbox intentionally configured to allow same-origin DOM access but block script execution. Once the frame finishes loading, your chosen render width is applied so the layout flows exactly as it would at that viewport size, and html2canvas, an open-source JavaScript rendering library, walks the resulting DOM tree, reads each element's computed CSS styles, and reconstructs an approximation of the page by drawing shapes, text, and images directly onto an HTML5 Canvas that is first filled with your chosen background color. That canvas is then exported as a JPEG data URL at your chosen quality level for download or clipboard copying. At no point does your HTML, CSS, or the rendered image data travel over the network.
JPG vs PNG as an Export Target for HTML
| Aspect | JPG/JPEG | PNG |
|---|---|---|
| Transparency | Not supported - flattened onto a background color | Fully supported via alpha channel |
| Compression | Lossy - adjustable quality vs file size | Lossless - larger files, no quality loss |
| Best for | Photo-heavy designs, email attachments, smaller file sizes | Cards/graphics needing a transparent or irregular edge |
| Universal viewer support | Very high - opens everywhere | Very high - opens everywhere |
What Renders Well vs What Doesn't
| Category | Support Level |
|---|---|
| Basic layout (flexbox, block, inline, positioning) | Well supported |
| Typography, colors, gradients, box-shadow, border-radius | Well supported |
| Local & base64-embedded images | Well supported |
| Cross-origin images without CORS headers | Blocked - taints the canvas and stops export |
| CSS animations & transitions | Captured at a single static frame, not animated |
| JavaScript-generated content | Not rendered - scripts are disabled for safety |
| Nested iframes, <video>, <canvas> elements | Limited or no support |
Supported Formats & Practical Limits
| Aspect | Details |
|---|---|
| Input | Pasted HTML/CSS text, or an uploaded .html / .htm file |
| Output format | .jpg / .jpeg (lossy, no transparency) |
| Transparency handling | Any transparent area is filled with the selected background color before export |
| Live URLs | Not supported by design - would require a server-side fetch |
| JavaScript execution | Disabled in the rendering sandbox for safety |
| External resources | Require CORS-enabled hosting, or should be embedded as base64 data URIs |
Security and Privacy Considerations
- No Code Upload: Your HTML/CSS is read using the browser's local File API or textarea input and never sent over the network.
- No Server Processing: Rendering and capturing both execute as client-side JavaScript.
- Script-Disabled Sandbox: Even malicious or accidental scripts in pasted code cannot execute, since the rendering frame blocks script execution entirely.
- No Storage: Nothing about your code or the resulting image is saved once you close or refresh the tab.
- No Account Needed: There is no login, tracking of your code content, or usage cap.
Browser Compatibility and Technical Requirements
This HTML to JPG Converter works in modern browsers that support:
- Sandboxed iframes with
srcdoc: To render your HTML locally without a network request. - HTML5 Canvas: For DOM-to-canvas rendering and JPEG export with adjustable quality.
- Clipboard API with ClipboardItem: For one-click image copy (Chrome/Edge fully supported).
Supported Browsers:
- ✅ Chrome/Edge 76+
- ✅ Firefox 55+
- ✅ Safari 13.1+
- ✅ Mobile Chrome (Android), Mobile Safari (iOS) — download supported
Troubleshooting Common Issues
Explanation: The captured content is rendered inside a wrapping container rather than a literal <body> element, so CSS rules using the bare "body" element selector (e.g. body { background: #eee; }) won't match it. Solution: Apply the style to a class or id instead (e.g. .page-wrapper or #main), or wrap your content in your own styled <div>.
Explanation: Your HTML may rely on JavaScript to generate its visible content, which won't run in the sandboxed rendering frame, or the code may reference styles that failed to load. Solution: Make sure all CSS is inline or embedded in a <style> tag within the same code, and avoid relying on scripts for visible content.
Explanation: This is expected - JPEG has no alpha channel, so any transparency in the rendered HTML must be filled with a solid color before saving. Solution: Choose your preferred fill color from the Background setting before converting, or use the HTML to PNG converter if you need to keep transparency.
Explanation: An image referenced in your HTML is hosted on another domain without permissive CORS headers, so the browser blocks reading its pixel data back out of the canvas. Solution: Host images with CORS enabled, or convert them to base64 data URIs and embed them directly in your HTML.
Explanation: JPEG compression discards detail to reduce file size, and a low quality setting can introduce visible artifacts, especially around sharp edges or text. Solution: Increase the quality slider closer to 100% for finer detail, keeping in mind this will increase file size.
Explanation: A referenced web font may not have finished loading before the capture ran, or it may be blocked by the same CORS restrictions as images. Solution: Use system fonts where possible, or embed the font as a base64 @font-face declaration inside your code.
Explanation: The chosen Render Width changes how your layout flows, just like resizing a browser window. Solution: Try a different Render Width preset, or enter a Custom width matching your intended design.
Explanation: No HTML content has been entered yet. Solution: Paste code into the textarea or upload an .html/.htm file — the button enables automatically once there's content to render.
Frequently Asked Technical Questions
Question 1: What actually renders the HTML - is it a known library?
Answer: This tool uses html2canvas, a widely used open-source JavaScript library, loaded directly in your browser. It reads the live DOM and each element's computed CSS styles and redraws them onto a canvas - it does not take a literal screenshot of the browser's own rendering output.
Question 2: Why is JavaScript disabled during rendering?
Answer: Before your code is rendered, it's parsed and sanitized: <script>, <iframe>, <object>, and <embed> tags are removed, and inline event handler attributes (onclick, onerror, etc.) and javascript: links are stripped. This protects you if you ever paste code from an untrusted source, at the cost of not rendering JavaScript-generated content.
Question 3: How is the background fill actually applied before JPEG export?
Answer: Your chosen color is passed as the backgroundColor option to html2canvas, which paints the entire capture area with that color before drawing any of your HTML's own content on top - this guarantees the canvas is fully opaque going into the JPEG encoder, since a canvas with any transparent pixels would otherwise be flattened onto a browser-default backdrop (commonly black) during JPEG serialization.
Question 4: What does the quality slider actually control?
Answer: It's passed as the encoder quality parameter to the browser's canvas JPEG export function, which controls how aggressively the DCT-based JPEG compression algorithm quantizes image data - higher values preserve more fine detail and produce larger files, lower values compress more aggressively and can introduce visible blockiness.
Question 5: Why do external cross-origin images sometimes block the export entirely?
Answer: Per the HTML Canvas security model, once a cross-origin image without a permissive Access-Control-Allow-Origin header is drawn onto a canvas, that canvas becomes "tainted," and browsers block any method that would let you read its pixel data back out - including exporting it as JPEG - to prevent cross-origin data leakage.
Question 6: How does Render Width actually affect the output?
Answer: The value is applied as the width of the sandboxed rendering frame before capture, exactly like resizing a browser window - this lets responsive layouts (flexbox, media queries, percentage-based widths) reflow exactly as they would at that viewport size before html2canvas walks the DOM.
Question 7: Can this tool convert an actual live website by URL?
Answer: No, and this is intentional. Fetching another website's HTML from your browser is blocked by cross-origin restrictions unless that site explicitly allows it, and working around that would require a server-side fetch - which conflicts with this tool's no-upload, fully local design. Instead, use "View Page Source" or "Save As" on the page you want, and paste or upload that HTML here.
Question 8: Does this tool need an account, an API key, or a headless browser service?
Answer: No. html2canvas and the sandboxed iframe rendering both run as ordinary JavaScript already loaded by this page - you never need an account, an API key, or any server-side headless browser to use it.
Glossary of Terms
- HTML
- HyperText Markup Language - the standard markup language used to structure content on the web.
- CSS
- Cascading Style Sheets - the language used to describe the visual presentation of HTML content.
- DOM
- Document Object Model - the browser's live, in-memory tree representation of an HTML document that scripts and rendering engines read and manipulate.
- Viewport
- The visible rendering area used to lay out a page; its width strongly affects how a responsive design flows.
- Sanitization
- The process of removing potentially executable content (script tags, inline event handlers, javascript: links) from HTML before rendering it, so pasted code cannot run arbitrary code on the page.
- CORS
- Cross-Origin Resource Sharing - an HTTP header-based mechanism that determines whether a resource from one origin can be read by a page from another origin, including within a canvas.
- Tainted Canvas
- A canvas that has had cross-origin image data drawn onto it without proper CORS permission, which browsers block from being read back out for security reasons.
- JPEG / JPG
- A lossy raster image format that compresses pixel data by discarding some visual detail; it has no alpha channel, so any transparency must be flattened onto a solid background before export.
- Quality (JPEG)
- An adjustable compression setting controlling the tradeoff between visual fidelity and output file size in a JPEG image.
Frequently Asked Questions
Yes, completely free with no watermark, no signup, and no limit on how many conversions you run.
No. Your HTML/CSS is rendered inside a sandboxed frame and captured entirely inside your browser using JavaScript. It is never transmitted over the network.
No. Fetching a live webpage by URL would require a server-side request or run into browser CORS restrictions, which conflicts with this tool's 100% local, no-upload design. Instead, copy the page's HTML (View Page Source or Save As) and paste or upload it here.
No. The rendering frame intentionally disables script execution for safety, so only static HTML and CSS are captured. Content generated dynamically by JavaScript will not appear in the exported JPG.
No. JPEG has no alpha channel, so any area that would otherwise be transparent is filled with the background color you choose - white by default, or a custom color. Use our HTML to PNG converter if you need real transparency.
JPEG is a lossy format - the quality slider controls how much compression is applied. Higher values keep more detail with a larger file size, lower values shrink file size but can introduce visible blocky artifacts.
Images loaded from other domains must include permissive CORS headers to be read into a canvas. Without them, the browser marks the canvas as tainted and blocks export, per the HTML Canvas security model. Host images with CORS enabled, or embed them as base64 data URIs.
It's a very close approximation, not a literal screenshot. The html2canvas library reconstructs the page by reading the DOM and computed CSS styles and redrawing them onto a canvas, so a small number of advanced CSS features may render slightly differently than in a real browser.
Pick the viewport width that matches how you want the layout to flow - for example 375px for a mobile look, 1024px for a typical laptop view, or a custom width for a specific design.
Yes. Pasting code, previewing, and downloading all work on Android and iOS mobile browsers; clipboard copy support varies by mobile browser.
Yes. Use the "Preview Raw HTML in New Tab" button to open your code in a normal, unsandboxed browser tab - useful for comparing against the captured JPG, especially if your code relies on JavaScript.
Final Thoughts
HTML and CSS are built for interactive interfaces, not for sharing as a single picture - but a chat app, email, or slide deck often needs exactly that. This tool bridges the gap by rendering your markup inside a safe, script-disabled sandbox with the open-source html2canvas library, and capturing the result into a compact, universally viewable JPG - all without your code ever leaving your device.
Paste some HTML above and generate your first JPG!