Conversor de HTML para PNG
Transforme código HTML em uma imagem PNG para download. Cole o marcado ou envie um arquivo, visualize e exporte uma captura nítida instantaneamente — tudo no seu navegador.
100% Processamento no Lado do Cliente
Seu HTML é renderizado e convertido inteiramente no seu navegador. Nada é enviado para um servidor.
Pré-visualização
Por segurança, as tags <script> são desativadas na pré-visualização e na exportação. Estilos (CSS) e imagens são renderizados normalmente.
Índice
O que é um conversor de HTML para PNG?
Um conversor de HTML para PNG pega marcado HTML e CSS e o renderiza como uma única imagem raster, pronta para baixar, incorporar ou compartilhar — como tirar uma captura de tela do código sem abrir uma aba de navegador real.
É útil para transformar cartões, banners, prévias de redes sociais, trechos de código ou qualquer conteúdo web estilizado em um arquivo de imagem nítido e portátil, sem precisar de uma ferramenta de design, uma extensão de captura de tela ou um serviço de renderização no servidor.
Como funciona
- Adicione seu HTML: Cole HTML/CSS diretamente ou envie um arquivo .html.
- Visualize: A ferramenta renderiza seu marcado ao vivo em uma pré-visualização isolada na largura de captura escolhida.
- Escolha as configurações de imagem: Selecione a largura de captura, a resolução (1x/2x/3x) e um fundo transparente, branco ou personalizado.
- Converta e baixe: A pré-visualização é rasterizada em qualidade total e empacotada em um PNG para download.
Funcionalidades
- Cole HTML ou envie um arquivo .html
- Pré-visualização ao vivo estilo WYSIWYG na largura real de captura
- Largura de captura ajustável em pixels
- Resolução 1x, 2x e 3x para imagens nítidas prontas para retina
- Fundo transparente, branco ou de cor personalizada
- Uma única imagem em altura completa, sem paginação
- Processamento 100% no cliente para privacidade
Melhores práticas
- Use CSS em linha ou incorporado: Coloque os estilos em uma tag <style> ou atributos em linha para que a pré-visualização seja renderizada exatamente como esperado.
- Use data URIs para imagens críticas: Imagens de origens diferentes sem cabeçalhos CORS podem não renderizar; incorpore imagens pequenas como data URIs em base64 quando possível.
- Escolha uma largura adequada ao destino: Ajuste a largura de captura ao local onde a imagem será usada (por exemplo, 1200px para cartões sociais, 600px para gráficos de e-mail).
- Use fundo transparente para sobreposições: Escolha transparente quando o PNG for colocado sobre outro fundo, como um mockup de interface ou um logotipo.
- Teste primeiro com o exemplo: Carregue o HTML de exemplo para ver um caso funcional antes de colar seu próprio marcado.
Solução de problemas
Faltam imagens no PNG
Imagens externas hospedadas em outros domínios sem cabeçalhos CORS adequados não podem ser capturadas. Use imagens da mesma origem ou converta-as em data URIs base64.
O fundo não está transparente
Certifique-se de selecionar "Transparente" em Fundo antes de converter — as opções "Branco" e "Cor personalizada" preenchem a tela com uma cor sólida.
A conversão falha ou demora muito
Documentos muito grandes ou CSS complexo (gradientes ou filtros pesados) podem ser lentos. Tente simplificar o marcado ou reduzir a largura de captura.
As fontes parecem diferentes no PNG
O conversor usa as fontes disponíveis no seu navegador. Fontes web carregadas via @font-face de domínios externos podem nem sempre ser capturadas; use fontes do sistema para garantir consistência.
Casos de uso comuns
- Cartões para redes sociais: Projete um layout de cartão Open Graph ou Twitter em HTML e exporte-o como uma imagem PNG compartilhável.
- Capturas de código e terminal: Estilize um bloco de código ou saída de terminal e exporte uma imagem limpa para documentação ou publicações.
- Gráficos para e-mail: Transforme um banner ou botão HTML estilizado em um PNG estático para clientes de e-mail que removem HTML dinâmico.
- Mockups e selos de interface: Exporte um pequeno componente estilizado com fundo transparente para sobrepor em outros designs.
- Imagens para blog e README: Converta um trecho HTML formatado em uma imagem para incorporar em documentação Markdown.
Perguntas frequentes
Sim. Seu HTML é renderizado e convertido inteiramente no seu navegador e nunca é enviado para um servidor.
Não. As tags de script são desativadas na pré-visualização e na exportação por segurança, portanto scripts interativos não serão executados.
Sim. Escolha "Transparente" em Fundo para exportar um PNG com canal alfa, ideal para sobreposições e logotipos.
Use 1x para telas padrão, 2x para telas retina ou de alta densidade, e 3x para o resultado mais nítido possível (arquivo maior).
Você pode colar um documento HTML completo (com <html>, <head> e <body>) ou um fragmento HTML menor. Ambos são suportados.
Imagens carregadas de outros domínios sem suporte a CORS não podem ser capturadas por motivos de segurança do navegador. Use imagens da mesma origem ou data URIs base64.
Não. Tudo acontece localmente no seu navegador e o PNG é baixado diretamente para o seu dispositivo.