Convertir HTML a imagen
Con esta herramienta puedes convertir HTML a imagen: pega el código, elige un ancho, pulsa «Crear imagen» y descarga un PNG, JPG o WebP. La imagen se crea en tu navegador: tu código no se sube, no se guarda y no aparece en la dirección de la página.
Fuente: W3C SVG 2 – foreignObject (HTML-Inhalt in SVG einbetten). Actualizado: .
Cómo se calcula
Cómo el HTML se convierte en imagen
Tu navegador dibuja el código HTML como un gráfico: primero se limpia, luego se renderiza como SVG con HTML incrustado (foreignObject) y se pinta sobre un lienzo (canvas) que se guarda como PNG, JPG o WebP. Sirve para tarjetas, citas, tablas, fragmentos de facturas, bloques de correo o imágenes para redes sociales: todo lo que se pueda diseñar con HTML y CSS.
Qué se admite
- HTML y CSS: estilos en línea y un bloque
<style>, flexbox, grid, degradados, sombras, esquinas redondeadas, tablas. - Imágenes: solo incrustadas como dirección Base64 (
data:image/png;base64,…) o como SVG en línea. Imagen a Base64 convierte un archivo de imagen en la dirección adecuada. - Fuentes: las instaladas en tu dispositivo y la fuente del sistema. Las fuentes web cargadas desde internet (Google Fonts) no se descargan.
Qué no funciona
Los scripts no se ejecutan, las imágenes, fuentes y hojas de estilo de otras direcciones no se cargan, y las animaciones, los efectos hover, iframe, canvas y video no dan imagen. Esas partes se eliminan al limpiar; una nota bajo el resultado te lo indica. La representación puede diferir un poco de una página real porque el navegador solo dibuja tu fragmento.
Tamaño, nitidez y formato
- Ancho y alto: con «0» el alto sigue al contenido.
- Resolución: 2× da el doble de píxeles y se ve nítida en móviles y pantallas Retina. En imágenes muy grandes la resolución se limita automáticamente.
- Formato: PNG para texto y gráficos de bordes nítidos con transparencia, JPG para archivos pequeños (siempre con fondo), WebP como compromiso moderno.
Privacidad y seguridad
Tu código se procesa solo en tu navegador y no se guarda en ningún sitio. Scripts, atributos de evento como onclick y direcciones externas se eliminan antes de dibujar. Si prefieres poner texto sobre una foto existente, usa poner texto a una foto.
Preguntas frecuentes
¿Cómo convierto HTML a imagen?
Pega el código HTML, elige ancho y resolución y pulsa «Crear imagen». Después descarga la imagen como PNG, JPG o WebP.
¿Por qué no se ven mis imágenes?
Las imágenes de otras direcciones (https://…) no se cargan por seguridad. Incrústalas como dirección Base64 (data:image/…) o usa SVG en línea.
¿Se sube mi código a algún servidor?
No. El código se lee en tu navegador y se dibuja como imagen allí mismo. No se envía ni se guarda.
¿Cómo consigo un fondo transparente?
Elige el fondo «Transparente» y el formato PNG o WebP. JPG no admite transparencia y siempre lleva fondo blanco.
¿Por qué sale borrosa la imagen?
Sube la resolución a 2× o 3×: la imagen tendrá el doble o el triple de píxeles con el mismo tamaño de visualización.
¿Funcionan las Google Fonts?
No, las fuentes web cargadas desde internet no se descargan. Usa fuentes del sistema como Arial, Georgia o Verdana, o fuentes instaladas en tu dispositivo.
Fuentes y base legal
- W3C SVG 2 – foreignObject (HTML-Inhalt in SVG einbetten)
- W3C SVG 2 – SVG als Bild: keine Skripte, keine externen Ressourcen („secure static mode“)
- MDN – HTMLCanvasElement.toBlob() (PNG, JPEG, WebP; Qualitätsparameter)
Última actualización: · Principios editoriales
Herramientas relacionadas
- Poner texto a una fotoEscribe sobre tus fotos con 8 tipografías, contorno, sombra o franja de fondo. Mueve y gira el texto y guarda en resolución completa, gratis y sin subir nada.
- Convertir imagen a Base64Convierte una imagen a Base64: copia la Data URL, la etiqueta img, el fondo CSS, Markdown o JSON, reduce antes la imagen y pasa de Base64 a imagen.
- Markdown a HTML: vista previa, código HTML y descargaMarkdown a HTML con vista previa en vivo: títulos, listas, tablas y código según CommonMark. Código HTML limpio para copiar, seguro y sin scripts. Gratis.
- Dividir una imagen en partesDividir imagen en partes iguales (2, 3, 4, 9…), en mosaicos de tamaño fijo o en un póster para imprimir en varias hojas A4 o A3. Gratis y en el navegador.
- Minificar CSS: reducir, formatear e incrustar el CSS en el HTMLMinificar CSS y formatearlo, además de incrustarlo en el HTML para correos: transformaciones seguras, errores con línea, en tu navegador sin subir nada.
- Generador de código QR gratis y permanenteCrea un código QR gratis para un enlace, wifi, contacto (vCard), correo, teléfono o pago SEPA. Elige colores y descarga PNG o SVG. Sin registro ni caducidad.
- Convertir DOCX a TXTConvertir DOCX a TXT: elige un archivo de Word y copia o guarda el contenido como texto plano o Markdown. Gratis, sin subir nada, en el navegador.
- Girar video onlineGirar video online: gira un clip 90° a la izquierda, a la derecha o 180° sin pérdida de calidad, en segundos, gratis y sin subir el archivo a ningún servidor.
- Unir y comprimir PDF en un solo pasoUnir y comprimir PDF de una vez: ordena PDF y fotos, júntalos, reduce el tamaño y numera las páginas. Todo en tu navegador, sin subir archivos.