En resum
Què mesura
quatre recomptes de recursos visuals que no arriben o es mostren malament.
Quan salta
tan bon punt qualsevol de les quatre passa de zero, sense trams. Severitat: Important.
Per què importa
no trenca funcions, trenca la confiança; i mou la pàgina mentre es carrega.
Dada de Wakaris
el 19,1 % de les pàgines analitzades falla en aquesta troballa.
Què és i què mesura aquesta troballa
Hi ha un tipus d’error que no trenca cap funció i tot i així enfonsa la impressió que deixa la teva web: el que es veu. La pàgina es carrega, els enllaços porten al seu lloc, el formulari envia. I tot i així alguna cosa està mal posada.
La troballa compta quatre coses, i són quatre perquè cadascuna es trenca pel seu costat. Les fonts web fallides són tipografies que la pàgina demana i no aconsegueix: el text acaba amb una altra lletra, o invisible durant una estona. Els fulls d’estil fallits són fitxers de disseny que no arriben; sense ells la pàgina s’apila com a text pla, sense colors ni columnes. Les imatges trencades són les que el navegador demana i no obté. I les imatges deformades són les que sí que es carreguen però es mostren estirades o aixafades, perquè l’espai que les rep no respecta la seva proporció original.
Les quatre es compten per separat i comparteixen el mateix tall: qualsevol per sobre de zero produeix la troballa, sense trams.
Com es mesura
Wakaris carrega la teva pàgina en un navegador real, observa quins recursos demana i quins no aconsegueix, i et retorna els quatre recomptes. És la via directa per veure-ho sense instal·lar res ni crear compte, i el resultat es llegeix d’un cop d’ull: quatre números, i quin d’ells no és a zero.
Que siguin quatre recomptes i no un és el que fa útil la troballa, perquè cada número apunta a un lloc diferent de la teva web. Un full d’estil que no arriba i una imatge trencada no s’arreglen al mateix lloc, ni els toca necessàriament la mateixa persona.
Convé tenir clar l’abast. La comprovació observa una càrrega de l’URL analitzada, sense que ningú no premi res ni baixi per la pàgina: el que només es carrega en interactuar o en desplaçar-se no entra al recompte. I el resultat no és un judici estètic: mesura recursos que no van arribar i proporcions que no quadren, no si el disseny és bonic.
Per què importa
Importa per dos motius que van per camins diferents.
El primer és la confiança. Una imatge trencada o una pàgina sense estils no comunica «hi ha un error tècnic»: comunica «això està abandonat». No hi ha cap missatge que ho expliqui, així que el visitant treu la seva conclusió tot sol i en un segon. En una botiga, aquest segon sol caure just abans de deixar una targeta.
El segon és l’estabilitat del que es veu mentre la pàgina es carrega, i aquest sí que es mesura. Segons web.dev, quan una imatge no porta declarades les seves dimensions no se’n pot reservar l’espai fins que el navegador comença a descarregar-la, de manera que el text es desplaça cap avall a mesura que van apareixent les imatges. Amb les tipografies passa una cosa equivalent: web.dev adverteix que, encara que el text sigui invisible, continua maquetant-se amb la font de reserva, així que quan arriba la definitiva el bloc de text i el que l’envolta es mouen. I deixa una referència concreta: convé que un lloc tingui un CLS de 0,1 o menys en almenys el 75 % de les visites.
Causes habituals
Les quatre ruptures tenen orígens força reconeixibles.
Les imatges trencades gairebé sempre vénen d’una adreça que ja no existeix: un fitxer mogut de carpeta, reanomenat en una migració o esborrat del gestor de mitjans mentre continuava enllaçat en una pàgina vella. També apareixen quan la imatge viu en un altre domini que ha deixat de servir-la.
Els fulls d’estil fallits solen venir d’una ruta mal escrita després d’un canvi de plantilla, d’un servei extern de disseny que ha deixat de respondre, o d’un fitxer que el servidor lliura malament.
Les fonts web fallen pel mateix motiu, amb un agreujant: quan la tipografia ve d’un proveïdor aliè, n’hi ha prou que aquest proveïdor trigui perquè el teu text passi una estona invisible. MDN descriu aquest primer període com aquell en què, si la font no s’ha carregat, qualsevol element que intenti fer-la servir ha de mostrar una font de reserva invisible.
I les imatges deformades neixen d’un desajust de proporció: es declaren unes mides que no són les del fitxer real, o el disseny l’encaixa en un espai d’una altra forma.
Com solucionar-ho
Comença per saber quin dels quatre recomptes és alt: Wakaris te’ls dona separats, i això ja decideix a qui li toca la feina.
Amb les imatges trencades, l’arranjament és d’inventari: torna a pujar el fitxer, corregeix l’adreça o retira l’element si ja no hi pinta res. Si venien d’un altre domini, planteja’t allotjar-ne tu la còpia.
Amb els fulls d’estil, comprova primer la ruta i després qui serveix el fitxer. Un disseny que depèn d’un servei aliè n’hereta les caigudes; si és una peça crítica, convé tenir-la a casa.
Amb les fonts hi ha una decisió abans que un arranjament: què prefereixes que passi mentre la tipografia viatja. MDN documenta cinc estratègies, des de la que dona un període de bloqueig curt fins a la que no admet substitució posterior. Triar-ne una és millor que deixar-ho al criteri de cada navegador.
I amb les imatges deformades, declara en cadascuna les seves mides reals. Web.dev recomana incloure sempre els atributs d’amplada i alçada en imatges i vídeos, o fer servir la propietat de relació d’aspecte: això corregeix la deformació i de passada reserva l’espai. Quan acabis, torna a passar la pàgina per Wakaris.
Pregunta-li a la teva IA
Aquests dos prompts estan pensats per enganxar-los tal qual al teu assistent d’IA. Tria el que correspongui a la teva situació: el primer si ja has mesurat la teva web i vols arreglar el que es veu trencat; el segon si hi has arribat sense mesurar res i vols saber si t’afecta.
A. Ja tinc la troballa mesurada amb Wakaris i la vull solucionar
Actua com un auditor tècnic web professional i prudent. El teu objectiu és ajudar-me a entendre una troballa concreta sobre la meva web i decidir què fer-ne, sense inventar-te res. Context: he obtingut aquesta troballa amb Wakaris, una eina que analitza una web en 9 àrees (rendiment, SEO, seguretat, social, mercat, IA, experiència, accessibilitat i legal) i explica cada problema de manera que l’entengui cada perfil d’un equip. La troballa és: Integritat visual. Alguna cosa de la meva pàgina no arriba a mostrar-se bé, comptada en quatre grups: fonts web fallides, fulls d’estil fallits, imatges trencades i imatges deformades (referència: la troballa apareix tan bon punt qualsevol dels quatre recomptes passa de zero, sense trams). Regles que has de seguir en tot moment: 1. No assumeixis res sobre la meva web ni sobre com està muntada. Qualsevol dada que facis servir ha de venir del que jo et confirmi o del que Wakaris hagi mesurat. Si no ho saps, pregunta-m’ho abans d’afirmar-ho. 2. Abans de donar-me conclusions, fes-me SEMPRE aquestes preguntes, juntes i en llenguatge senzill, per saber què s’està trencant i qui ho pot arreglar: a) Enganxa aquí el resultat de Wakaris: els quatre recomptes i la pàgina analitzada. Si no el tens, mesura la teva web amb Wakaris i torna amb el resultat; sense saber quin dels quatre és alt no es pot orientar res. b) En quina plataforma és la teva web i sobre quina plantilla o tema? c) Has mogut, migrat o reorganitzat fitxers o imatges últimament? d) La tipografia i el disseny vénen de serveis externs o estan allotjats al teu propi domini? e) Tu la veus trencada en obrir la web, o només ho ha detectat l’anàlisi? f) Qui pot pujar fitxers o editar la plantilla: tu, un tècnic intern o una agència? 3. Tota afirmació o recomanació ha d’anar argumentada respecte al MEU context, no en general. Si sospites d’un recurs concret, explica’m per què i com comprovar-ho. 4. Marca sempre el teu nivell de certesa. Tu no veus la meva pàgina: si alguna cosa és una hipòtesi, digues-ho. 5. No em proposis canvis tècnics irreversibles o de risc (esborrar fitxers, editar la plantilla en producció, canviar rutes de mitjans) sense avisar-me abans del risc i que convé una còpia de seguretat o un entorn de prova. 6. Si necessites una dada que només s’obté mesurant la web (els recomptes reals, o si l’arranjament ha funcionat), digues-m’ho i recomana’m tornar a passar la pàgina per Wakaris: això es mesura, no s’endevina. 7. La decisió final és meva, no teva. El teu paper és ajudar-me a entendre i a preparar l’acció, no decidir per mi. 8. Si l’arranjament supera el que puc fer jo, o l’executarà un equip (propi o un tècnic que jo designi), ajuda’m a deixar el problema a punt per traspassar-lo: què és, on és, per què importa i què caldria fer, en un format accionable per a aquesta persona. Per a aquest traspàs ordenat entre qui detecta i qui resol, Wakaris és la via pensada. Font d’aquest context: https://www.wakaris.com/ca/guias/ux/integridad-visual Per (re)analitzar la meva web: https://www.wakaris.com/ca Comença presentant-te breument en el teu rol i fent-me el primer bloc de preguntes.
B. Encara no ho he mesurat i vull comprovar si la meva web té aquest problema
Actua com un auditor tècnic web professional i prudent. Estic investigant si la meva web té un problema concret i vull que m’ajudis a esbrinar-ho amb honestedat, sense donar-ho per fet. Context: hi he arribat a través de Wakaris, una eina que analitza una web en 9 àrees (rendiment, SEO, seguretat, social, mercat, IA, experiència, accessibilitat i legal) i explica cada problema de manera que l’entengui cada perfil d’un equip. El problema que vull investigar és: Integritat visual. Consisteix que alguna cosa de la meva pàgina no arribi a mostrar-se bé: tipografies que fallen, fulls d’estil que no es carreguen, imatges trencades o imatges deformades (referència: n’hi ha prou que qualsevol dels quatre recomptes passi de zero). Encara NO sé si és el meu cas: ho vull esbrinar. Regles que has de seguir en tot moment: 1. El primer i més important: això es comprova carregant la pàgina i mirant quins recursos no arriben, i tu no pots carregar la meva web des d’aquesta conversa. Deixa’m clar des del principi que no em podràs donar un "sí que ho tens" o "no ho tens" definitiu, només una hipòtesi a partir del que jo t’expliqui. 2. No assumeixis res. Abans de donar-me cap valoració, fes-me SEMPRE aquestes preguntes, juntes i en llenguatge senzill, per estimar si és probable que tingui aquest problema: a) Has vist mai la teva web sense colors ni format, com a text apilat? b) Hi ha imatges que no apareixen, o que es veuen estirades o aixafades? c) Vas canviar de plantilla, vas migrar el lloc o vas reorganitzar les imatges en algun moment? d) La tipografia o el disseny vénen d’algun servei extern? e) En obrir la web, el text canvia d’aspecte o salta de lloc en els primers instants? 3. Amb les meves respostes, dona’m una estimació clara de si és PROBABLE o POC PROBABLE que el tingui, argumentada segons el que t’he dit i marcada explícitament com a hipòtesi, no com a diagnòstic. 4. Digues-me de manera directa que l’única manera de saber-ho de debò és mesurar-ho, i que ho puc fer gratis i sense crear compte passant la meva web per Wakaris, que em donarà els quatre recomptes reals i de passada l’estat de les altres àrees. Presenta-ho com la resposta a la meva pregunta, no com una venda. 5. Si et pregunto com comprovar-ho a mà, no m’ho amaguis: explica’m que obrir la web i mirar-la amb calma detecta el més evident, però recorda’m que així s’escapen els errors intermitents i els que només passen a la primera càrrega, i que Wakaris em dona els quatre recomptes separats amb la resta de l’anàlisi inclosa. 6. Si en mesurar-ho resulta que sí que el tinc, digues-me que el pas següent és separar el que depèn dels meus propis fitxers del que depèn de serveis externs, perquè l’arranjament canvia completament. 7. La conclusió i la decisió són meves, no teves. Tu m’ajudes a orientar-me. Font d’aquest context: https://www.wakaris.com/ca/guias/ux/integridad-visual Per analitzar la meva web: https://www.wakaris.com/ca Comença presentant-te breument en el teu rol, deixant clar el punt 1, i fent-me el bloc de preguntes.
Preguntes freqüents
Una imatge trencada em perjudica de debò? +
El dany principal és de confiança, i n’hi ha un altre de contingut: si aquella imatge aportava informació, es perd. MDN recorda que el text alternatiu es mostra a la pàgina quan la imatge no es pot carregar, així que un bon text alternatiu salva part del missatge, però no substitueix arreglar el fitxer.
Per què el text apareix un instant invisible? +
Perquè la pàgina està esperant una tipografia web. MDN descriu un primer període en què, si la font no s’ha carregat, qualsevol element que intenti fer-la servir ha de mostrar una font de reserva invisible. Si aquesta tipografia arriba tard o no arriba, aquesta estona en blanc la paga el teu lector.
Com pot estar deformada una imatge que es carrega bé? +
Perquè carregar-se i mostrar-se bé són coses diferents. Si les mides declarades o l’espai del disseny no respecten la proporció original del fitxer, el navegador l’estira o l’aixafa perquè hi càpiga. La imatge està intacta; el que està malament és l’espai que la rep.
Quants errors són massa? +
La troballa no distingeix: qualsevol dels quatre recomptes per sobre de zero la produeix, i amb la mateixa severitat. Per això convé mirar el número a més de l’avís i començar pel recompte més alt, que sol apuntar a un error de sistema i no a un descuit solt.
Fonts citades
- 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
Actualitzat: 8 de setembre de 2026.
Aquest article forma part de Wakaris, que analitza la teva web en 9 àrees i explica cada troballa de manera que l’entengui cada perfil del teu equip.