HTML a imagen — convierte HTML y CSS a PNG
Dibuja el HTML y CSS que pegas y lo captura como PNG con el ancho y la escala elegidos
Funciona en tu navegador · no se sube nada
Pega un fragmento (<div>…) o un documento completo (<html>…). En un documento completo solo se usan el contenido de <body> y los bloques <style>.
Estilos que añadir. Los bloques <style> dentro del HTML también se aplican.
El contenido se maqueta a este ancho (px) y se captura con toda su altura. De 100 a 4000.
2× es nítido como una pantalla retina y 3× va bien para imprimir. El número de píxeles crece con el cuadrado de la escala.
Por seguridad y privacidad, nunca se solicitan imágenes, fuentes ni CSS de direcciones que no sean data: o blob:, ni en la vista previa ni durante la captura, y los scripts nunca se ejecutan. El texto usa las fuentes instaladas en tu dispositivo.
Vista previa
Escribe algo de HTML para ver la vista previa.
Qué hace
Esta herramienta guarda un fragmento de HTML y CSS, como una tarjeta, un aviso, una tabla, un botón o un banner de correo, como imagen PNG. Úsala para mostrar el resultado renderizado en documentación o en una entrada de blog, para crear con código una tarjeta de aviso para redes sociales o para compartir parte de un diseño como imagen. A diferencia de recortar una captura de pantalla, obtienes un ancho y una escala exactos.
Cómo se usa
- Pega el código en HTML: un documento completo (
<html>…) o solo un fragmento. ¿Es tu primera vez? Haz clic en Insertar ejemplo. - Si quieres, añade estilos en CSS. Los bloques
<style>dentro del HTML también se aplican. - Ajusta el Ancho de captura (px), la Escala (1×, 2×, 3×) y el Fondo (blanco o transparente).
- Revisa la vista previa, haz clic en Crear PNG y luego en Guardar PNG.
Cómo funciona
- Vista previa segura: el código se dibuja en un iframe aislado (sandbox). El sandbox impide que se ejecuten scripts, y una política de seguridad de contenido (CSP) bloquea todas las solicitudes de red salvo las direcciones data: y blob:.
- Se eliminan las direcciones externas: el código pegado lo leen primero los analizadores de HTML y CSS del propio navegador (en este paso no se carga nada). Toda dirección que no sea data: o blob: en src, srcset, poster, href de SVG, atributos style,
<style>, url(), image-set(), @import y @font-face se elimina y se te muestra en una lista. Justo antes de capturar se vuelve a revisar la vista previa, y durante la captura solo se pueden leer direcciones data: y blob:, así que nunca sale ninguna solicitud hacia una dirección externa. Los enlaces (<a href>) no afectan a la imagen, así que no se enumeran; se modifican para que al hacer clic no lleven a ningún sitio. - Tamaño de captura: el contenido se maqueta al ancho elegido y se captura con su altura real. El PNG mide ancho × escala por alto × escala.
- Límite de tamaño: por encima de lo que el navegador puede manejar (16.777.216 píxeles en iPhone y iPad, 16.384 px por lado) la escala se reduce automáticamente y la página lo indica.
- Documentos completos: solo se usan el contenido de
<body>y todos los bloques<style>; las demás etiquetas de<head>se descartan. - La captura usa html-to-image (licencia MIT).
Ejemplos
| Entrada | Ajustes | Resultado |
|---|---|---|
| La tarjeta de aviso de ejemplo | Ancho 800, 2× | PNG de 1600 px de ancho |
Una <table> con CSS |
Ancho 600, 3×, transparente | PNG de 1800 px de ancho, fondo transparente |
| Código con una imagen externa | Ancho 800, 1× | La imagen externa queda vacía; se enumeran las direcciones bloqueadas |
Para dibujos vectoriales, usa SVG a PNG; para Markdown, prueba la vista previa de Markdown.
Preguntas frecuentes
¿Puedo capturar una web por su URL?
No. Capturar otra web requiere un servidor que abra la página por ti, y esta herramienta no lo hace. Pega HTML y CSS que hayas escrito o copiado de las herramientas para desarrolladores de tu navegador.
Faltan imágenes.
Por seguridad y privacidad, nunca se cargan imágenes, fuentes ni CSS de direcciones que no sean data: o blob: (http, https, // y rutas relativas). Las direcciones ocultas con referencias de caracteres HTML o escapes CSS se comprueban tal como las decodifica el navegador, así que también se bloquean. La herramienta enumera las direcciones bloqueadas; incrusta las imágenes como direcciones data: (Base64) y aparecerán. La herramienta de imagen a Base64 puede crearlas.
La fuente se ve distinta a la de mi diseño.
No se descargan archivos de fuentes web, así que el texto usa las fuentes instaladas en tu dispositivo. Si falta la fuente indicada, se usa la predeterminada del sistema (por ejemplo, Segoe UI en Windows o San Francisco en los dispositivos de Apple).
¿Aparece el contenido generado con JavaScript?
No. Los scripts del código pegado no se ejecutan; solo se dibujan el HTML y el CSS estáticos.
¿Se envía mi código a un servidor?
No. La vista previa y la imagen se crean en tu navegador.
