# HTML a PNG en línea
> Herramienta gratuita en línea que renderiza el HTML y CSS que pegas en una imagen PNG o JPEG, con el ancho, el alto y la densidad de píxeles que defines.
Para pasar HTML a PNG, pega tu HTML y CSS, define el ancho y el alto en píxeles y crea la imagen. La herramienta genera un PNG o un JPG con el resultado que dibujaría el navegador. Después puedes descargar el archivo.
## Datos clave
- Entrada: HTML y CSS, hasta 256 KB.
- Salida: PNG o JPEG, con densidad de píxeles 1x, 2x o 3x; el fondo transparente funciona solo en PNG.
- Límite de altura de la herramienta gratuita: 2000 px.
- Gratis sin cuenta: hasta 10 conversiones por minuto y 50 al día por visitante, sin marca de agua. Con sesión iniciada, cada renderizado cuesta 1 crédito (100 créditos gratuitos cada mes).
- Los archivos se eliminan automáticamente: 10 minutos tras la conversión sin cuenta, 1 día con una cuenta gratuita.
- Puedes ejecutar el mismo renderizado con POST https://api.aiipworld.com/v1/render y una clave de API (consulta la página API de capturas de pantalla).
## Cómo funciona
1. Pega tu HTML y CSS en el editor.
2. Define el ancho y el alto del área de la imagen en píxeles.
3. Elige PNG o JPG. En PNG, mantén activada la opción de fondo transparente. En JPG, ajusta la calidad de 1 a 100.
4. Haz clic en Crear imagen y descarga el archivo.
## Cómo se renderiza el HTML
El renderizado se ejecuta en nuestros servidores, no en tu dispositivo. Cada conversión usa Chromium sin interfaz (headless).
Cada conversión se ejecuta en un contexto de navegador nuevo, dentro de un contenedor de trabajo con recursos limitados. Hay un tiempo límite estricto.
## Tamaño de imagen y densidad de píxeles
El tamaño de la imagen es el ancho y el alto que defines, multiplicados por la densidad de píxeles (1x, 2x o 3x). Por ejemplo, un área de 640 x 340 a 2x da una imagen de 1280 x 680 px.
## Fondo transparente en PNG
El PNG mantiene la transparencia solo donde la página no pinta fondo. Si defines un color de fondo en html o body, ese color sustituye la transparencia. El JPEG no tiene transparencia.
## PNG o JPEG: cuál elegir
El PNG encaja con texto, bordes nítidos e imágenes transparentes. El JPG encaja con un banner con degradado o cuando buscas un archivo pequeño. La página de HTML a JPG explica la calidad, el tamaño de archivo y los fondos. WebP no es compatible, y la API devuelve un error si se pide WebP. Para convertir un PNG que ya tienes, usa el conversor de PNG a WebP.
## Fuentes, imágenes y scripts
Las fuentes instaladas en tu dispositivo no están disponibles en el servidor de renderizado. Para cargar otras, usa @font-face desde una dirección pública o una data URL.
Las imágenes y las hojas de estilo solo se cargan desde direcciones públicas http o https. JavaScript se ejecuta por defecto.
## Usos habituales de HTML a PNG
Tarjetas para redes sociales, banners y fragmentos de código mostrados como imágenes.
## Uso de la API de HTML a PNG
Envía una petición POST a /v1/render con el HTML y define output como png o jpeg. Autentícate con tu clave de API como token Bearer.
La API responde 202 con un job_id. Consulta GET /v1/jobs/:id hasta que status sea succeeded, failed o timeout. Descarga la imagen desde download_url, que dura poco tiempo. Los créditos de las tareas fallidas y de las que superaron el tiempo límite se devuelven.
## Código HTML como imagen
Sirve como conversor de código HTML a imagen para un bloque de marcado. Pega el HTML y el CSS que le da estilo, define el ancho y el alto, y descarga la imagen cuando esté lista.
La imagen muestra lo que dibujó el navegador, no el código en sí. Si falta un estilo o una fuente en el servidor de renderizado, aparecerá en la imagen. Revisa el resultado antes de usarlo en una publicación o un documento.
## El mismo HTML para banners y fragmentos
Define el tamaño de la caja que necesitas en la página. Elige PNG si la imagen tiene texto o bordes nítidos. Para un banner parecido a una fotografía, elige JPG (JPEG) en la lista de formatos.
La página de HTML a JPG explica la calidad, el tamaño de archivo y los fondos.
## HTML a PNG en línea
Pasos: pega el HTML y el CSS, define el ancho y el alto, elige PNG y haz clic en Crear imagen. El dibujo se hace en Chromium. No necesitas ninguna extensión de navegador ni herramienta de línea de comandos.
El PNG mantiene la transparencia donde la página no pinta fondo. Es útil para insignias, adhesivos y tarjetas colocadas sobre otros diseños.
## Página completa o un solo elemento
Funciona mejor con un documento completo, incluido su bloque de estilos. Dibuja el HTML que pegas, no un sitio en vivo. Para capturar una página desde su dirección, usa la herramienta de captura de pantalla de sitios web.
Para un elemento, pega solo ese elemento y su CSS, y define el ancho y el alto para que coincidan. La API tiene una opción clip que recibe un rectángulo (x, y, width, height).
## Preguntas frecuentes
### ¿Qué tamaño tendrá la imagen?
La imagen mide el ancho por el alto en píxeles, multiplicado por la densidad de píxeles, que puede ser 1x, 2x o 3x. Con 2x, un área de 640 x 340 da una imagen de 1280 x 680 px. En la herramienta gratuita, la altura llega hasta 2000 px y el ancho va de 100 a 4000 px.
### ¿Cómo obtengo un fondo transparente?
Elige PNG y deja activada la opción de fondo transparente. La página no debe pintar su propio fondo en html ni en body. El JPEG no tiene transparencia.
### ¿El HTML puede cargar imágenes y fuentes externas?
Sí, las direcciones públicas http y https pueden cargarse durante el renderizado. Las direcciones privadas y locales se bloquean a propósito. Las data URL funcionan sin ninguna petición de red.
### ¿Se ejecuta JavaScript?
Sí. La imagen se captura después de que la página se haya cargado. La API tiene opciones de espera para las páginas que terminan más tarde.
### ¿Puedo capturar solo una parte de la página?
Sí, con la API, mediante la opción clip, que recibe un rectángulo (x, y, width, height). La herramienta gratuita captura toda el área de ventana que defines.
### ¿Se admite WebP?
Todavía no. La salida es PNG o JPEG.
### ¿Cuánto tiempo se guarda la imagen?
Los resultados de la herramienta web se eliminan tras 10 minutos. Descarga la imagen antes de ese plazo.
### ¿Cómo convierto HTML a PNG?
Pega el HTML y el CSS en el editor, define el ancho y el alto, elige PNG y haz clic en Crear imagen. Después descarga el archivo. Los resultados de la herramienta web se eliminan tras 10 minutos.
### ¿Puedo convertir un archivo HTML?
No directamente: la herramienta recibe HTML y CSS pegados, no la subida de un archivo. Abre el archivo en un editor de texto, copia el contenido y pégalo en el editor.
### ¿Por qué mi imagen sale borrosa?
La imagen se captura con la densidad de píxeles que elegiste. A 1x, cada píxel de CSS se convierte en un píxel de imagen, y puede verse suave en pantallas de alta densidad. Elige 2x o 3x para una imagen más nítida.
### ¿Puedo convertir una página web en vivo en una imagen?
No. La herramienta recibe HTML y CSS pegados. Para capturar una página web por su dirección, usa la herramienta de captura de pantalla de sitios web. Solo se cargan direcciones públicas http o https mientras se crea la imagen, y las direcciones privadas o locales no aparecen en ella.
### ¿Puedo convertir un solo elemento HTML en una imagen?
Sí. Pega ese elemento y su CSS, y define el ancho y el alto para que encajen. Con la API, renderiza la página completa y usa la opción clip para recortar un rectángulo.
### ¿Se muestran los caracteres chinos, japoneses y coreanos (CJK) y los emoji?
Sí, en la prueba del 2026-10-11. La prueba generó un PNG de una página con chino simplificado y tradicional, japonés, coreano y emoji. Cada carácter aparecía como texto o como emoji de color, no como un recuadro vacío. El servidor los dibuja con Noto Sans CJK y Noto Color Emoji. Para tu propia tipografía, cárgala con @font-face desde una URL pública o una data URL.
## Relacionados
- [Convertir HTML a PDF en línea](https://aiipworld.com/es/tools/html-a-pdf/index.md)
- [Convertir SVG a PNG en línea](https://aiipworld.com/es/tools/svg-a-png/index.md)
- [PNG a WebP: convierte tu imagen en línea](https://aiipworld.com/es/tools/png-a-webp/index.md)
- [WebP a PNG: convierte tu imagen WebP a PNG](https://aiipworld.com/es/tools/webp-a-png/index.md)
- [HTML a JPG: convierte tu código en una imagen](https://aiipworld.com/es/tools/html-a-jpg/index.md)
Página: https://aiipworld.com/es/tools/html-a-png/