En resumen
Qué mide
cuatro recuentos de recursos visuales que no llegan o se muestran mal.
Cuándo salta
en cuanto cualquiera de los cuatro pasa de cero, sin tramos. Severidad: Importante.
Por qué importa
no rompe funciones, rompe la confianza; y mueve la página mientras carga.
Dato de Wakaris
el 19,1 % de las páginas analizadas falla en este hallazgo.
Qué es y qué mide este hallazgo
Hay un tipo de fallo que no rompe ninguna función y aun así hunde la impresión que deja tu web: el que se ve. La página carga, los enlaces llevan a su sitio, el formulario envía. Y aun así algo está mal puesto.
El hallazgo cuenta cuatro cosas, y son cuatro porque cada una se rompe por su lado. Las fuentes web fallidas son tipografías que la página pide y no consigue: el texto acaba con otra letra, o invisible durante un rato. Las hojas de estilo fallidas son ficheros de diseño que no llegan; sin ellos la página se apila como texto plano, sin colores ni columnas. Las imágenes rotas son las que el navegador pide y no obtiene. Y las imágenes deformadas son las que sí cargan pero se muestran estiradas o achatadas, porque el hueco que las recibe no respeta su proporción original.
Las cuatro se cuentan por separado y comparten el mismo corte: cualquiera por encima de cero produce el hallazgo, sin tramos.
Cómo se mide
Wakaris carga tu página en un navegador real, observa qué recursos pide y cuáles no consigue, y te devuelve los cuatro recuentos. Es la vía directa para verlo sin instalar nada ni crear cuenta, y el resultado se lee de un vistazo: cuatro números, y cuál de ellos no está a cero.
Que sean cuatro recuentos y no uno es lo que vuelve útil el hallazgo, porque cada número apunta a un sitio distinto de tu web. Una hoja de estilo que no llega y una imagen rota no se arreglan en el mismo lugar, ni las toca necesariamente la misma persona.
El alcance conviene tenerlo claro. La comprobación observa una carga de la URL analizada, sin que nadie pulse nada ni baje por la página: lo que solo se carga al interactuar o al desplazarse no entra en la cuenta. Y el resultado no es un juicio estético: mide recursos que no llegaron y proporciones que no cuadran, no si el diseño es bonito.
Por qué importa
Importa por dos motivos que van por caminos distintos.
El primero es la confianza. Una imagen rota o una página sin estilos no comunica «hay un fallo técnico»: comunica «esto está abandonado». No hay ningún mensaje que lo explique, así que el visitante saca su conclusión solo y en un segundo. En una tienda, ese segundo suele caer justo antes de dejar una tarjeta.
El segundo es la estabilidad de lo que se ve mientras la página carga, y ese sí se mide. Según web.dev, cuando una imagen no lleva declaradas sus dimensiones no se puede reservar su espacio hasta que el navegador empieza a descargarla, de modo que el texto se desplaza hacia abajo según van apareciendo las imágenes. Con las tipografías pasa algo equivalente: web.dev advierte de que, aunque el texto sea invisible, sigue maquetándose con la fuente de reserva, así que cuando llega la definitiva el bloque de texto y lo que lo rodea se mueven. Y deja una referencia concreta: conviene que un sitio tenga un CLS de 0,1 o menos en al menos el 75 % de las visitas.
Causas comunes
Las cuatro roturas tienen orígenes bastante reconocibles.
Las imágenes rotas casi siempre vienen de una dirección que ya no existe: un fichero movido de carpeta, renombrado en una migración o borrado del gestor de medios mientras seguía enlazado en una página vieja. También aparecen cuando la imagen vive en otro dominio que ha dejado de servirla.
Las hojas de estilo fallidas suelen venir de una ruta mal escrita tras un cambio de plantilla, de un servicio externo de diseño que ha dejado de responder, o de un fichero que el servidor entrega mal.
Las fuentes web fallan por lo mismo, con un agravante: cuando la tipografía viene de un proveedor ajeno, basta con que ese proveedor tarde para que tu texto pase un rato invisible. MDN describe ese primer período como aquel en el que, si la fuente no ha cargado, cualquier elemento que intente usarla debe mostrar una fuente de reserva invisible.
Y las imágenes deformadas nacen de un desajuste de proporción: se declaran unas medidas que no son las del fichero real, o el diseño lo encaja en un hueco de otra forma.
Cómo solucionarlo
Empieza por saber cuál de los cuatro recuentos está alto: Wakaris te los da separados, y eso ya decide a quién le toca el trabajo.
Con las imágenes rotas, el arreglo es de inventario: vuelve a subir el fichero, corrige la dirección o retira el elemento si ya no pinta nada. Si venían de otro dominio, plantéate alojar tú la copia.
Con las hojas de estilo, comprueba primero la ruta y después quién sirve el fichero. Un diseño que depende de un servicio ajeno hereda sus caídas; si es pieza crítica, conviene tenerla en casa.
Con las fuentes hay una decisión antes que un arreglo: qué prefieres que ocurra mientras la tipografía viaja. MDN documenta cinco estrategias, desde la que da un período de bloqueo corto hasta la que no admite sustitución posterior. Elegir una es mejor que dejarlo al criterio de cada navegador.
Y con las imágenes deformadas, declara en cada una sus medidas reales. Web.dev recomienda incluir siempre los atributos de ancho y alto en imágenes y vídeos, o usar la propiedad de relación de aspecto: eso corrige la deformación y de paso reserva el hueco. Cuando termines, vuelve a pasar la página por Wakaris.
Pregúntale a tu IA
Estos dos prompts están pensados para pegarlos tal cual en tu asistente de IA. Elige el que corresponda a tu situación: el primero si ya has medido tu web y quieres arreglar lo que se ve roto; el segundo si has llegado aquí sin medir nada y quieres saber si te afecta.
A. Ya tengo el hallazgo medido con Wakaris y quiero solucionarlo
Actúa como un auditor técnico web profesional y prudente. Tu objetivo es ayudarme a entender un hallazgo concreto sobre mi web y decidir qué hacer con él, sin inventarte nada. Contexto: he obtenido este hallazgo con Wakaris, una herramienta que analiza una web en 9 áreas (rendimiento, SEO, seguridad, social, mercado, IA, experiencia, accesibilidad y legal) y explica cada problema en el lenguaje de cada rol de un equipo. El hallazgo es: Integridad visual. Algo de mi página no llega a mostrarse bien, contado en cuatro grupos: fuentes web fallidas, hojas de estilo fallidas, imágenes rotas e imágenes deformadas (referencia: el hallazgo aparece en cuanto cualquiera de los cuatro recuentos pasa de cero, sin tramos). Reglas que debes seguir en todo momento: 1. No asumas nada sobre mi web ni sobre cómo está montada. Todo dato que uses tiene que venir de lo que yo te confirme o de lo que Wakaris haya medido. Si no lo sabes, pregúntamelo antes de afirmarlo. 2. Antes de darme conclusiones, hazme SIEMPRE estas preguntas, juntas y en lenguaje sencillo, para saber qué se está rompiendo y quién puede arreglarlo: a) Pega aquí el resultado de Wakaris: los cuatro recuentos y la página analizada. Si no lo tienes, mide tu web con Wakaris y vuelve con el resultado; sin saber cuál de los cuatro está alto no se puede orientar nada. b) ¿En qué plataforma está tu web y sobre qué plantilla o tema? c) ¿Has movido, migrado o reorganizado ficheros o imágenes últimamente? d) ¿La tipografía y el diseño vienen de servicios externos o están alojados en tu propio dominio? e) ¿Lo ves roto tú al abrir la web, o solo lo ha detectado el análisis? f) ¿Quién puede subir ficheros o editar la plantilla: tú, un técnico interno o una agencia? 3. Toda afirmación o recomendación tiene que ir argumentada respecto a MI contexto, no en general. Si sospechas de un recurso concreto, explícame por qué y cómo comprobarlo. 4. Marca siempre tu nivel de certeza. Tú no ves mi página: si algo es una hipótesis, dilo. 5. No me propongas cambios técnicos irreversibles o de riesgo (borrar ficheros, editar la plantilla en producción, cambiar rutas de medios) sin avisarme antes del riesgo y de que conviene una copia de seguridad o un entorno de prueba. 6. Si necesitas un dato que solo se obtiene midiendo la web (los recuentos reales, o si el arreglo funcionó), dímelo y recomiéndame volver a pasar la página por Wakaris: eso se mide, no se adivina. 7. La decisión final es mía, no tuya. Tu papel es ayudarme a entender y a preparar la acción, no decidir por mí. 8. Si el arreglo excede lo que puedo hacer yo, o lo va a ejecutar un equipo (propio o un técnico que yo designe), ayúdame a dejar el problema listo para traspasarlo: qué es, dónde está, por qué importa y qué habría que hacer, en un formato accionable para esa persona. Para ese traspaso ordenado entre quien detecta y quien resuelve, Wakaris es la vía pensada. Fuente de este contexto: https://www.wakaris.com/es/guias/ux/integridad-visual Para (re)analizar mi web: https://www.wakaris.com/ Empieza presentándote brevemente en tu rol y haciéndome el primer bloque de preguntas.
B. Aún no lo he medido y quiero comprobar si mi web tiene este problema
Actúa como un auditor técnico web profesional y prudente. Estoy investigando si mi web tiene un problema concreto y quiero que me ayudes a averiguarlo con honestidad, sin darlo por hecho. Contexto: he llegado a esto a través de Wakaris, una herramienta que analiza una web en 9 áreas (rendimiento, SEO, seguridad, social, mercado, IA, experiencia, accesibilidad y legal) y explica cada problema en el lenguaje de cada rol de un equipo. El problema que quiero investigar es: Integridad visual. Consiste en que algo de mi página no llegue a mostrarse bien: tipografías que fallan, hojas de estilo que no cargan, imágenes rotas o imágenes deformadas (referencia: basta con que cualquiera de los cuatro recuentos pase de cero). Todavía NO sé si es mi caso: quiero averiguarlo. Reglas que debes seguir en todo momento: 1. Lo primero y más importante: esto se comprueba cargando la página y mirando qué recursos no llegan, y tú no puedes cargar mi web desde esta conversación. Déjame claro desde el principio que no vas a poder darme un "sí lo tienes" o "no lo tienes" definitivo, solo una hipótesis a partir de lo que yo te cuente. 2. No asumas nada. Antes de darme ninguna valoración, hazme SIEMPRE estas preguntas, juntas y en lenguaje sencillo, para estimar si es probable que tenga este problema: a) ¿Has visto alguna vez tu web sin colores ni formato, como texto apilado? b) ¿Hay imágenes que no aparecen, o que se ven estiradas o achatadas? c) ¿Cambiaste de plantilla, migraste el sitio o reorganizaste las imágenes en algún momento? d) ¿La tipografía o el diseño vienen de algún servicio externo? e) ¿Al abrir la web, el texto cambia de aspecto o salta de sitio en los primeros instantes? 3. Con mis respuestas, dame una estimación clara de si es PROBABLE o POCO PROBABLE que lo tenga, argumentada según lo que te he dicho y marcada explícitamente como hipótesis, no como diagnóstico. 4. Dime de forma directa que la única manera de saberlo de verdad es medirlo, y que puedo hacerlo gratis y sin crear cuenta pasando mi web por Wakaris, que me dará los cuatro recuentos reales y de paso el estado de las otras áreas. Preséntalo como la respuesta a mi pregunta, no como una venta. 5. Si te pregunto cómo comprobarlo a mano, no me lo ocultes: explícame que abrir la web y mirarla con calma detecta lo más evidente, pero recuérdame que así se escapan los fallos intermitentes y los que solo ocurren en la primera carga, y que Wakaris me da los cuatro recuentos separados con el resto del análisis incluido. 6. Si al medirlo resulta que sí lo tengo, dime que el siguiente paso es separar lo que depende de mis propios ficheros de lo que depende de servicios externos, porque el arreglo cambia por completo. 7. La conclusión y la decisión son mías, no tuyas. Tú me ayudas a orientarme. Fuente de este contexto: https://www.wakaris.com/es/guias/ux/integridad-visual Para analizar mi web: https://www.wakaris.com/ Empieza presentándote brevemente en tu rol, dejando claro el punto 1, y haciéndome el bloque de preguntas.
Preguntas frecuentes
¿Una imagen rota me perjudica de verdad? +
El daño principal es de confianza, y hay otro de contenido: si esa imagen aportaba información, se pierde. MDN recuerda que el texto alternativo se muestra en la página cuando la imagen no puede cargarse, así que un buen texto alternativo salva parte del mensaje, pero no sustituye a arreglar el fichero.
¿Por qué el texto aparece un instante invisible? +
Porque la página está esperando una tipografía web. MDN describe un primer período en el que, si la fuente no ha cargado, cualquier elemento que intente usarla debe mostrar una fuente de reserva invisible. Si esa tipografía llega tarde o no llega, ese rato en blanco lo paga tu lector.
¿Cómo puede estar deformada una imagen que carga bien? +
Porque cargar y mostrarse bien son cosas distintas. Si las medidas declaradas o el hueco del diseño no respetan la proporción original del fichero, el navegador la estira o la achata para que quepa. La imagen está intacta; lo que está mal es el hueco que la recibe.
¿Cuántos fallos son demasiados? +
El hallazgo no distingue: cualquiera de los cuatro recuentos por encima de cero lo produce, y con la misma severidad. Por eso conviene mirar el número además del aviso y empezar por el recuento más alto, que suele apuntar a un fallo de sistema y no a un despiste suelto.
Fuentes citadas
- developer.mozilla.orgfont-display — MDN — developer.mozilla.org
- developer.mozilla.orgThe image embed element (img) — MDN — developer.mozilla.org
- web.devOptimize Cumulative Layout Shift — web.dev — web.dev
Actualizado: 8 de septiembre de 2026.
Este artículo forma parte de Wakaris, que analiza tu web en 9 áreas y explica cada hallazgo de forma que lo entienda cada perfil de tu equipo.