Converter HTML para imagem
Com esta ferramenta você pode converter HTML para imagem: cole o código, escolha uma largura, clique em “Criar imagem” e baixe um PNG, JPG ou WebP. A imagem é criada no seu navegador: seu código não é enviado, não é salvo e não aparece no endereço da página.
Fonte: W3C SVG 2 – foreignObject (HTML-Inhalt in SVG einbetten). Atualizado em: .
Como o cálculo é feito
Como o HTML vira imagem
O navegador desenha o código HTML como um gráfico: primeiro ele é limpo, depois renderizado como SVG com HTML incorporado (foreignObject) e pintado em um canvas que é salvo como PNG, JPG ou WebP. Isso funciona para cartões, citações, tabelas, trechos de nota, blocos de e-mail ou imagens para redes sociais – tudo o que dá para desenhar com HTML e CSS.
O que é aceito
- HTML e CSS: estilos inline e um bloco
<style>, flexbox, grid, gradientes, sombras, cantos arredondados, tabelas. - Imagens: só incorporadas como endereço Base64 (
data:image/png;base64,…) ou como SVG inline. Imagem para Base64 transforma um arquivo de imagem no endereço certo. - Fontes: as instaladas no seu aparelho e a fonte do sistema. Fontes web carregadas da internet (Google Fonts) não são buscadas.
O que não funciona
Scripts não rodam, imagens, fontes e folhas de estilo de outros endereços não são carregadas, e animações, efeitos de hover, iframe, canvas e video não geram imagem. Essas partes são removidas na limpeza; um aviso abaixo do resultado informa. A aparência pode diferir um pouco de uma página real, porque o navegador desenha só o seu trecho.
Tamanho, nitidez e formato
- Largura e altura: com “0” a altura acompanha o conteúdo.
- Resolução: 2× dá o dobro de pixels e fica nítida em celulares e telas Retina. Em imagens muito grandes a resolução é limitada automaticamente.
- Formato: PNG para texto e gráficos de bordas nítidas com transparência, JPG para arquivos pequenos (sempre com fundo), WebP como meio-termo moderno.
Privacidade e segurança
Seu código é processado só no seu navegador e não é salvo em lugar nenhum. Scripts, atributos de evento como onclick e endereços externos são removidos antes de desenhar. Se você quer pôr texto em uma foto existente, use escrever na foto.
Perguntas frequentes
Como converter HTML para imagem?
Cole o código HTML, escolha largura e resolução e clique em “Criar imagem”. Depois baixe a imagem como PNG, JPG ou WebP.
Por que minhas imagens não aparecem?
Imagens de outros endereços (https://…) não são carregadas por segurança. Incorpore-as como endereço Base64 (data:image/…) ou use SVG inline.
Meu código é enviado para algum servidor?
Não. O código é lido no seu navegador e desenhado como imagem ali mesmo. Não é enviado nem salvo.
Como obter fundo transparente?
Escolha o fundo “Transparente” e o formato PNG ou WebP. O JPG não tem transparência e sempre recebe fundo branco.
Por que a imagem fica borrada?
Aumente a resolução para 2× ou 3×: a imagem terá o dobro ou o triplo de pixels no mesmo tamanho de exibição.
As Google Fonts funcionam?
Não, fontes web carregadas da internet não são buscadas. Use fontes do sistema como Arial, Georgia ou Verdana, ou fontes instaladas no seu aparelho.
Fontes e base legal
- W3C SVG 2 – foreignObject (HTML-Inhalt in SVG einbetten)
- W3C SVG 2 – SVG als Bild: keine Skripte, keine externen Ressourcen („secure static mode“)
- MDN – HTMLCanvasElement.toBlob() (PNG, JPEG, WebP; Qualitätsparameter)
Última atualização: · Princípios editoriais
Ferramentas relacionadas
- Escrever na fotoColoque texto em fotos com 8 fontes, contorno, sombra ou tarja de fundo. Arraste, gire e salve em resolução total – grátis, sem cadastro e sem upload.
- Converter imagem para Base64Converta imagem para Base64: copie Data URL, tag img HTML, fundo CSS, Markdown ou JSON, reduza a imagem antes – e transforme Base64 de volta em imagem.
- Markdown para HTML: pré-visualização, código HTML e downloadMarkdown para HTML com pré-visualização ao vivo: títulos, listas, tabelas e código conforme o CommonMark. Código HTML limpo para copiar, seguro e sem scripts.
- Dividir imagem em partesDividir imagem em partes iguais (2, 3, 4, 9…), em blocos de tamanho fixo ou em pôster para imprimir em várias folhas A4 ou A3 – grátis, direto no navegador.
- Minificar CSS: reduzir, formatar e embutir o CSS no HTMLMinificar CSS e formatá-lo, além de embutir o CSS no HTML para e-mails: transformações seguras, erros com número da linha, no navegador e sem enviar nada.
- Gerador de QR Code grátis – também para PixGerador de QR Code grátis: QR Code Pix, Wi-Fi, link, contato (vCard), e-mail ou telefone. Escolha as cores e baixe em PNG ou SVG. Não expira, sem cadastro.
- Cortar e comprimir vídeo em uma única etapaCortar e comprimir vídeo de uma vez: escolha um trecho, deixe com 8 a 50 MB e, se quiser, transforme também em GIF. No navegador, sem enviar o vídeo.
- Embutir legenda no vídeo: grave um SRT ou VTT na imagemEmbutir legenda no vídeo: grave um SRT ou WebVTT na imagem, com tamanho, cor e posição. No navegador, sem enviar nada e sem marca d’água.
- Alterar velocidade do áudioAlterar velocidade do áudio: acelere ou desacelere MP3, WAV ou o som de um vídeo, com ou sem mudar o tom, e ajuste o volume. No navegador, sem envio, grátis.