Skip to the tool

HTML to image: turn any webpage or code into a sharp picture

Paste a URL or HTML code, pick a screen size and sharpness, and download a JPG, PNG, WebP or PDF of the page.

Public pages only — pages behind a login can’t be captured

How to convert HTML to image in four steps

  1. Enter a URL or paste HTML code

    Type the web address of a public page, or switch to code mode and paste your HTML and CSS. Code mode shows a live preview while you type.

  2. Pick a screen and sharpness

    Choose Desktop 1440, Laptop 1280, iPad 820, iPhone 390, Android 412 or a custom size, then set sharpness to 1×, 2× retina or 3×.

  3. Choose what to capture

    Capture the full page, only the visible screen, or one element by CSS selector. Turn on dark mode, hide cookie banners or add a wait of up to 8 seconds if you need them.

  4. Download JPG, PNG, WebP or PDF

    Pick the output format and download your image. Transparent background is available in HTML mode for PNG and WebP.

Convert HTML to image online, free and without an extension

This html to image tool gives you two ways in. Paste a link and it works as a webpage to image and url to image capture, or paste code and it renders your markup into a picture. Either way, you get a clean file to share, print or attach.

It is an html to image online free service that runs on our server, so you do not need to install anything. That makes it a handy screenshot tool without extension: it works the same in Chrome, Safari, Edge or Firefox, on a phone or a laptop.

What you can make with it

  • A full page screenshot of a long article or landing page, top to bottom.
  • A crisp picture of a snippet of HTML, such as a banner, table or card.
  • A PDF of a public page for records or printing.
  • A phone-sized or tablet-sized view of a site from your desktop.

Who uses a website screenshot tool

Designers use a website screenshot tool for portfolios and client decks. Students and job seekers use it to keep a copy of a result page or an application form. Developers use it to turn a component into an image for docs, issues or social posts.

If you only need a quick picture, open the page, paste the link and download. If you need control, every option on this page is explained below.

URL to image: take website screenshot of any public page

Paste an address and the url to image converter loads that page in a real browser on our server, then takes the picture. This is the quickest way to screenshot any website that anyone can open without a password.

Screenshot website by URL in seconds

To screenshot website by url, copy the link from your address bar, paste it into the box and press capture. The url screenshot appears in the preview, and you can change settings and capture again as often as you like.

Public pages only

The capture browser does not log in anywhere. So a page behind a login, such as your email inbox, bank account or a dashboard, cannot be captured by link. For those pages, see the tips in the FAQ on saving a copy from your own browser.

Convert link to image for chats and reports

Sometimes you want to convert link to image because a link can change or break later. A picture keeps exactly what the page showed on that day. It is useful when you need to screenshot web page for report work, for a teacher or for a client update.

You can also save webpage as image before sharing on WhatsApp, where a picture is often easier to read than a link preview.

HTML code to image: paste HTML and CSS, get a picture

Switch to code mode to turn html code to image. Paste HTML with inline or embedded CSS and a live preview updates as you type. When it looks right, capture it.

An html css to image converter for small designs

As an html css to image converter, code mode suits anything you can build in a single file. Common examples:

  • An html banner to image for a website header or ad.
  • An html certificate to image for a course, event or quiz.
  • An html table to image for a report or a WhatsApp group.
  • An html email template to image to show a client how a mailer will look.
  • An html invoice to jpg for record keeping.

Transparent png from html

In HTML mode you can switch on a transparent background. Leave the page background unset in your CSS, choose PNG or WebP, and you get a transparent png from html that sits cleanly on any slide or design. This is the easiest route for html to transparent png logos, badges and stickers.

Open graph image from html

Build a 1200 × 630 card in HTML, set a custom screen size to match, and capture it. You now have an open graph image from html, or a social media preview image from html, without opening a design app. The same trick makes a website preview image for a link list or portfolio.

Full page screenshot online: capture the whole page, not just the screen

A normal screenshot only catches what fits on your screen. A full page screenshot online scrolls through the whole page and saves it as one tall image. That is what people mean by a long screenshot of website pages or a whole page screenshot.

Three capture areas

Capture areaWhat you getBest for
Full pageThe entire page, top to bottomArticles, landing pages, archives
Visible screenOnly the first screen, like a browser windowHero shots, thumbnails, mockups
One elementA single part picked by CSS selectorCharts, tables, cards, forms

Capture entire webpage as image without scrolling

You do not scroll and stitch by hand. Choose full page and the tool will capture entire webpage as image in one go, so a full page website screenshot or a scrolling screenshot of website online takes one click.

Screenshot of specific element

Need only the price table or a chart? Enter a CSS selector such as #pricing or .chart. A css selector screenshot lets you capture element as image with nothing else around it, which is also how you convert html div to image.

Pick the screen: desktop, laptop, iPad, iPhone, Android or custom

Websites change layout by screen width, so the screen you pick decides what the picture looks like. Here are the built-in presets:

PresetWidthUse it for
Desktop1440 pxWide monitor layouts and portfolios
Laptop1280 pxTypical laptop view
iPad820 pxTablet layouts
iPhone390 pxiPhone phone layout
Android412 pxAndroid phone layout
CustomYour choiceExact banner or card sizes

Mobile view screenshot of website

Pick iPhone or Android to get a mobile view screenshot of website pages straight from a desktop computer. It is the easy way to show an iphone view of website layouts in a client review.

Desktop view screenshot on mobile

It works the other way too. On a phone, pick Desktop 1440 and you get a desktop view screenshot on mobile, with the full wide layout. Choose iPad 820 for an ipad view screenshot.

Custom viewport width screenshot

For a custom viewport width screenshot, enter your own width and height. Showing all desktop tablet mobile screenshot sizes side by side in a deck is a quick way to prove a site is responsive.

Sharpness, formats and a high quality website screenshot

Sharpness sets how many image pixels are used per screen pixel. 1× matches the screen. 2× is a retina screenshot with twice the width and height. 3× is sharper again, like a modern phone screen.

Retina 2x website screenshot or 3x screenshot?

A retina 2x website screenshot is the right choice for slides, portfolios and print, and it is what most people mean by a high quality website screenshot. Use a 3x screenshot for zooming into small text or for large prints. Higher sharpness makes bigger files, so use 1× for quick sharing.

Choose JPG, PNG, WebP or PDF

OutputStrengthPick it when
JPGSmall files for photo-heavy pagesSharing on chat apps and email
PNGLossless, sharp text, transparency in HTML modeText, UI, logos, docs
WebPSmall files, transparency in HTML modeUsing the image on a website
PDFA document you can print or attachRecords, forms, receipts

HTML to PNG, HTML to JPG and HTML to WebP

For text-heavy pages, html to png keeps letters crisp. For photo-heavy pages, html to jpg keeps the file small. html to webp is a good middle ground when the image will go on a site. If you later need a smaller JPG, run the PNG through our PNG to JPG converter.

URL to PDF

Choose PDF to use it as a url to pdf or website to pdf tool. It is a simple way to save website as pdf for an application record. Want to join several screenshots into one document instead? Use image to PDF.

Clean captures: dark mode, cookie banners and wait time

Pages often look messy in a screenshot. These options help you get a clean picture without editing afterwards.

Screenshot website without cookie banner

Turn on the option to hide cookie banner pop-ups and consent boxes. They are hidden from view, never clicked, so no choice is made on your behalf. This is the fastest way to screenshot website without cookie banner clutter.

Dark mode website screenshot

Many sites follow the viewer's theme. Turn on dark mode and sites that support it will show their dark design, giving you a dark mode website screenshot that matches a dark slide deck. Sites without a dark theme will look the same as normal.

Wait before screenshot

Some pages fade in, load fonts late or show charts after a moment. Set a website screenshot delay from 0 to 8 seconds so the page settles first. A short wait before screenshot also helps with lazy loading images screenshot problems, where pictures lower down appear as blank boxes.

Adverts and pop-ups

The tool does not remove adverts, so a screenshot without ads is not guaranteed. Capture one element by CSS selector to leave ads out, or trim the result with our crop image tool.

Real uses: exam results, tickets, portfolios and reports

Here is how people put a website screenshot to work, with a few numbers that matter.

Save exam result web page as JPG

Result pages are often taken down later. To save exam result web page as jpg, paste the result link if it is public, pick full page and choose JPG. If a form asks for an upload under a limit such as 100 KB or 200 KB, shrink it with our image compressor.

Save IRCTC ticket page as image

Ticket and booking pages usually need a login, so they cannot be captured by link. To save irctc ticket page as image, open it in your own browser and use your device's screenshot. For public confirmation pages, the link method works fine. The same advice applies when you save online receipt page as image or convert online application form page to image.

Website mockup screenshot and landing page screenshot

A website mockup screenshot at Desktop 1440 and 2× looks sharp inside a laptop frame. For a screenshot for portfolio website mockup, capture a landing page screenshot of the first screen and a phone view to place side by side. That makes it easy to capture webpage for client presentation slides.

Archive web page as image

Pages change. To archive web page as image, capture the full page in PNG so small text stays sharp. If personal details, faces or number plates appear, hide them with blur face before you share.

Website thumbnail generator

Capture the visible screen at 1×, then use it as a website thumbnail generator for a link list or blog. Resize it to an exact size with resize image.

HTML to image on iPhone, Android, Windows and Mac

Because the capture runs on our server, the steps are the same on every device. Only the built-in alternatives differ.

Website screenshot on iPhone

For a website screenshot on iphone, paste the link here in Safari and download. Safari itself offers a full page screenshot on iphone safari through the Full Page tab after you take a screenshot, which saves a PDF. This tool also gives you JPG or PNG and phone or desktop views, which is useful for html to image on iphone.

Website screenshot on Android

Many Android phones have a scroll-capture button after a screenshot, which is one way to take a full page screenshot on android. It does not always work on long pages. For a website screenshot on android that captures every section, or a webpage to image on android at desktop width, use the link method here.

HTML to image on Windows and Mac

Chrome hides a full page screenshot in chrome command inside its developer tools, and Windows 11 or macOS screenshot keys only grab the screen. So a full page screenshot in windows 11 or a full page screenshot on mac is easiest here. For html to image on windows or html to image on mac, open a local .html file in a text editor, copy the code and paste it into code mode.

Troubleshooting a webpage screenshot online

Most problems with a webpage screenshot online have simple fixes.

Why does my screenshot look different from the live page?

Pages may show different content by screen size, country or theme. Match the screen preset to the view you want, turn dark mode on or off, and add a wait if parts load late.

Blank areas or missing pictures

Add a wait of 3 to 8 seconds. Pages that load images only as you scroll may still leave gaps; capturing the specific element often helps.

File too big to upload

Use 1× sharpness, choose JPG or WebP, or capture the visible screen instead of the full page. Then run it through compress image to reach a KB limit.

Can I convert HTML to SVG?

People often ask can i convert html to svg. This tool makes raster images and PDF, not SVG. For sharp results at any size, pick PNG at 3× sharpness instead of looking for html to svg.

HTML to Image: questions and answers

How do I convert HTML to an image online?

Paste a URL or your HTML code, pick a screen size and sharpness, choose full page, visible screen or one element, then download JPG, PNG, WebP or PDF. That is how to convert html to image in under a minute.

Is this html to image converter free?

Yes. The html to image converter is free to use in your browser, with no app to install. It is an html to image free tool that works on phones and computers.

How do I take a full page screenshot of a website?

Paste the link, choose Full page and download. That answers how to take a full page screenshot of a website without scrolling and stitching by hand, and how to screenshot an entire web page without scrolling.

How do I save a webpage as a JPG?

Paste the page link, choose JPG as the output and download. That is how to save a webpage as a jpg, and it also works as a website to jpg or url to jpg converter.

How do I convert a URL to PNG?

Paste the address, choose PNG and capture. This is how to convert a url to png; PNG keeps small text sharp, so it suits a web page to png capture of articles and docs.

Can I paste HTML code instead of a link?

Yes. Switch to code mode, paste your HTML and CSS, check the live preview, then capture. It works as an html to png online or html to jpg online renderer for single-file designs.

Can I capture pages that need a login?

No. The capture browser only opens public pages. For pages behind a login, take a screenshot in your own browser instead.

Does it add a watermark?

No watermark is added to your picture, so you get a website screenshot without watermark marks and an html to image without watermark branding.

Can I get a transparent background?

Yes, in HTML mode with PNG or WebP output. Leave your page background unset in CSS to get a clean transparent image.

Can I save a web page as PDF?

Yes. Choose PDF as the output to save a public page as a document, which makes this a webpage to pdf online option.

What screen sizes can I choose?

Desktop 1440, Laptop 1280, iPad 820, iPhone 390, Android 412, or a custom size you enter.

Will cookie pop-ups show in my screenshot?

Turn on the hide option and cookie and consent banners are hidden from view. They are never clicked, so no consent is given for you.

Why are some images missing in my screenshot?

Some pages load pictures late. Add a wait of up to 8 seconds before capture, or capture a single element with a CSS selector.

Can I capture several URLs at once?

Capture pages one at a time. Change the link and capture again for each page you need.

See all 14 image tools →