Convertir HTML a imagen

Pega HTML con su CSS, elige un tamaño y descarga un PNG o JPG. La página se renderiza en tu navegador, así que los diseños privados siguen siendo privados.

<div class="card">
  <div class="brand">devnotes.blog</div>
  <h1>Cinco layouts con CSS Grid que puedes copiar hoy</h1>
  <p>Santo grial, barra lateral, tarjetas, casi masonry y un artículo a sangre, con el código de cada uno.</p>
  <div class="meta"><span class="dot"></span> 8 min de lectura &middot; 23 sept. 2026</div>
</div>

Tamaño

FormatoEscala

Resultado

Tu imagen aparecerá aquí.

Cómo convertir HTML a imagen

Pega tu HTML y tu CSS en el editor. Vale tanto un documento completo como un fragmento con un bloque <style>.
Elige un tamaño. Open Graph (1200 x 630) es el que usan Facebook, LinkedIn, X y Slack para las vistas previas de enlaces; Página entera captura toda la altura a 1280 píxeles de ancho.
Elige PNG para texto y colores planos y JPG para fotos, pulsa Convertir a imagen y después Descargar.

El HTML se maqueta exactamente al ancho que elijas, así que las media queries se comportan como en una ventana de ese tamaño. Con una altura fija, lo que quede por debajo del borde se recorta.

Ejemplos

Tarjetas sociales para un blog. El ejemplo de arriba es una tarjeta de 1200 x 630 escrita en CSS normal. Cambia el título, convierte y sube el PNG como og:image del artículo.
Una imagen de un correo o de un recibo. Pega el HTML de un correo transaccional y usa Página entera para obtener un único PNG alto para documentación o para un ticket de soporte.
Un componente de Tailwind para una diapositiva. Incluye el script CDN de Tailwind, elige Diapositiva HD (1280 x 720) y Escala 2x, y pon el PNG en tu presentación.

Preguntas sobre HTML a imagen

¿Se envía mi HTML a un servidor?

No. El HTML se renderiza en un marco aislado dentro de esta pestaña y ahí mismo se convierte en imagen con la librería de código abierto html-to-image. No se sube nada.

¿Por qué falta mi fuente web o una imagen en el PNG?

El renderizador tiene que descargar cada fuente e imagen para incrustarla. Los archivos servidos sin cabeceras CORS no se pueden leer desde una página aislada, así que se omiten. Google Fonts y los servidores de imágenes con CORS funcionan (probamos Google Fonts, el CDN de Tailwind e imágenes de placehold.co); las imágenes de webs que bloquean las lecturas entre orígenes, no.

¿Puedo usar Tailwind CSS?

Sí. Añade <script src="https://cdn.tailwindcss.com"></script> a tu HTML. El renderizador espera a que la página se estabilice antes de hacer la captura, así que las clases de Tailwind se aplican.

¿Qué hace la Escala 2x?

Renderiza el doble de píxeles en cada dirección (una tarjeta de 1200 x 630 pasa a 2400 x 1260), lo que mantiene el texto nítido en pantallas de alta densidad. La maquetación no cambia.

¿Hay un límite de tamaño?

Cada lado tiene un máximo de 4096 píxeles después de aplicar la escala, porque los canvas más grandes fallan en varios navegadores móviles.