UltKit

Converter HTML para PNG

Transforme uma página salva, a exportação de um painel ou o mockup de um componente em um PNG em que cada letra e cada linha fina ficam exatamente como o navegador desenhou. Escolha a largura da janela, e o layout acompanha.

Documento para imagem

ou solte arquivos DOC, DOCX, DOCM … aqui ·

Até 95 MB por arquivo· Até 20 arquivos· Apagados após 30 minutos

Saída

Os arquivos são processados em nossos servidores e apagados após 30 minutos.

Como usar esta ferramenta

  1. 1

    Adicione o arquivo HTML

    Envie arquivos .html, .htm ou .mhtml, até 20 por lote e 95 MB cada. Uma página salva como um único arquivo MHTML leva as imagens e os estilos dentro dela.

  2. 2

    Defina a largura da janela

    Largura da página HTML começa em 1280 px. Use 390 px para o layout de celular ou 1920 px para um painel largo. Converter para já vem em PNG e Imagens em uma imagem longa.

  3. 3

    Converta para PNG

    Clique em Converter para PNG. Ative Fundo transparente em Configurações avançadas se a página não tiver cor de fundo própria e a imagem for ficar sobre outra arte.

Resposta

Como converter HTML para PNG?

Envie o arquivo .html ou .mhtml, ajuste Largura da página HTML para a tela que você quer imitar e clique em Converter para PNG. A página renderizada inteira volta como uma única imagem sem perda.

Converta HTML para PNG quando texto e linhas precisam ficar nítidos

O PNG é Recomendação do W3C desde 1996 e usa compressão sem perda, então as bordas suavizadas de um texto de 14 px, as bordas de tabela de um pixel e o código com realce de sintaxe passam intactos. É por isso que desenvolvedores anexam capturas em PNG a relatórios de bug e designers as compartilham em revisões: ninguém precisa se perguntar se uma borda borrada é problema de CSS ou artefato de compressão.

O preço é o tamanho. Uma página feita de texto e cor chapada comprime bem; uma página cheia de fotos, não. Se a captura vai para um chat ou um e-mail em que o tamanho importa mais que o detalhe, o JPG gera um arquivo menor. Para documentação, notas de versão, painéis e guias de estilo, o PNG é o padrão mais seguro.

A largura decide o layout. HTML não tem página fixa: o mesmo arquivo mostra um design de desktop em três colunas a 1280 px e uma única coluna empilhada a 390 px. O conversor monta a página na Largura da página HTML que você informar, de 320 a 3840 px, e captura tudo, da primeira linha até o rodapé.

Larguras do conversor de HTML para PNG para telas comuns

195:422

390 × 844 px

Celular

Viewport CSS de muitos iPhones recentes; mostra o layout mobile

41:59

820 × 1180 px

Tablet

iPad Air na vertical; muitos sites mudam de breakpoint perto daqui

8:5

1280 × 800 px

Notebook

A largura padrão deste conversor

16:9

1920 × 1080 px

Monitor Full HD

Painéis largos e áreas administrativas

HTML

HyperText Markup Language (HTML)

HTML é a linguagem de marcação da web, descrita pela primeira vez por Tim Berners-Lee no início dos anos 1990 e hoje mantida pelo WHATWG como um padrão vivo. Um arquivo HTML descreve títulos, parágrafos, links, tabelas, imagens e formulários, enquanto o estilo costuma vir do CSS. Todo navegador o renderiza, e ele também é usado em modelos de e-mail e páginas da web salvas. Um único arquivo HTML costuma depender de imagens e folhas de estilo externas, por isso pode aparecer quebrado quando movido sozinho.

Compressão
–
Transparência
–
Animação
–
Lançamento
1993 · Tim Berners-Lee; maintained by WHATWG
Conversor de HTML

PNG

Portable Network Graphics (PNG)

PNG é um formato raster sem perda publicado em 1996 pelo PNG Development Group e depois padronizado pelo W3C e pela ISO. Ele preserva cada pixel exatamente, oferece transparência alfa completa e lida com texto, bordas nítidas e cores chapadas sem artefatos. Essa precisão o torna ideal para capturas de tela, logotipos, ícones e elementos de interface. A contrapartida é o tamanho: fotos salvas em PNG costumam ser várias vezes maiores que a mesma foto em JPEG ou WebP. Todos os navegadores, sistemas operacionais e editores abrem arquivos PNG.

Compressão
Sem perdas
Transparência
Sim
Animação
Não
Lançamento
1996 · PNG Development Group
Conversor de PNG

O PNG é a escolha quando a página é quase toda texto, código, tabelas ou partes de interface: os pixels sem perda mantêm linhas finas e letras pequenas nítidas em documentação, relatórios de bug e revisões de design, onde os artefatos do JPG apareceriam.

Converter HTML para PNG sem perder estilos nem fontes

Um arquivo .html simples muitas vezes depende de coisas guardadas em outro lugar: uma folha de estilos numa pasta css, imagens no servidor original, fontes de um serviço de fontes. Quando elas faltam, a página volta a ser texto sem estilo numa fonte padrão. Salvar a página no Chrome ou no Edge como Página da Web, arquivo único gera um arquivo .mhtml que mantém estilos e imagens juntos, e é o envio mais confiável.

Fontes da web seguem a mesma regra. Uma fonte declarada com @font-face só carrega se o arquivo dela puder ser acessado; uma fonte que só existe no seu computador é trocada por outra parecida. Se a tipografia exata importa, incorpore a fonte ou confira o resultado antes de enviar.

Uma largura fixa também deixa capturas semanais de um relatório comparáveis lado a lado. Quando o resultado precisa continuar como texto selecionável para impressão, o formato certo é converter HTML para PDF.

Perguntas sobre HTML para PNG

Converter HTML para PNG é melhor do que um print do meu navegador?

O print do navegador só pega o que cabe na tela, a menos que você use uma ferramenta de captura de página inteira, e a largura é a da sua janela naquele momento. Aqui a largura é um número que você define, então duas capturas feitas com semanas de diferença ficam alinhadas, e a página inteira entra, da primeira linha até o rodapé.

Por que o PNG da página HTML fica várias vezes maior que o JPG?

O PNG guarda cada pixel sem perda. Texto e cores chapadas comprimem bem assim, mas fotos, degradês e capas de vídeo não, então uma landing page cheia de fotos pode gerar um PNG pesado. Para essas páginas, converter HTML para JPG é a opção mais leve; para trechos de código, gráficos e interface, o desfoque normalmente não compensa.

O PNG gerado do HTML pode ter fundo transparente em vez de branco?

Sim. Ative Fundo transparente. Ele só aparece onde a própria página não define cor de fundo, então um site com o corpo branco continua saindo branco. Funciona melhor com um componente ou selo isolado, montado como um arquivo HTML próprio.

O conversor de HTML para PNG executa o JavaScript da página?

Conteúdo que um script monta quando a página abre pode aparecer, mas nada que dependa de clique, rolagem ou login. Se um gráfico ou tabela só existe depois de uma interação, abra a página no navegador, espere carregar tudo e salve como arquivo único antes de enviar.

Como gerar uma imagem só da parte de cima de uma página longa?

Mude Imagens para uma por página e defina Páginas como Primeira página. Você recebe a primeira seção do tamanho de uma página em vez do comprimento todo. Para recortar em um enquadramento exato depois, use a ferramenta de cortar imagem.