Qué tamaño alcanza un archivo HTML autocontenido para una página típica

Un archivo HTML autocontenido típico pesa entre 1.4 y 1.6 MB sin JavaScript, y entre 2 MB y 2.3 MB si los scripts también van incrustados. Las imágenes causan casi todo ese peso. Ningún conjunto de datos público mide directamente los archivos autocontenidos, así que este artículo construye la estimación a partir de datos publicados sobre el peso de las páginas y señala dónde la aritmética es nuestra.

De dónde salen los números

La fuente es el capítulo sobre peso de página del Web Almanac 2025, que recoge las distribuciones de tamaño de HTTP Archive por tipo de recurso, separadas en escritorio y móvil. No capturamos ni medimos ningún archivo por nuestra cuenta. Tomamos las medianas publicadas, aplicamos el sobrecoste de Base64 y las sumamos. Cada cifra de abajo está citada de ese capítulo o marcada como derivada.

Importan dos límites. Primero, el Web Almanac informa la mediana de cada tipo de recurso por separado, y las medianas no se suman. La suma de cinco medianas es una cifra orientativa, no la mediana de las sumas. Segundo, las tablas del Almanac describen lo que descarga un navegador. Un archivo autocontenido incrusta lo que la página realmente usa, que puede ser menos (imágenes diferidas que nunca se cargan) o más (imágenes que quien guardó la página descargó de forma anticipada).

Aquí, un archivo autocontenido es un único archivo .html con su CSS, imágenes y fuentes incrustados, de modo que se abre sin ningún otro archivo a su lado. Si quieres crear uno, consulta cómo exportar HTML autocontenido desde Chrome.

Medianas y percentiles por tipo

Estos son los tamaños de respuesta del Web Almanac 2025 en KB. La columna p50 es la mediana.

Para el peso total de la página, la mediana del Almanac es 2,412 KB en escritorio y 2,164 KB en móvil. Solo las imágenes suponen 1,058 KB y 911 KB de eso, la pieza individual más grande.

La fila de HTML merece una mirada aparte. En una instantánea de HTTP Archive de enero de 2013 a enero de 2014, web.dev informó una mediana de 13 KB para el HTML. La mediana de 2025 ronda los 33 a 35 KB. Solo el marcado se ha multiplicado más o menos por tres, y sigue siendo la porción más pequeña de un archivo autocontenido.

Sobrecoste de Base64: un tercio más grande

Las imágenes y las fuentes son binarias. Para vivir dentro de un archivo HTML hay que escribirlas como texto, casi siempre como Base64 en una URL data:. El artículo de Wikipedia sobre el esquema data URI cifra el coste en aproximadamente un 33% más que los datos originales. Un JPEG de 300 KB se convierte en unos 400 KB de texto.

Incrustar no reduce nada. Cambia peticiones por bytes. El mismo artículo recomienda las URI de datos en Base64 solo cuando el servidor admite compresión HTTP o cuando el archivo incrustado pesa menos de 1 KB. Un archivo que envías por correo o guardas en local no recibe ayuda de la compresión del servidor, así que pagas el tercio completo.

El formato en sí no es el techo. MDN señala que los navegadores no están obligados a admitir una longitud máxima concreta, y que Chromium y Firefox limitan las URL data a 512 MB, mientras que Safari (WebKit) las limita a 2048 MB. Firefox 97 elevó su antiguo límite de 256 KB a 32 MB, y Firefox 136 lo elevó a 512 MB. Una página real nunca se acerca a esas cifras. Los límites prácticos son la transferencia del archivo, la memoria y lo que tarda un editor en abrirlo.

Una estimación a ojo de buen cubero

Esta es la aritmética con las medianas de 2025 de arriba. Las partes de texto (HTML, CSS) se quedan como están. Las partes binarias (imágenes, fuentes) se multiplican por 4/3 por el Base64. Es una derivación nuestra, no una medición.

Así que la respuesta al título es aproximadamente 1.4 a 1.6 MB sin scripts y 2.0 a 2.3 MB con ellos, para una página en la mediana en todos los ejes. Tómalo como un centro de masa, no como una predicción para tu página.

La dispersión es amplia. El percentil 90 de las imágenes es 6,856 KB en escritorio y 6,288 KB en móvil. Una página con tanto dato de imagen, incrustado como Base64, produce un archivo muy por encima de 8 MB solo por las imágenes (6,856 x 4/3 son unos 9,141 KB). En el otro extremo, el peso de imagen del percentil 10 es solo de 56 a 74 KB, de modo que una página ligera puede quedar por debajo de 200 KB.

Dónde se va el peso

Fíjate en la proporción, no en los totales. En escritorio, las imágenes y las fuentes suman unos 1,081 de 1,199 KB entre los cuatro tipos que no son scripts, alrededor del 90%. Al incrustarlas, esa cuota crece, porque el Base64 solo se aplica a ellas. El marcado y los estilos juntos son unos 118 KB, menos del 10% del archivo.

Por eso dos archivos autocontenidos pueden diferir en un orden de magnitud. Una página de marketing con cinco fotos de cabecera y una página de documentación solo de texto tienen casi el mismo presupuesto de HTML y CSS. Las fotos marcan la diferencia.

Los scripts son el otro factor de variación. La página de escritorio mediana envía 708 KB de JavaScript. Que un archivo guardado los incluya depende de cómo captures la página. Un guardado desde el navegador suele conservar los scripts. Una captura pensada para trabajo de diseño a menudo no los necesita. Guardar un archivo web de Safari es otra vía, con su propio perfil de tamaño.

Cómo mantener el archivo pequeño

Puedes recortar un archivo autocontenido sin tocar el diseño. Cada consejo se desprende de los números anteriores.

• Redimensiona las imágenes antes de incrustarlas. Las imágenes son alrededor del 90% de los bytes. Una foto que se muestra a 800 px de ancho no necesita un original de 3,000 px.
• Usa un formato comprimido. Recodifica las fotos como WebP o AVIF antes de que se conviertan en Base64, ya que el sobrecoste del 33% escala con el tamaño de partida.
• Incrusta solo recursos pequeños. La pauta de Wikipedia de menos de 1 KB es una línea razonable para los iconos. Los archivos mayores es mejor dejarlos como recursos separados si el formato lo permite.
• Elimina los scripts que no necesites. Con una mediana de 646 a 708 KB, JavaScript es el segundo bloque más grande.
• Reduce las fuentes a los glifos que uses. Las fuentes son pequeñas en la mediana (23 KB), pero el percentil 90 ronda los 80 KB.

¿Predice el tamaño los problemas de importación?

El tamaño y el comportamiento de la importación son preguntas distintas. UnHTML acepta como entrada un archivo .html autocontenido, y sus páginas no indican ningún límite de tamaño de archivo. El plugin gratuito limita las importaciones a 500 capas por página, y Pro no tiene límite de capas, a octubre de 2026. Las capas vienen de los elementos, no de los bytes, así que un archivo de 6 MB de fotos puede importarse con menos capas que uno de 300 KB de marcado denso.

Los archivos grandes siguen tardando más en cargarse y abrirse. Si una página tarda en importarse, comprueba primero el número de elementos y luego el tamaño del archivo. Para recuentos de capas y tasas de fallback medidos, consulta datos de recuentos de capas, tasas de fallback y sustitución de fuentes en la importación a Figma.

En resumen

Una página mediana guardada como un solo archivo pesa entre 1.4 y 1.6 MB sin scripts y entre 2.0 y 2.3 MB con ellos, según nuestra aritmética a partir del Web Almanac 2025. Las imágenes mandan en la cifra, el Base64 añade cerca de un tercio a cada recurso binario, y los navegadores no te pararán antes de 512 MB. Si tu archivo queda muy por encima de ese rango, mira primero las imágenes. Cuando quieras llevar una página guardada a Figma, empieza desde la página de inicio de UnHTML.