Convertidor de HTML a PNG
Convierte código HTML en una imagen PNG descargable. Pega el marcado o sube un archivo, previsualízalo y exporta una captura nítida al instante, todo en tu navegador.
100% Procesamiento del Lado del Cliente
Tu HTML se renderiza y convierte completamente en tu navegador. Nada se sube a un servidor.
Vista previa
Por seguridad, las etiquetas <script> están deshabilitadas en la vista previa y la exportación. Los estilos (CSS) y las imágenes se renderizan con normalidad.
Tabla de contenidos
¿Qué es un convertidor de HTML a PNG?
Un convertidor de HTML a PNG toma marcado HTML y CSS y lo renderiza como una única imagen ráster, lista para descargar, incrustar o compartir, como tomar una captura de pantalla de código sin abrir una pestaña real del navegador.
Es útil para convertir tarjetas, banners, vistas previas para redes sociales, fragmentos de código o cualquier contenido web con estilo en un archivo de imagen nítido y portátil, sin necesidad de una herramienta de diseño, una extensión de capturas o un servicio de renderizado en el servidor.
Cómo funciona
- Agrega tu HTML: Pega HTML/CSS directamente o sube un archivo .html.
- Previsualízalo: La herramienta renderiza tu marcado en vivo en una vista previa aislada con el ancho de captura elegido.
- Elige la configuración de imagen: Selecciona el ancho de captura, la resolución (1x/2x/3x) y un fondo transparente, blanco o personalizado.
- Convierte y descarga: La vista previa se rasteriza con máxima calidad y se empaqueta en un PNG descargable.
Características
- Pega HTML o sube un archivo .html
- Vista previa en vivo estilo WYSIWYG con el ancho de captura real
- Ancho de captura ajustable en píxeles
- Resolución 1x, 2x y 3x para imágenes nítidas listas para retina
- Fondo transparente, blanco o de color personalizado
- Una sola imagen de altura completa, sin paginación
- Procesamiento 100% en el cliente para mayor privacidad
Mejores prácticas
- Usa CSS en línea o incrustado: Coloca los estilos en una etiqueta <style> o en atributos en línea para que la vista previa se renderice tal como se espera.
- Usa data URIs para imágenes críticas: Las imágenes de otros dominios sin cabeceras CORS pueden no renderizarse; incrusta imágenes pequeñas como data URIs en base64 cuando sea posible.
- Elige un ancho acorde al destino: Ajusta el ancho de captura al lugar donde se usará la imagen (por ejemplo, 1200px para tarjetas sociales, 600px para gráficos de correo).
- Usa fondo transparente para superposiciones: Elige transparente cuando el PNG se colocará sobre otro fondo, como una maqueta de interfaz o un logotipo.
- Prueba primero con el ejemplo: Carga el HTML de ejemplo para ver un caso funcional antes de pegar tu propio marcado.
Solución de problemas
Faltan imágenes en el PNG
Las imágenes externas alojadas en otros dominios sin cabeceras CORS adecuadas no se pueden capturar. Usa imágenes del mismo origen o conviértelas a data URIs en base64.
El fondo no es transparente
Asegúrate de seleccionar "Transparente" en Fondo antes de convertir; las opciones "Blanco" y "Color personalizado" rellenan el lienzo con un color sólido.
La conversión falla o tarda demasiado
Documentos muy grandes o CSS complejo (degradados o filtros pesados) pueden ser lentos. Intenta simplificar el marcado o reducir el ancho de captura.
Las fuentes se ven diferentes en el PNG
El convertidor usa las fuentes disponibles en tu navegador. Las fuentes web cargadas mediante @font-face desde dominios externos pueden no capturarse siempre; usa fuentes del sistema para mayor consistencia.
Casos de uso comunes
- Tarjetas para redes sociales: Diseña un layout de tarjeta Open Graph o de Twitter en HTML y expórtalo como una imagen PNG compartible.
- Capturas de código y terminal: Da estilo a un bloque de código o salida de terminal y exporta una imagen limpia para documentación o publicaciones.
- Gráficos para correo electrónico: Convierte un banner o botón HTML con estilo en un PNG estático para clientes de correo que eliminan el HTML dinámico.
- Maquetas e insignias de interfaz: Exporta un pequeño componente con estilo y fondo transparente para superponerlo en otros diseños.
- Imágenes para blog y README: Convierte un fragmento HTML formateado en una imagen para incrustar en documentación Markdown.
Preguntas frecuentes
Sí. Tu HTML se renderiza y convierte completamente en tu navegador y nunca se sube a un servidor.
No. Las etiquetas script están deshabilitadas en la vista previa y la exportación por seguridad, por lo que los scripts interactivos no se ejecutarán.
Sí. Elige "Transparente" en Fondo para exportar un PNG con canal alfa, ideal para superposiciones y logotipos.
Usa 1x para pantallas estándar, 2x para pantallas retina o de alta densidad, y 3x para el resultado más nítido posible (con mayor tamaño de archivo).
Puedes pegar un documento HTML completo (con <html>, <head> y <body>) o un fragmento HTML más pequeño. Ambos son compatibles.
Las imágenes cargadas desde otros dominios sin soporte CORS no se pueden capturar por razones de seguridad del navegador. Usa imágenes del mismo origen o data URIs en base64.
No. Todo ocurre localmente en tu navegador y el PNG se descarga directamente a tu dispositivo.