HTML a imagen
Pega HTML y CSS y obtén un PNG, JPG, WebP o SVG, con densidad de píxeles 1×, 2× o 3×. Útil para tarjetas para redes sociales, fragmentos de código, banners y cabeceras de correo.
El código se dibuja en este dispositivo. Los scripts no se ejecutan y no se cargan imágenes ni fuentes de otros sitios: usa URL data: y fuentes del sistema. Para capturar una página web en vivo, usa la captura de pantalla de tu propio navegador (en Chrome: DevTools y luego Capture full size screenshot).
Cómo funciona
- Pega tu HTML, con el CSS en una etiqueta style.
- Fija el ancho en píxeles CSS; deja el alto vacío para que se ajuste al contenido.
- Elige la densidad de píxeles (2× para texto nítido en móviles) y el fondo.
- Pulsa Crear imagen, revisa la vista previa y descarga.
Qué se puede dibujar y qué no
- Cualquier elemento HTML y CSS que admita el navegador, incluidos flexbox, grid, degradados, bordes y fuentes del sistema.
- Imágenes solo como URL data:. Las imágenes y fuentes web de otros sitios no se descargan, porque un navegador no deja que una página lea píxeles de otros sitios.
- Los scripts no se ejecutan: el código se maqueta en un entorno aislado con los scripts desactivados.
Capturar una página web desde su dirección
Convertir una URL en imagen requiere un servidor que abra la página por ti, lo que supondría enviarle tu dirección y que viera lo que capturas. Este sitio no tiene servidor. Tu navegador sí puede hacerlo: en Chrome o Edge, abre DevTools (F12), pulsa Ctrl+Shift+P y ejecuta 'Capture full size screenshot'; Firefox tiene la opción de captura de pantalla en el menú del botón derecho.