How to use it
- Paste your HTML and CSS into the editor.
- Set the output width and height in pixels.
- Pick a scale if you need a larger image.
- Click Export JPEG to download a .jpg file.
When to choose JPEG over PNG
JPEG files are much smaller than PNG for photographic or gradient-heavy designs, which makes them a good fit for blog images, previews and anything you need to email or upload quickly.
JPEG has no transparency, so this converter fills the background with white. If you need transparent areas, use the HTML to PNG converter instead.
Frequently asked questions
Why is the background white?
JPEG cannot store transparency, so transparent areas are filled with white. Set your own background color in CSS to use a different one.
What JPEG quality is used?
Exports use a high quality setting of about 92%, a good balance between file size and visual fidelity.
Is my code uploaded to a server?
No. The conversion runs entirely in your browser using the Canvas, Web Animations and MediaRecorder APIs. Your HTML, CSS and images never leave your device.
Why are some external images blank in my export?
Browsers block canvas export when an image comes from another website that does not allow cross-origin access (a "tainted canvas"). Embed the image as a Base64 data URL, or host it on a server that sends CORS headers, and it will render.