UltKit

Convertir HTML a PNG

Convierta una página web guardada, la exportación de un panel o la maqueta de un componente en un PNG donde cada letra y cada línea fina quedan exactamente como las dibujó el navegador. Elija el ancho de la ventana y el diseño se adapta a él.

Documento a imagen

o suelte aquí archivos DOC, DOCX, DOCM … ·

Máx. 95 MB por archivo· Hasta 20 archivos· Se borran a los 30 minutos

Salida

Los archivos se procesan en nuestros servidores y se borran a los 30 minutos.

Cómo usar esta herramienta

  1. 1

    Agregue el archivo HTML

    Suba archivos .html, .htm o .mhtml, hasta 20 por lote y de 95 MB cada uno. Una página guardada como un solo archivo MHTML lleva dentro sus imágenes y estilos.

  2. 2

    Fije el ancho de la ventana

    Ancho de la página HTML empieza en 1280 px. Use 390 px para un diseño de teléfono o 1920 px para un panel ancho. Convertir a ya está en PNG e Imágenes en Una sola imagen larga.

  3. 3

    Convierta a PNG

    Pulse Convertir a PNG. Active Fondo transparente en Opciones avanzadas si la página no tiene color de fondo propio y la imagen irá sobre otro diseño.

Respuesta

¿Cómo convierto HTML a PNG?

Suba el archivo .html o .mhtml, ponga en Ancho de la página HTML la pantalla que quiere imitar y pulse Convertir a PNG. Toda la página renderizada vuelve como una sola imagen sin pérdida.

Convertir HTML a PNG cuando el texto y las líneas deben quedar nítidos

PNG es Recomendación del W3C desde 1996 y usa compresión sin pérdida, así que los bordes suavizados del texto de 14 px, los bordes de tabla de un píxel y el código con resaltado de sintaxis sobreviven intactos. Por eso los desarrolladores adjuntan capturas PNG a los informes de errores y los diseñadores las comparten en las revisiones: nadie tiene que preguntarse si un borde borroso es un problema de CSS o un artefacto de compresión.

El precio es el peso. Una página de texto y colores planos se comprime bien; una página llena de fotos, no. Si la captura va a un chat o a un correo donde el peso importa más que el detalle nítido, el JPG es el archivo más ligero. Para documentación, notas de versión, paneles y guías de estilo, PNG es la opción más segura por defecto.

El ancho decide el diseño. HTML no tiene una página fija: el mismo archivo muestra un diseño de escritorio de tres columnas a 1280 px y una sola columna apilada a 390 px. El conversor maqueta la página al Ancho de la página HTML que usted indique, entre 320 y 3840 px, y después la captura de la primera línea al pie.

Anchos del conversor de HTML a PNG para pantallas habituales

195:422

390 × 844 px

Teléfono

Viewport CSS de muchos iPhone recientes; muestra el diseño móvil

41:59

820 × 1180 px

Tableta

iPad Air en vertical; muchos sitios cambian de punto de corte cerca de aquí

8:5

1280 × 800 px

Laptop

El ancho predeterminado de este conversor

16:9

1920 × 1080 px

Monitor Full HD

Paneles anchos y paneles de administración

HTML

HyperText Markup Language (HTML)

HTML es el lenguaje de marcado de la web, descrito por primera vez por Tim Berners-Lee a principios de la década de 1990 y mantenido hoy por el WHATWG como estándar vivo. Un archivo HTML describe encabezados, párrafos, enlaces, tablas, imágenes y formularios, mientras que el estilo suele provenir de CSS. Todos los navegadores lo representan, y también se usa para plantillas de correo electrónico y páginas web guardadas. Un archivo HTML suele depender de imágenes y hojas de estilo externas, por lo que puede verse incompleto si se mueve solo.

Compresión
–
Transparencia
–
Animación
–
Presentado en
1993 · Tim Berners-Lee; maintained by WHATWG
Convertidor de HTML

PNG

Portable Network Graphics

PNG es un formato ráster sin pérdida publicado en 1996 por el PNG Development Group y estandarizado después por el W3C y la ISO. Conserva cada píxel con exactitud, admite transparencia alfa completa y reproduce texto, bordes nítidos y colores planos sin artefactos. Esa precisión lo hace ideal para capturas de pantalla, logotipos, iconos y gráficos de interfaz. La contrapartida es el tamaño: una fotografía guardada como PNG suele ocupar varias veces más que la misma foto en JPEG o WebP. Todos los navegadores, sistemas operativos y editores abren archivos PNG.

Compresión
Sin pérdida
Transparencia
Sí
Animación
No
Presentado en
1996 · PNG Development Group
Convertidor de PNG

Se recurre a PNG cuando la página es sobre todo texto, código, tablas o partes de interfaz: los píxeles sin pérdida mantienen nítidas las líneas finas y la letra pequeña en documentación, informes de errores y revisiones de diseño donde se notarían los artefactos de JPG.

Convertir HTML a PNG sin perder estilos ni fuentes

Un archivo .html simple suele depender de cosas guardadas en otro lugar: una hoja de estilos en una carpeta css, imágenes en el servidor original, fuentes de un servicio tipográfico. Si faltan, la página queda en texto sin estilo con una tipografía predeterminada. Guardar la página en Chrome o Edge como Página web, un solo archivo produce un archivo .mhtml que mantiene juntos estilos e imágenes, y es lo más fiable para subir.

Las fuentes web siguen la misma regla. Una fuente declarada con @font-face solo se carga si se puede llegar a su archivo; una fuente que solo existe en su computadora se sustituye por otra parecida. Si la tipografía exacta importa, incruste la fuente o revise el resultado antes de enviarlo.

Un ancho fijo también permite comparar lado a lado las capturas semanales de un informe. Cuando el resultado debe conservar texto seleccionable para imprimir, el formato adecuado es HTML a PDF.

Preguntas sobre HTML a PNG

¿Pasar de HTML a PNG es mejor que una captura de pantalla de mi propio navegador?

Una captura del navegador solo recoge lo que cabe en su pantalla, salvo que use una herramienta de captura de página completa, y su ancho es el que tenga la ventana en ese momento. Aquí el ancho es un número que usted fija, así que dos capturas hechas con semanas de diferencia coinciden exactamente, y se incluye toda la página, de la primera línea al pie.

¿Por qué el PNG pesa varias veces más que la misma página en JPG?

PNG guarda cada píxel sin pérdida. El texto y los colores planos se comprimen bien así, pero las fotos, los degradados y las portadas de video no, de modo que una landing page llena de fotos puede dar un PNG pesado. Para esas páginas, HTML a JPG es la opción más ligera; para ejemplos de código, gráficos e interfaces, normalmente no compensa el desenfoque.

¿El PNG de una página HTML puede tener fondo transparente en lugar de blanco?

Sí. Active Fondo transparente. Solo se ve donde la propia página no fija un color de fondo, así que un sitio con el body en blanco seguirá saliendo blanco. Funciona mejor con un componente o una insignia sueltos, hechos como su propio archivo HTML.

¿El conversor de HTML a PNG ejecuta el JavaScript de la página?

El contenido que un script genera al abrir la página puede aparecer, pero lo que espera un clic, un desplazamiento o un inicio de sesión no aparecerá. Si un gráfico o una tabla solo existe tras una interacción, abra la página en el navegador, deje que termine y guárdela como un solo archivo antes de subirla.

¿Cómo hago una imagen solo de la parte superior de una página larga?

Cambie Imágenes a Una por página y ponga Páginas en Primera página. Obtendrá la primera sección del tamaño de una página en lugar de toda la longitud. Para recortarla a un encuadre exacto después, use la herramienta recortar imagen.