IMAGE

HTML til bilde: en utviklerguide (2026)

Hvordan du konverterer HTML, CSS og DOM-noder til PNG/JPG-bilder. Bruksområder, biblioteker, nettleser-API-er, OG-bildegenerering, vannmerker og hvordan du gjør det uten å laste opp kode til en server.

DuneTools · · 10 min read

Å konvertere HTML til et bilde, ta vilkårlig markup og rendre det som en statisk PNG eller JPG, er en av de operasjonene som høres enkle ut og viser seg å være overraskende nyanserte. Webskrifttyper, CORS, dynamisk innhold, moderne CSS-funksjoner, gjennomsiktige bakgrunner, retina-rendering… hver legger til en ny rynke.

Denne guiden dekker hva du trenger å vite i 2026 for å velge riktig tilnærming for bruksområdet ditt: fra engangs-skjermbilder til dynamisk Open Graph-bildegenerering i skala.

Bruksområder, når du trenger HTML til bilde

1. Dynamiske Open Graph-bilder

Hvert blogginnlegg, produktside eller brukerprofil får et unikt sosialt kort. I stedet for å håndtegne hver i Figma bygger du en HTML/CSS-mal og rendrer til PNG ved byggtid (eller på forespørsel). Dette er hva Vercels @vercel/og, Cloudflare Workers og DuneTools egne OG-kort per side (se /og/ på denne siden) gjør under panseret.

2. Skjermbilder av komponenter

Å vise et diagrambibliotek, en UI-komponent, et admin-dashboard, fang en spesifikk DOM-node lar deg bygge inn et øyeblikksbilde uten kompleks skjermbildeverktøy. Nyttig for dokumentasjon, markedsføringssider, statussider.

3. E-postvennlige bilder

E-postklienter (særlig Outlook) har fryktelig HTML/CSS-støtte. En dynamisk faktura, et diagram, et statusmerke, render det serverside til PNG og bygg inn som <img> for garantert identisk rendering overalt.

4. Kvitteringer, fakturaer, sertifikater

Statisk, ikke-redigerbar PDF/PNG-utdata av strukturerte HTML-data. Verktøy som Stripe-kvitteringer, sertifikatgeneratorer, billettskrivere gjør alle dette.

5. Vannmerking og signerte bilder

Render dynamisk tekst/kode over et basebilde som en enkelt komposit-PNG, for beskyttelse, attribusjon eller deling.

6. Kode-til-bilde (det moderne alternativet til skjermbilder)

Verktøy som Carbon, Ray.so, Polacode rendrer syntaksuthevet kode som vakre, merkede bilder. Underliggende: HTML/CSS rendret til PNG.

Tilnærminger og avveininger

A) Serverside: Puppeteer / Playwright

Kjør en ekte Chromium-instans på serveren, naviger til en URL eller angi HTML-innhold, ta skjermbilde.

Fordeler: pikselperfekt gjengivelse (det ER en ekte nettleser), full CSS/JS/skrifttypestøtte, kan håndtere hvilken som helst URL med cookies/auth.

Ulemper: tung (200+ MB Chromium-binær), treg å starte opp (~1-3 sekunder kaldstart), dyr på serverless. Kaldstarter på AWS Lambda er beryktet smertefulle.

Best for: lavvolum, høyfidelitetsbehov (PDF-rapporter, fullsides skjermbilder, komplekst dynamisk innhold).

import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(htmlString);
const buffer = await page.screenshot({ type: 'png' });
await browser.close();

B) satori + resvg (Vercels tilnærming)

Render JSX/HTML-lignende markup til SVG med satori (en tilpasset renderingsmotor), rasteriser deretter til PNG med resvg. Brukes av @vercel/og, Next.js OG-generering og DuneTools build-og.mjs-skript.

Fordeler: svært rask (~50-200 ms), liten avhengighet (~10 MB), fungerer i Edge-runtimes (Cloudflare Workers, Vercel Edge Functions, AWS Lambda@Edge).

Ulemper: delsett av CSS (ingen z-index, begrenset Grid, ingen JS-kjøring). Du designer innenfor begrensningene, men de dekker 90 % av OG-bildebruksområder.

Best for: høyvolum OG-bildegenerering, Edge Functions, byggtidsrendering.

C) html2canvas / dom-to-image (klientside)

Rene JavaScript-biblioteker som går gjennom DOM, serialiserer det til SVG foreignObject og rasteriserer via HTML5 Canvas. Kjører helt i brukerens nettleser.

Fordeler: null server, gratis, ingen CORS-problemer for samme-opprinnelses-innhold, umiddelbar tilbakemelding.

Ulemper: subtile renderingsforskjeller fra ekte nettleser (noen CSS-funksjoner approximeres, webskrifttyplasting krever omsorg), CORS-blokkerte eksterne ressurser trenger proxy.

Best for: klientside-fangst av komponenter brukere ser på, skjermbilde-til-utklippstavle-funksjoner, interne verktøy.

D) DuneTools HTML til bilde

En kombinasjon av tilnærming C med WebAssembly-akselerert rendering, designet for enkeltstående engangs-konverteringer. Lim inn HTML/CSS, få PNG/JPG tilbake uten å sette opp infrastruktur eller lære et bibliotek.

Fordeler: null installasjon, null server, fungerer offline etter sidelasting, håndterer moderne CSS via nettleserens faktiske motor.

Ulemper: ikke for høyvolum programmatisk bruk (bruk B eller A for det).

Best for: utviklere som trenger enkeltstående HTML-til-bilde-konverteringer uten å starte opp infrastruktur.

Vanlige fallgruver

Webskrifttyplasting

Hvis HTML-en din bruker en Google Font trenger rendreren skrifttypen lastet før fangsten. Løsninger:

  • Inline skrifttypen som en base64 data-URI i CSS-en (fungerer overalt).
  • Vent på document.fonts.ready Promise før fangst (klientside).
  • For serverside (Puppeteer): vent på networkidle0 før skjermbilde.

CORS-begrensede bilder

Bilder fra eksterne domener tagget crossOrigin="anonymous" kan tegnes på canvas. Uten taggen (standard) kaster tegningen “tainted canvas”, utdata-PNG-en din kan ikke eksporteres.

Løsning: sørg for <img crossorigin="anonymous"> og at kildeserveren returnerer Access-Control-Allow-Origin. Dine egne ressurser fungerer alltid.

Bakgrunnsfarge

Gjennomsiktig PNG-utdata er bra for noen bruksområder (UI-komponenter, merker), men katastrofalt for andre (den sosiale forhåndsvisningen blir usynlig mot Twitters mørke tema). Sett alltid uttrykkelig bakgrunn med mindre transparens er ønsket.

Oppløsning / DPI

En 1×1-fangst av en 1200 px bred DOM-node er 1200×Y, bra for normale skjermer, men uskarpt på retina. Multipliser med 2 (bruk scale: 2 i html2canvas eller 2×bredde i puppeteer) for skarp retina-utdata.

Animasjon / dynamisk innhold

Fangst fryser den nåværende rammen. Hvis DOM-en din har lastespinnere, lat-lastede bilder eller CSS-animasjoner fanges de midt i animasjonen. Løsninger: vent på at animasjoner skal sette seg (setTimeout etter requestAnimationFrame), tving slutttilstand via klasse eller pause animasjoner programmatisk før fangst.

Personvern: når lokalt betyr noe

Serverbaserte skjermbildetjenester (URL2PNG, Browserless, ScreenshotAPI, etc.) kjører HTML-en din på infrastrukturen sin. HTML-en, det rendrede bildet, til og med URL-parametere kan logges.

For HTML som inneholder sensitivt UI (admin-dashboards med ekte data, interne verktøy, kundeinformasjon) er dette en non-starter. Løsningen er klientside-rendering: HTML blir i brukerens nettleser, rendres der, forlater aldri.

DuneTools HTML til bilde gjør dette, lim inn HTML-en din, få PNG, ingenting logges noe sted.

Hurtigreferanse: hvilket verktøy for hvilket behov

BehovVerktøy
Engangskonvertering, ingen infrastrukturDuneTools HTML til bilde
Komponentskjermbilde i din egen apphtml2canvas / dom-to-image
OG-bilder ved byggtidsatori + resvg
Dynamiske OG-bilder ved forespørsel på Edge@vercel/og
Serverside høyfidelitet (fullsider, PDF-er)Puppeteer / Playwright
Programmatisk batchkonverteringsatori (klientside) eller Puppeteer (server)

Reelle eksempler

Statiske blogg-OG-bilder: hvert innlegg får et unikt 1200×630 PNG generert ved byggtid med satori, med innleggets tittel, forfatter og aksentfarge.

SaaS-kvittering-PDF-er: render en HTML-fakturamal serverside med Puppeteer, lagre som PDF, vedlegg til e-post.

Internt skjermbildeverktøy: utviklerdashboard har “Del tilstand”-knapp som fanger nåværende sidetilstand via html2canvas og laster opp til S3, for feilrapporter, personell kan lime inn et eksakt skjermbilde av hvilken som helst visning.

Kode-til-bilde-generator: kodeditor + syntaksutheving, når brukeren klikker “Eksporter”, kjør html2canvas på det rendrede kodeblokket, last ned PNG.

Markedsføringsautomasjon: dynamiske annonsebilder for betalte kampanjer, i stedet for å designe 200 varianter i Figma, bygg en HTML-mal, parametriser via URL, render til PNG ved forespørsel.

Oppsummering

HTML til bilde er et løst problem med flere gode verktøy, velg etter bruksområde:

  • Trenger en engangs-PNG av vilkårlig HTML? DuneTools HTML til bilde, null infrastruktur, umiddelbar.
  • Bygger en app som trenger å fange brukerinnhold? html2canvas klientside.
  • Genererer OG-bilder i skala? satori + resvg, byggtid eller Edge.
  • Trenger pikselperfekt server-gjengivelse? Puppeteer.

Personvern betyr noe: for sensitiv HTML (admin-UI-er, dashboards, interne verktøy), velg alltid et klientside-alternativ som ikke overfører markup-en din.