How to save an HTML page as a PNG or JPG image

Updated: 2026-10-14 · Dawwerni team

To convert HTML to PNG for free, open the page in Chrome or Edge, press F12, then Ctrl+Shift+P (Cmd+Shift+P on Mac) and run "Capture full size screenshot". In Firefox, right-click the page, choose Take Screenshot, then Save full page. For one image per slide, a 2x render or a JPG, use a script such as Puppeteer or a free in-browser converter.

Four ways to turn HTML into an image

You might need a picture of a web page for a report, a social post, a design review or a thumbnail. If you already have the page open in a browser, the built-in tools are enough for a single full-page PNG. If you need several images, one per slide, or JPG files, the other options save time.

• Chrome or Edge DevTools: a full-page PNG in a few keystrokes, nothing to install.
• Firefox screenshots: built into the right-click menu, full page or visible area.
• Puppeteer (Node.js): scripted screenshots, 2x scale, JPG quality, one image per element.
• Our free HTML to image converter: drop an .html file, a .zip or pasted code and download PNG or JPG, full page or one image per slide, without uploading anything.

Chrome and Edge: Capture full size screenshot

Chromium-based browsers hide a very good screenshot command in DevTools. It renders the whole page, not just the visible part, and saves a PNG to your downloads folder.

1. Open the HTML file in Chrome or Edge (drag it onto a browser window, or use Ctrl+O).
2. Press F12 (or Ctrl+Shift+I, Cmd+Option+I on Mac) to open DevTools.
3. Press Ctrl+Shift+P (Cmd+Shift+P on Mac) to open the command menu.
4. Type screenshot and choose Capture full size screenshot.
5. The PNG is saved to your downloads folder.

Useful variants

• Capture node screenshot: select an element in the Elements panel, right-click it and choose Capture node screenshot to save only that card, chart or slide.
• Capture screenshot (without "full size") saves only the visible area.
• To control the page width, open the device toolbar (Ctrl+Shift+M), choose Responsive and type a width such as 1280 before capturing.

Firefox: Take Screenshot

1. Open the page in Firefox.
2. Right-click an empty area of the page and choose Take Screenshot (or press Ctrl+Shift+S, Cmd+Shift+S on Mac).
3. Click Save full page, or Save visible for the current view. You can also click an element on the page to capture just that block.
4. Click Download to save a PNG, or Copy to paste it straight into a document or chat.

Both browsers capture what is on screen, so wait until fonts, images and charts have finished loading. Very tall pages can run into browser limits on image size, and scroll-triggered content that has not been revealed yet will be blank: scroll to the bottom and back up before capturing. If the page still looks wrong, most of the causes are the same as for PDFs, covered in the guide to HTML exports that look broken.

PNG or JPG: which format to choose

Web pages are mostly text, flat colours and sharp edges, which is exactly what PNG is good at. JPG makes sense when the page is dominated by photos or when file size matters more than perfect text edges.

• Long full-page captures can get heavy as PNG; a JPG at quality 85 is often a fraction of the size.
• If the image will be edited or re-saved later, keep a PNG master and export JPG copies from it.

Sharper images: render at 2x

A 1280 px wide page captured at 1x gives a 1280 px wide image, which looks soft on high-density (retina) screens and when someone zooms in. Rendering at a device pixel ratio of 2 produces a 2560 px image of the same layout, with twice the detail in each direction. The layout does not change; only the pixel density does.

In Chrome DevTools, the device toolbar can emulate a device pixel ratio: open its options menu, enable Add device pixel ratio, set DPR to 2, then run Capture full size screenshot. In a script, set deviceScaleFactor. This Puppeteer example saves a 2x PNG and a JPG of the full page:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();
const page = await browser.newPage();

// 1280 CSS px wide, rendered at 2x for sharp text (2560 px wide image)
await page.setViewport({ width: 1280, height: 800, deviceScaleFactor: 2 });
await page.goto('file:///C:/work/report.html', { waitUntil: 'networkidle0' });

await page.screenshot({ path: 'report.png', fullPage: true });
await page.screenshot({ path: 'report.jpg', type: 'jpeg', quality: 85, fullPage: true });

await browser.close();

• waitUntil: networkidle0 waits until the network is quiet, which helps with web fonts and CDN scripts.
• A 2x image has four times as many pixels, so expect files roughly three to four times larger.
• Very tall pages at 2x can hit image size limits; split them into sections or slides.

One image per slide for social media

Carousels and slide-style posts are easiest to build as HTML with one fixed-size element per image. Pick the size of the target format and set it in CSS pixels: 1080x1080 for a square Instagram post, 1080x1350 for a 4:5 portrait post, 1200x630 for a typical link preview image, or 1920x1080 for 16:9 slides.

/* One Instagram portrait post (4:5) per element */
.slide {
  width: 1080px;
  height: 1350px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 96px;
}
.slide h2 { font-size: 88px; line-height: 1.1; }
.slide p { font-size: 40px; line-height: 1.4; }

Exporting each slide

With Puppeteer, grab every .slide element and screenshot it on its own. Without code, the HTML to image tool detects .slide elements, reveal.js decks, 16:9 sections and CSS page breaks, and gives you one image per slide or page, downloaded together as a ZIP.

const slides = await page.$$('.slide');
for (let i = 0; i < slides.length; i++) {
  await slides[i].screenshot({ path: 'slide-' + (i + 1) + '.png' });
}

Design tips for slide images

• Use px for every size inside the slide, not vw or vh, so the image does not depend on the window.
• Keep text large: an image is often viewed on a phone, scaled down to a third of its width.
• Make the visible state the default for any animation, so nothing is captured mid-fade.
• The same rules apply to decks; see how to build HTML slides that survive conversion.

Using the free HTML to image converter

1. Open the HTML to PNG and JPG converter.
2. Drop one or more .html files, paste HTML code, or drop a .zip containing the HTML with its images, CSS, scripts and fonts (relative paths are resolved inside the zip).
3. Choose PNG or JPG, then full page (one tall image) or one image per slide or page.
4. If the page uses the Tailwind CDN or animated charts, add a few seconds of wait before capture.
5. Download the image, or the ZIP when there are several.

Everything runs in your browser: the file is never uploaded, there is no sign-up and no watermark. The page runs in a sandboxed frame with no access to the site, your cookies or storage. Before capture, the converter waits for fonts and images, freezes CSS animations at their end state, scrolls through the page to reveal scroll-triggered content and load lazy images, shows fixed headers once and keeps dark backgrounds. Each of these fixes can be switched off.

Limits to know before you rely on it

• Images hosted on other websites that do not send CORS headers can be missing, because the page is redrawn on a canvas. Put the images in the .zip instead.
• WebGL scenes and video frames may come out blank.
• Very long pages are split rather than saved as one gigantic image.
• Content behind a login, or loaded from APIs that block the page, will not appear.
• External resources such as Google Fonts or the Tailwind CDN are fetched by your own browser, exactly as when you open the file.

If you need a document rather than a picture, a PDF made with the browser print engine keeps the text selectable: see the three free ways to convert HTML to PDF. For a whole AI-generated page in several formats at once, there is also the AI HTML converter.