HTML ke Gambar

Turn HTML and CSS into a picture - paste code or upload a file, rendered by a real browser engine

100% gratis. Alat ini memerlukan server kami untuk melakukan pekerjaannya, jadi apa yang Anda kirim diproses di sana lalu dibuang - tidak pernah disimpan.

CSS is injected as a <style> tag. Web fonts and external stylesheets load normally. A bare fragment is wrapped in a document for you.

of captures left today.

Jump to the next useful tool without leaving your flow.

See more

Tentang alat ini

Convert HTML and CSS straight into a picture. Paste your markup into the editor - with styles in the CSS box - or upload an .html file, and it is rendered by the same headless Chromium engine that powers a real browser. Your web fonts, flexbox and grid layouts, gradients, shadows and pseudo-elements all come out exactly as a browser paints them, rather than being approximated by a parser. Pick a canvas size from mobile through to a 1200 x 630 social card, capture the visible area or the full document, and download PNG, JPG, WebP or SVG. Nothing needs to be deployed first.

Cara menggunakan alat ini

  1. Add your HTMLPaste markup into the HTML box and styles into the CSS box, or switch to Upload and drop an .html file. A bare fragment is fine - it gets wrapped in a document for you.
  2. Pick a canvas sizeThe width you choose is the viewport your CSS lays out against, so media queries behave exactly as they would in a browser. Use the Social card preset for a precise 1200 x 630 frame.
  3. Render and downloadPress Render to Image, then save as PNG for crisp text, JPG or WebP for a smaller file, or SVG for tools that only accept vectors. Copy puts it straight on your clipboard.

Mengapa menggunakannya

  • A real browser engine renders the markup, so the output matches what a browser would show - not a parser approximation.
  • Web fonts are waited for before the capture, which is the usual reason HTML-to-image output comes back in the wrong typeface.
  • Full CSS support: grid, flexbox, custom properties, gradients, shadows, transforms and pseudo-elements.
  • Real viewport widths, so responsive markup can be checked at mobile, tablet and desktop sizes.
  • Nothing has to be deployed - paste a template and see the finished picture immediately.
  • PNG, JPG, WebP and SVG output at standard or Retina 2x density.

Penggunaan umum

  • Rendering an HTML email template to an image so a client can approve the design.
  • Generating an Open Graph or Twitter card at 1200 x 630 from a small HTML template.
  • Turning an invoice, certificate or receipt template into a shareable picture.
  • Producing a chart or table image from HTML when a screenshot tool is not available.
  • Checking how a component looks at mobile width before committing the CSS.
  • Creating consistent product or pricing graphics from markup rather than a design tool.

Tips untuk hasil lebih baik

  • Use full https:// addresses or data URIs for images - relative paths have no base URL to resolve against.
  • Set an explicit body background; without one the capture has a transparent backdrop in PNG.
  • Turn off Full page if you want a fixed frame at exactly the canvas size you selected.
  • Google Fonts and other external stylesheets load normally, so @import and link tags both work.
  • Reset to sample restores the starting template if an edit goes wrong.
  • For a pixel-exact social card, pick the Social card preset and size your outer element to fill it.

Kesalahan yang harus dihindari

  • Using relative image paths, which have no base URL to resolve against, so nothing loads.
  • Expecting SVG output to be a vector of your layout. Rendered pixels cannot be turned back into shapes; the SVG carries the image inside it.
  • Leaving the sample CSS in place after uploading a styled .html file, which would restyle it - the upload clears the CSS box for that reason.
  • Relying on JavaScript that runs long after load; the capture waits for the network to settle, not for arbitrary timers.
  • Forgetting that a transparent background becomes white when you export as JPG.

Pertanyaan yang sering diajukan

Paste your markup into the HTML box, add any styles in the CSS box, choose a canvas size, then press Render to Image. The markup is rendered by a real headless browser and comes back as PNG, JPG, WebP or SVG.

Yes. Switch to Upload HTML file and drop in any .html file up to 2 MB. Its own embedded styles are used as-is, so the render matches the file exactly.

Yes. Rendering happens in headless Chromium, so grid, flexbox, custom properties, gradients, transforms and pseudo-elements all behave normally. External stylesheets and web fonts load over the network, and the capture waits for fonts to finish before firing.

Almost always because they use relative paths. The markup is rendered without a base URL, so a src of logo.png has nothing to resolve against. Use a full https:// address or inline the image as a data URI.

Yes - choose the Social card preset for a 1200 x 630 viewport, size your outer element to fill it, and turn Full page off so the frame stays exactly that size.

No. The markup is sent to the renderer, drawn in a browser that is closed straight afterwards, and the image is returned to you. Nothing is stored or indexed.

This tool renders markup you supply; Website Screenshot loads a live URL. They share the same renderer and the same options, so pick whichever matches what you already have.

Related guides