Vilket är det bästa sättet att konvertera HTML till PNG 2026?

För serverside: Puppeteer eller Playwright (full Chromium-rendering, perfekt återgivning). För klientside utan server: html2canvas, dom-to-image eller ett verktyg som DuneTools HTML till bild (WebAssembly + foreignObject SVG, körs helt i webbläsaren). För statiska OG-bilder vid byggtid: satori + resvg (används av Next.js, Vercel).

Stöder det modern CSS som Grid och Flexbox?

Ja, moderna HTML-till-bild-verktyg som använder webbläsarens inbyggda renderingsmotor (via foreignObject SVG eller canvas-serialisering) ärver fullt CSS-stöd: Flexbox, Grid, anpassade typsnitt, gradienter, skuggor, filter, animationer (frusna vid fångsttid). Verktyg som omimplementerar CSS (som äldre satori-versioner) har partiellt stöd.

Kan jag konvertera URL:er till bilder, inte bara HTML-strängar?

Ja, men med begränsningar. CORS-begränsade URL:er kan inte laddas direkt till en samma-ursprungs-canvas, webbläsaren blockerar det av säkerhetsskäl. Lösningar: serverside-rendering (Puppeteer hämtar URL:n med full nätverksåtkomst) eller proxa URL:n genom din egen backend med korrekta CORS-headers.

Är det säkert att rendera privat HTML i ett onlineverktyg?

Beror på verktyget. Serverbaserade verktyg (Puppeteer-as-a-service, skärmdump-API:er) kör din HTML på sin server, synligt för operatörer. Klientsideverktyg (DuneTools HTML till bild med WebAssembly + Canvas) renderar helt i din webbläsare, så privata adminpaneler, instrumentpaneler eller känsliga UI:er når aldrig extern infrastruktur.

IMAGE

HTML till bild: en utvecklarguide (2026)

Hur du konverterar HTML, CSS och DOM-noder till PNG/JPG-bilder. Användningsfall, bibliotek, webbläsar-API:er, OG-bildgenerering, vattenstämplar och hur du gör det utan att ladda upp kod till en server.

DuneTools · April 26, 2026 · 10 min read

Att konvertera HTML till en bild, ta godtycklig markup och rendera den som en statisk PNG eller JPG, är en av de operationer som låter enkla och visar sig vara förvånansvärt nyanserade. Webbtypsnitt, CORS, dynamiskt innehåll, moderna CSS-funktioner, transparenta bakgrunder, retina-rendering… var och en lägger till en ny rynka.

Denna guide täcker vad du behöver veta 2026 för att välja rätt approach för ditt användningsfall: från engångs-skärmdumpar till dynamisk Open Graph-bildgenerering i skala.

Användningsfall, när du behöver HTML till bild

1. Dynamiska Open Graph-bilder

Varje blogginlägg, produktsida eller användarprofil får ett unikt socialt kort. Istället för att handdesigna varje en i Figma bygger du en HTML/CSS-mall och renderar till PNG vid byggtid (eller på begäran). Detta är vad Vercels @vercel/og, Cloudflare Workers och DuneTools egna OG-kort per sida (se /og/ på denna sajt) gör under huven.

2. Skärmdumpar av komponenter

Att visa ett diagrambibliotek, en UI-komponent, en admin-instrumentpanel, fånga en specifik DOM-nod låter dig bädda in en ögonblicksbild utan komplex skärmdumpsverktyg. Användbart för dokumentation, marknadsföringssajter, statussidor.

3. E-postvänliga bilder

E-postklienter (särskilt Outlook) har hemskt HTML/CSS-stöd. En dynamisk faktura, ett diagram, en statusmärke, rendera det serverside till PNG och bädda in som <img> för garanterad identisk rendering överallt.

4. Kvitton, fakturor, certifikat

Statisk, icke-redigerbar PDF/PNG-utdata av strukturerade HTML-data. Verktyg som Stripe-kvitton, certifikatgeneratorer, biljettskrivare gör alla detta.

5. Vattenstämpling och signerade bilder

Rendera dynamisk text/kod över en basbild som en enda komposit-PNG, för skydd, attribution eller delning.

6. Kod-till-bild (det moderna alternativet till skärmdumpar)

Verktyg som Carbon, Ray.so, Polacode renderar syntaxmarkerad kod som vackra, varumärkta bilder. Underliggande: HTML/CSS renderad till PNG.

Tillvägagångssätt och avvägningar

A) Serverside: Puppeteer / Playwright

Kör en riktig Chromium-instans på servern, navigera till en URL eller ange HTML-innehåll, ta skärmdump.

Fördelar: pixelperfekt återgivning (det ÄR en riktig webbläsare), full CSS/JS/typsnittsstöd, kan hantera vilken URL som helst med cookies/auth.

Nackdelar: tung (200+ MB Chromium-binär), långsam att starta upp (~1-3 sekunder kallstart), dyr på serverless. Kallstarter på AWS Lambda är ökänt smärtsamma.

Bäst för: lågvolym, högfidelitetsbehov (PDF-rapporter, helsidesskärmdumpar, komplext dynamiskt innehåll).

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 approach)

Rendera JSX/HTML-liknande markup till SVG med satori (en anpassad renderingsmotor), rasterisera sedan till PNG med resvg. Används av @vercel/og, Next.js OG-generering och DuneTools build-og.mjs-skript.

Fördelar: mycket snabb (~50-200 ms), liten beroende (~10 MB), fungerar i Edge-runtimes (Cloudflare Workers, Vercel Edge Functions, AWS Lambda@Edge).

Nackdelar: delmängd av CSS (inget z-index, begränsad Grid, ingen JS-körning). Du designar inom begränsningarna, men de täcker 90 % av OG-bildanvändningsfall.

Bäst för: högvolym OG-bildgenerering, Edge Functions, byggtidsrendering.

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

Rena JavaScript-bibliotek som går igenom DOM, serialiserar det till SVG foreignObject och rasteriserar via HTML5 Canvas. Körs helt i användarens webbläsare.

Fördelar: noll server, gratis, inga CORS-problem för samma-ursprungs-innehåll, omedelbar feedback.

Nackdelar: subtila renderingsskillnader från riktig webbläsare (vissa CSS-funktioner approximeras, webbtypsnittsladdning kräver omsorg), CORS-blockerade externa resurser behöver proxy.

Bäst för: klientsidefångst av komponenter användare tittar på, skärmdump-till-urklipp-funktioner, interna verktyg.

D) DuneTools HTML till bild

En kombination av approach C med WebAssembly-accelererad rendering, designad för enstaka engångs-konverteringar. Klistra in HTML/CSS, få PNG/JPG tillbaka utan att sätta upp infrastruktur eller lära sig ett bibliotek.

Fördelar: noll installation, noll server, fungerar offline efter sidladdning, hanterar modern CSS via webbläsarens faktiska motor.

Nackdelar: inte för högvolymprogrammatisk användning (använd B eller A för det).

Bäst för: utvecklare som behöver enstaka HTML-till-bild-konverteringar utan att starta upp infrastruktur.

Vanliga fallgropar

Webbtypsnittsladdning

Om din HTML använder ett Google Font behöver renderaren typsnittet laddat innan fångsten. Lösningar:

Inline typsnittet som en base64 data-URI i CSS:n (fungerar överallt).
Vänta på document.fonts.ready Promise innan fångst (klientside).
För serverside (Puppeteer): vänta på networkidle0 innan skärmdump.

CORS-begränsade bilder

Bilder från externa domäner taggade crossOrigin="anonymous" kan ritas på canvas. Utan taggen (standard) kastar ritningen “tainted canvas”, din utdata-PNG kan inte exporteras.

Lösning: säkerställ <img crossorigin="anonymous"> och att källservern returnerar Access-Control-Allow-Origin. Dina egna tillgångar fungerar alltid.

Bakgrundsfärg

Genomskinlig PNG-utdata är bra för vissa användningsfall (UI-komponenter, märken) men katastrofal för andra (den sociala förhandsvisningen blir osynlig mot Twitters mörka tema). Sätt alltid uttryckligen bakgrund om inte transparens önskas.

Upplösning / DPI

En 1×1-fångst av en 1200 px bred DOM-nod är 1200×Y, bra för normala skärmar men suddig på retina. Multiplicera med 2 (använd scale: 2 i html2canvas eller 2×bredd i puppeteer) för skarp retina-utdata.

Animation / dynamiskt innehåll

Fångst fryser den aktuella ramen. Om din DOM har laddningssnurror, lat-laddade bilder eller CSS-animationer fångas de mitt i animationen. Lösningar: vänta på att animationer ska sätta sig (setTimeout efter requestAnimationFrame), tvinga sluttillstånd via klass eller pausa animationer programmatiskt innan fångst.

Integritet: när lokalt spelar roll

Serverbaserade skärmdumpstjänster (URL2PNG, Browserless, ScreenshotAPI, etc.) kör din HTML på sin infrastruktur. HTML:en, den renderade bilden, även URL-parametrar kan loggas.

För HTML som innehåller känsligt UI (admin-instrumentpaneler med riktiga data, interna verktyg, kundinformation) är detta en icke-startare. Lösningen är klientsiderendering: HTML stannar i användarens webbläsare, renderas där, lämnar aldrig.

DuneTools HTML till bild gör detta, klistra in din HTML, få PNG, inget loggas någonstans.

Snabbreferens: vilket verktyg för vilket behov

Behov	Verktyg
Engångskonvertering, ingen infrastruktur	DuneTools HTML till bild
Komponentskärmdump i din egen app	html2canvas / dom-to-image
OG-bilder vid byggtid	satori + resvg
Dynamiska OG-bilder vid begäran på Edge	@vercel/og
Serverside högfidelitet (helsidor, PDF:er)	Puppeteer / Playwright
Programmatisk batchkonvertering	satori (klientside) eller Puppeteer (server)

Verkliga exempel

Statiska blogg-OG-bilder: varje inlägg får en unik 1200×630 PNG genererad vid byggtid med satori, med inläggets titel, författare och accentfärg.

SaaS-kvitto-PDF:er: rendera en HTML-fakturamall serverside med Puppeteer, spara som PDF, bifoga till e-post.

Internt skärmdumpsverktyg: utvecklarinstrumentpanel har “Dela tillstånd”-knapp som fångar aktuellt sidtillstånd via html2canvas och laddar upp till S3, för buggrapporter, personal kan klistra in en exakt skärmdump av vilken vy som helst.

Kod-till-bild-generator: kodredigerare + syntaxmarkering, när användaren klickar “Exportera”, kör html2canvas på det renderade kodblocket, ladda ner PNG.

Marknadsföringsautomation: dynamiska annonsbilder för betalda kampanjer, istället för att designa 200 varianter i Figma, bygg en HTML-mall, parametrisera via URL, rendera till PNG vid begäran.

Sammanfattning

HTML till bild är ett löst problem med flera bra verktyg, välj efter användningsfall:

Behöver en engångs-PNG av godtycklig HTML? DuneTools HTML till bild, noll infrastruktur, omedelbar.
Bygger en app som behöver fånga användarinnehåll? html2canvas klientside.
Genererar OG-bilder i skala? satori + resvg, byggtid eller Edge.
Behöver pixelperfekt server-återgivning? Puppeteer.

Integritet spelar roll: för känslig HTML (admin-UI:er, instrumentpaneler, interna verktyg), välj alltid ett klientsidealternativ som inte överför din markup.