HTML a PNG: convierte HTML y CSS en una imagen para compartir
¿Tienes una tarjeta HTML/CSS que quieres compartir como imagen? Con HTML to Image puedes exportar el diseño renderizado a PNG. Sirve para avisos de documentación, pequeñas comparaciones y actualizaciones cuyo espaciado ya controlas mediante CSS.
Esta guía convierte HTML a PNG desde código aportado. Empieza con un fragmento estático y autónomo para reproducir y revisar el resultado.
- Abre el conversor de HTML a imagen y pega el código con los estilos necesarios.
- Ajusta la anchura y comprueba el título más largo y los márgenes en la vista previa.
- Elige PNG y una escala adecuada al tamaño de publicación.
- Abre la descarga y revisa bordes, texto, fondo y marca antes de publicar.
Conserva el HTML para cambios posteriores. La imagen es una presentación fija; los enlaces y botones dibujados no siguen siendo interactivos.
El ejemplo utiliza una familia de fuentes habitual, un bloque corto de estilos y ningún recurso remoto. Es una demostración, no un caso de cliente. Todas las versiones lingüísticas usan la misma fuente.
```html
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 32px; background: #edf2f8;
font-family: Arial, sans-serif; color: #17263c; }
.card { padding: 32px; background: white;
border: 1px solid #c9d5e4; border-radius: 12px; }
.label { margin: 0 0 12px; color: #47638c; font-size: 14px; }
h1 { margin: 0 0 16px; font-size: 32px; }
p { margin: 0; font-size: 18px; line-height: 1.5; }
</style>
<article class="card">
<p class="label">Documentation update</p>
<h1>Ready for review</h1>
<p>Check the source, review the layout, then share the image.</p>
</article>
```
Copia únicamente el HTML dentro del bloque en la herramienta. Los delimitadores Markdown sirven para guardar y compartir la fuente, no forman parte de la entrada HTML.
Abre el PNG completo. Lo generamos con el servicio real de exportación HTML del sitio, con anchura de 800 px y salida a 2×. Incluye la marca gratuita. Comprobamos título, párrafo, relleno y borde en el archivo. Esto verifica el ejemplo pequeño, no cualquier web o aplicación interactiva.
| Síntoma | Primera comprobación |
|---|---|
| Faltan estilos | Incluir el CSS necesario con el fragmento |
| El título cambia de línea | Comparar anchura y fuente disponible |
| Faltan imágenes | Comprobar que el servicio accede a sus URL |
| Se recorta contenido | Revisar alturas fijas y reglas de desbordamiento |
| El texto insertado queda pequeño | Reducir contenido o ampliar la imagen mostrada |
Prueba primero la fuente autónoma y añade después fuentes o imágenes externas. Un recurso visible en una sesión iniciada puede no ser accesible para el servidor. No copies navegación, scripts y estilos ajenos de una web entera si basta un componente pequeño.
Utiliza HTML para controlar con CSS el espaciado y la estructura. Si bastan títulos, prosa, tablas y código, usa el editor de imágenes Markdown. La guía de Markdown a PNG muestra esa ruta más sencilla.
Exportar HTML también difiere de capturar una URL de una web. Aquí aportas código; no se demuestra iniciar sesión, esperar estados de una aplicación ni reproducir toda interacción del navegador.
Consulta las reglas actuales de precios y exportación para conocer las condiciones gratuitas y sin marca. El ejemplo tiene marca y no demuestra un derecho de pago.
El resultado es una imagen de mapa de bits. Guarda HTML o Markdown y proporciona enlaces reales junto a la imagen. El texto alternativo debe explicar el mensaje de la tarjeta; evita que información importante solo exista dentro de ella.
Esta exportación usa procesamiento en servidor. Retira contenido confidencial salvo que tu organización lo permita. Esta guía no promete trabajo sin conexión, eliminación automática de datos sensibles ni un plazo de conservación.
Empieza con una tarjeta corta, exporta el HTML como PNG y comprueba el archivo al tamaño previsto. Conserva la fuente junto al contenido para volver a exportar cambios de texto o diseño sin reconstruir la tarjeta desde una captura.