Pular para o conteúdo
FitMyImage
Mais ferramentas
Português (Brasil)

HTML para imagem

Cole HTML e CSS e receba um PNG, JPG, WebP ou SVG dele, em densidade de pixels 1×, 2× ou 3×. Útil para cards de redes sociais, trechos de código, banners e cabeçalhos de e-mail.

Densidade de pixels
Fundo

A marcação é desenhada neste aparelho. Scripts não rodam, e imagens ou fontes de outros sites não são carregadas: use URLs data: e fontes do sistema. Para capturar uma página ao vivo, use a captura de tela do próprio navegador (no Chrome: DevTools e depois Capture full size screenshot).

Como funciona

  1. Cole seu HTML, com o CSS numa tag style.
  2. Defina a largura em pixels CSS; deixe a altura vazia para acompanhar o conteúdo.
  3. Escolha a densidade de pixels (2× para texto nítido no celular) e o fundo.
  4. Pressione Gerar imagem, confira a prévia e baixe.

O que pode e o que não pode ser desenhado

  • Qualquer elemento HTML e CSS que o navegador suporte, incluindo flexbox, grid, gradientes, bordas e fontes do sistema.
  • Imagens só como URLs data:. Imagens e fontes da web de outros sites não são buscadas, porque o navegador não deixa uma página ler pixels de outros sites.
  • Scripts não rodam: a marcação é montada num ambiente isolado com scripts desligados.

Capturar uma página da web pelo endereço

Transformar uma URL em imagem exige um servidor que abra a página por você, o que significaria enviar a ele o seu endereço e ver o que você captura. Este site não tem servidor. Seu navegador consegue fazer isso: no Chrome ou no Edge, abra o DevTools (F12), pressione Ctrl+Shift+P e execute 'Capture full size screenshot'; o Firefox tem 'Fazer captura de tela' no menu do botão direito.

Perguntas

Por que minhas imagens não aparecem no resultado?

Imagens vindas de outros sites ficam de fora, porque o navegador não deixaria a página ler a imagem final. Converta-as em URLs data: e cole essas URLs no src.

Que formato devo escolher?

PNG para texto nítido e cores chapadas, JPG para fotos sobre fundo sólido, WebP para o menor arquivo na web e SVG para manter a marcação vetorial, que escala sem perder nitidez.

O que a densidade de pixels faz?

Ela multiplica os pixels: um layout de 1200 px de largura em 2× vira uma imagem de 2400 px, então o texto continua nítido em telas de alta resolução.

Funciona no Safari?

O Safari desenha o SVG, mas algumas versões não permitem transformá-lo em pixels. Se isso acontecer, a página avisa; escolha SVG, ou use Chrome, Edge ou Firefox para PNG e JPG.

Ferramentas relacionadas