ToolJutsu
All tools
PDF Tools

HTML to JPG

Render an HTML snippet as a JPG screenshot.

900px
92%
Background colour
#FFFFFF
Processed on your device. We never see your files.

How to use HTML to JPG

What is HTML?

HTML (HyperText Markup Language) is the format every web page is written in. It uses nested tags — <h1>, <p>, <table>, <ul> and hundreds more — to describe the structure and content of a document, with CSS layered on top to control how it looks. Every browser, every modern email client and every e-reader speaks it natively, which makes it the universal source format for visually rich content that started life on the web.

What is JPG?

JPG (sometimes written JPEG) is the longest-running standard for photographic images on the web, in print and across every consumer camera. It uses lossy compression — visual detail is discarded to shrink the file — but the trade-off is so well tuned that high-quality JPG remains almost universally accepted, displayed and embedded. Almost every app understands JPG, which is why it is the safest default for a one-shot screenshot you want to drop into a slide, a document or a social post.

Why convert HTML to JPG?

The most common reason is embedding a styled snippet in a place that does not render HTML. PowerPoint, Keynote, Google Slides, Word, Pages, Notion blocks, social-network posts and most chat apps will not let you paste live HTML — but they all accept a JPG. Rendering once and pasting the image is the universal fix.

The next reason is marketing and design previews. Designers and marketers prototype cards, callouts, ad creatives and email-header blocks in HTML/CSS because the tools are familiar — but the deliverable is often a JPG for review, social distribution or stock upload. This tool removes the headache of opening a browser, taking a screenshot and cropping by hand.

The third reason is archiving a rendered state. A live web page changes; a JPG of the page does not. Saving a JPG of an HTML snippet — a calculation output, a generated certificate, a styled report — fixes it in time in a way the source HTML alone never can.

The fourth reason is code snippets and tutorials. Writers demonstrating CSS or layout often want a tidy image of the result to drop into a blog post. A direct HTML-to-JPG converter beats spinning up a sandbox just to screenshot it.

(This tool sits in the PDF cluster on ToolJutsu rather than the image cluster, because it pairs naturally with HTML to PDF — both use the same html2canvas render pipeline, just with different output formats.)

How to use this HTML to JPG converter

  1. Paste your HTML into the HTML markup box, or drop an .html file onto the dropzone above it. Full documents and partial snippets both work — full documents have the <body> content extracted automatically.
  2. Adjust the render width slider (320–1600 px) to match the width your design is intended for. 900 px is a good default for cards and callouts; 1600 px for wide hero-style images.
  3. Adjust the JPG quality slider. 92% is near-lossless; 80% is a useful middle ground; below 70% you may see soft edges on text.
  4. Pick a background colour. White is safest for documents, match your destination’s background for everything else.
  5. Optionally edit the filename — the result downloads as your-name.jpg.
  6. Click Render to JPG and a preview appears below the form. Click Download JPG to save it.

Quality tips for HTML to JPG

The render is internally scaled 2× for retina-grade sharpness, so text and edges look crisp even when the JPG is displayed at its native logical width. If text in your output looks fuzzy, it usually means the snippet itself uses a very small font — bump the source CSS up to 15–16 px and re-render.

System fonts (Arial, Helvetica, Times, Georgia, system-ui) render most reliably because they are guaranteed to be installed on the machine doing the rendering. External web fonts loaded by @font-face from a remote URL will not load — embed them as a data: URI in an inline <style> block if you absolutely need a specific typeface.

For social-media-ready images, render at a width that matches the target platform — 1200 px for most feeds is a safe bet, and the 2× scale will give you an actual 2400 px file, which downsamples gracefully when re-encoded server-side.

Privacy

Your HTML never leaves your browser tab. html2canvas runs in JavaScript on your device, the canvas is encoded to JPG by your browser’s built-in encoder, and the file is handed back to you as a download. The libraries are loaded once from this site and then cached — after that, the converter works offline. You can verify the zero-upload behaviour in any browser’s Network panel.

Browser compatibility

html2canvas works in every modern evergreen browser — Chrome, Edge, Firefox, Safari and their mobile equivalents. Canvas JPG encoding has been universal since the format existed. The only failure mode is when a snippet references resources (images, fonts, stylesheets) that cannot be fetched from a public URL with permissive CORS headers, in which case those resources are simply omitted from the render.

Frequently asked questions

How sharp is the rendered JPG — what resolution comes out?
The render width slider sets the logical width of the snippet (320–1600 px), and html2canvas captures at 2× scale internally for crispness on retina displays. So a 900 px render produces a 1800 px-wide JPG; a 1600 px render produces a 3200 px-wide one. Height is determined by the content. That is more than enough resolution for slides, social posts and document embeds; the caption under the preview shows the exact pixel dimensions of what you are about to download.
Can the output have a transparent background?
No — JPG is an opaque format with no alpha channel, so every pixel has to have a solid colour behind it. The background colour picker controls what that colour is; the default is white. If you need transparency around the rendered element, the right tool is a PNG screenshot, not a JPG. Otherwise pick a background that matches whatever you are pasting the JPG into (a slide deck, a doc, a webpage).
Why does my JPG file come out so large?
Two reasons usually. First, the 2× scale means a 900 px render is actually an 1800 px image. Second, JPG quality defaults to 92%, which is near-lossless. If you need a smaller file, drop the quality slider — 80% is still visually clean for most screenshots, and around 70% if you want it really small. You can also reduce the render width: a 600 px snippet usually looks just as good as a 1200 px one in most embed contexts.
Why JPG rather than PNG for HTML screenshots?
JPG compresses photographic and gradient-heavy content far more efficiently — the kind of content that a styled HTML snippet often contains. A typical HTML-to-JPG of a one-paragraph card weighs 60–150 KB at quality 92, where the same render as PNG would be 400 KB to over a megabyte. JPG also drops onto more services without surprises (some social platforms re-encode PNGs on upload anyway). The trade-off is no transparency and a bit of edge softness on text, which is usually imperceptible at 92%.
Is my HTML uploaded anywhere?
No. html2canvas renders to a hidden canvas inside your browser tab, the canvas is encoded to JPG locally by the browser's built-in encoder, and the file is handed to you as a download. There is no server upload — confirmable in your browser's Network panel. The page makes no network requests once it has loaded, so the converter works offline.

Related tools

HTML to PDF

Convert HTML pages into print-ready PDFs.

SVG to JPG

Convert SVG vector graphics to JPG.

SVG to PNG

Convert SVG files into raster PNG images.

Image Format Converter

Convert images between PNG, JPG, WebP, AVIF, GIF, and BMP.

Image Compressor

Shrink image file size while keeping quality high.

PNG to JPG

Convert PNG images to JPG with a quality control.