HTML a imagen
Pega un fragmento HTML y su CSS, míralo renderizarse mientras escribes y exporta el resultado como un PNG, JPG, WebP o SVG nítido. Ideal para tarjetas para redes sociales, banners de email, maquetas de interfaz, insignias y capturas para documentación, todo generado en tu navegador.
Última actualización:
Los cambios se renderizan en vivo. Los scripts no se ejecutan; solo HTML y CSS.
El tablero de ajedrez muestra las zonas transparentes. Solo se exporta el contenido dentro del marco de vista previa, así que pon los fondos en tu elemento exterior (o elige un fondo arriba).
Cómo usar HTML a imagen
- Elige una plantilla o selecciona En blanco, y pega tu propio HTML y CSS en los dos editores.
- Define el ancho en píxeles (déjalo vacío para automático) y añade relleno si quieres espacio alrededor del diseño.
- Elige el fondo: transparente para superposiciones y diapositivas, o un color sólido.
- Elige el formato y la escala. 2× da una imagen nítida en móviles y pantallas de alta densidad.
- Descarga la imagen o pulsa Copiar imagen para pegarla en un chat, un documento o una herramienta de diseño.
Cómo el HTML se convierte en una imagen
Tu HTML y CSS se renderizan dentro de un marco aislado con el motor de diseño normal del navegador, así que flexbox, grid, degradados, sombras, esquinas redondeadas y pseudoelementos se ven igual que en una página web. Para exportar, la librería de código abierto html-to-image copia el elemento y sus estilos calculados en un foreignObject SVG; luego el navegador pinta ese SVG en un canvas a la escala que elegiste y lo codifica como PNG, JPG o WebP. El tamaño de salida es el tamaño del elemento por la escala: una tarjeta de 800 × 420 px a 2× se convierte en una imagen de 1600 × 840 px.
Qué formato elegir
| Formato | Transparencia | Ideal para | Notas |
|---|---|---|---|
| PNG | Sí | Elementos de interfaz, insignias, tarjetas con mucho texto, diapositivas | Sin pérdida, bordes nítidos; archivos más grandes para fotos |
| JPG | No (relleno blanco) | Tarjetas con fotos o degradados, email | El más pequeño para contenido fotográfico; control de calidad |
| WebP | Sí | Sitios web y blogs | WebP sin pérdida es de media un 26% más pequeño que PNG, según Google |
| SVG | Sí | Páginas web que necesitan zoom nítido | Usa foreignObject; no todas las apps de diseño lo admiten |
Consejos para exportaciones limpias
- Da estilo a un contenedor exterior. Pon el fondo, el relleno y el radio del borde en un elemento exterior. Los estilos de
bodyno forman parte del elemento exportado. - Da al diseño un ancho fijo para imágenes de redes sociales: 1200 px de ancho para vistas previas de enlaces o 1080 px para publicaciones cuadradas, y luego exporta a 1×.
- Deja espacio para las sombras. Un
box-shadowfuera del elemento se corta; añade un margen al elemento o usa la opción Relleno. - Prefiere las fuentes del sistema como system-ui, Georgia o Arial para obtener resultados fiables, o incrusta las fuentes como URL data:.
- ¿Compartes código en lugar de un diseño? Código a imagen crea fragmentos con resaltado de sintaxis, y HTML a PDF convierte páginas enteras en documentos.
Preguntas frecuentes
¿Cómo convierto HTML en una imagen?
Pega tu HTML en el cuadro HTML y tus estilos en el cuadro CSS. La vista previa lo renderiza con el propio motor de diseño de tu navegador. Después elige PNG, JPG, WebP o SVG y pulsa Descargar. La imagen tiene exactamente el tamaño del elemento renderizado, multiplicado por la escala que elijas.
¿Puedo obtener un PNG con fondo transparente?
Sí. Deja el fondo en Transparente y exporta PNG, WebP o SVG. Cualquier zona que tu CSS no pinte queda transparente, lo que se muestra como un tablero de ajedrez en la vista previa. JPG no admite transparencia, así que recibe un fondo blanco.
¿Por qué faltan mis imágenes o fuentes web en la exportación?
Para dibujar imágenes y fuentes externas en la imagen, el navegador debe descargarlas, y solo puede hacerlo cuando el otro servidor permite solicitudes de origen cruzado (CORS). Muchos sitios no lo permiten. Usa imágenes de servidores con CORS habilitado o URL data:, y fuentes del sistema o de servicios que envíen cabeceras CORS.
¿Se ejecuta el JavaScript de mi HTML?
No. La vista previa es un marco aislado que bloquea los scripts, así que el código pegado no puede ejecutarse ni acceder a la página. El contenido que solo aparece tras ejecutar JavaScript, como los gráficos dibujados por una librería, no se mostrará. Exporta en su lugar el HTML y el CSS estáticos.
¿Qué resolución debo usar?
Usa 1× cuando necesites el tamaño exacto en píxeles, por ejemplo un banner de 1200 px de ancho. Usa 2× para imágenes que se verán en móviles y pantallas retina, y 3× o 4× para impresión o diapositivas que se ampliarán. El navegador limita las exportaciones muy grandes a 16,384 píxeles por lado.
¿La exportación SVG es un archivo vectorial real?
El SVG envuelve tu HTML en un elemento foreignObject, así que el texto y las formas se mantienen nítidos con cualquier zoom en los navegadores. Algunos programas de diseño y apps de Office no admiten foreignObject; usa un PNG a 3× o 4× para ellos.
¿Se sube mi código a algún sitio?
No. El renderizado y la creación de la imagen se hacen en tu navegador con la librería de código abierto html-to-image. Tu último HTML y CSS se guardan solo en el almacenamiento local de este navegador.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.