Diseñadores y desarrolladores necesitan constantemente una imagen de un fragmento de HTML: una tarjeta social, la maqueta de un banner, una cabecera de correo, una cita con estilo. Este conversor gratuito convierte tu fragmento en un PNG de verdad. Pega HTML con estilos en línea (o un bloque <style>), ajusta el tamaño en píxeles, haz clic en generar y descarga.
Usa el propio motor de tu navegador a través de un SVG, así que el resultado es genuinamente lo que un navegador pintaría, con unos límites estrictos sobre archivos externos que el artículo explica con honestidad, porque todas las herramientas de este tipo los tienen.
Cómo convertir HTML a imagen
- Pega tu HTML en el cuadro. Funcionan tanto los atributos
style="..."en línea como un bloque<style>dentro del fragmento. - Ajusta el ancho y el alto de la imagen resultante en píxeles, y un color de fondo (todo lo que quede fuera de tu fragmento se verá de ese color).
- Haz clic en Generar PNG y revisa la vista previa.
- Pulsa Descargar PNG.
Un ejemplo con números
El fragmento de ejemplo es una tarjeta centrada: una estrella de 90 px, un título de 44 px y una línea de texto de 20 px. Generado a 800 × 600, el PNG mide exactamente 800 × 600 píxeles y pesa unos 40–90 KB según los colores. Duplica el lienzo a 1600 × 1200 y el mismo código se genera con el mismo tamaño de composición: tus píxeles CSS son los píxeles de la imagen, así que para una tarjeta nítida en pantallas retina, diseña al doble o escala tus fuentes.
Cómo funciona
Tu fragmento se coloca dentro de un elemento contenedor, se serializa como XHTML bien formado y se incrusta en un foreignObject de SVG: la forma estándar de hacer que un navegador pinte HTML dentro de un lienzo. Después el lienzo exporta un PNG. Es la misma técnica que usan librerías populares como dom-to-image, ejecutada por completo en tu pestaña: tu código nunca se sube a ningún sitio.
Los límites honestos (todas las herramientas así los tienen)
- Las imágenes y archivos externos no se cargan. Por seguridad, la generación SVG no puede buscar recursos de fuera: un
<img src="https://...">saldrá en blanco y puede bloquear la exportación. Incrusta las imágenes como data URL. - Las fuentes web se sustituyen. Solo están garantizadas las fuentes instaladas en el sistema del visitante; si enlazas una fuente de Google, se usará una alternativa.
- El JavaScript no se ejecuta. La captura es del HTML/CSS estático: convierte gráficos y widgets a marcado estático antes.
- Los emojis del sistema y los controles de formulario pueden verse algo distintos según el sistema operativo, porque los pinta el navegador local.
Buenos usos
- Tarjetas sociales y OG: diseña la tarjeta en HTML y expórtala a 1200 × 630.
- Documentación y tutoriales: ejemplos de resultados de código con aspecto perfecto.
- Cabeceras de correo y banners diseñados en HTML pero necesarios como imagen plana.
- Citas y anuncios estilizados una vez y compartidos en todas partes como PNG.
Preguntas frecuentes
¿Por qué mi imagen salió en blanco?
Casi siempre por una referencia externa: una hoja de estilos enlazada, una fuente web o la URL de una imagen. Incluye el CSS en línea, usa fuentes del sistema e incrusta cualquier imagen como data URL, y vuelve a generar.
¿Puedo generar una página web entera desde su URL?
No: los navegadores no permiten que una página entre en otro sitio y lo fotografíe. Pega el HTML de la página (o la parte que necesites) en su lugar.
¿Mi código se envía a un servidor?
No. El análisis, la generación y la exportación del PNG ocurren localmente en tu navegador.
Herramientas relacionadas
English version: HTML to Image Converter – Turn HTML Code into a PNG, Free. También te puede interesar: Agregar Texto a una Imagen – Escribe sobre tus fotos online, gratis · Foto de Perfil de Gmail Animada – Crea un GIF para tu perfil gratis.
Inserta esta herramienta en tu web — gratis
Copia el código de abajo para añadir esta herramienta funcional a tu propia página. Solo pedimos que mantengas el pequeño enlace de crédito que la acompaña.