En resum
Què es comprova
si hi ha imatges sobredimensionades, si el format és millorable i si la compressió deixa marge.
Quant hi ha en joc
a l’exemple de MDN, la mateixa foto a 800 píxels ocupa 128 KB i a 480 píxels només 63 KB.
Per què importa
qui entra des del mòbil es descarrega la versió d’escriptori i paga els seus bytes.
Severitat a Wakaris
Important. Falla al 90 % de les pàgines analitzades.
Què és i què comprova aquesta troballa
Aquesta troballa salta quan les imatges de la teva pàgina són millorables, i Wakaris ho mira per tres camins diferents que convé no confondre.
El primer és la mida: imatges sobredimensionades, és a dir, servides amb molts més píxels dels que ocupen a la pantalla. El navegador les descarrega senceres i després les encongeix.
El segon és el format: continuar fent servir un format antic quan n’hi ha d’altres que aconsegueixen el mateix resultat visual amb menys bytes. WebP, per exemple, va néixer com a format amb pèrdua i després va incorporar compressió sense pèrdua, transparència i animació, segons explica web.dev.
El tercer és la compressió: la mateixa imatge, en el mateix format, es pot desar amb un ajust més o menys agressiu. Una foto exportada a qualitat màxima pesa diverses vegades el que pesa la mateixa foto amb un ajust que a simple vista no es distingeix.
Com es comprova
Wakaris carrega la teva URL, localitza les imatges de la pàgina i revisa les tres coses: quant mesuren respecte a l’espai on es mostren, en quin format arriben i quant pesen per al que són. L’informe et diu quines imatges concretes són millorables i per quin dels tres motius, amb l’adreça de cadascuna.
Convé entendre el que aquesta comprovació no pot decidir per tu. Que una imatge sigui millorable no vol dir que es vegi malament, sinó que el mateix resultat s’hauria pogut aconseguir amb menys bytes. On és el punt d’equilibri entre pes i qualitat és una decisió editorial: en una botiga de joieria no és el mateix que en un blog.
La revisió és sobre la pàgina que li indiquis, no sobre tota la teva biblioteca d’imatges, de manera que la portada pot estar bé i una fitxa de producte, no.
Per què importa
Importa perquè les imatges són gairebé sempre la part més pesada del que es descarrega, i perquè el malbaratament recau sobre qui té pitjor connexió.
MDN ho diu sense embuts: no cal incrustar imatges tan grans si la pàgina es veu en una pantalla de mòbil, i fer-ho malbarata amplada de banda; qui navega des del mòbil no la vol gastar descarregant una imatge pensada per a escriptori quan una de petita ja li n’hi hauria prou. El seu exemple posa xifres a això: la mateixa fotografia ocupa 128 KB a 800 píxels d’amplada i 63 KB a 480, un estalvi de 65 KB en una sola imatge.
Multiplica-ho per les imatges d’una pàgina i veuràs per què això arrossega les mètriques de càrrega. A més, la imatge principal sol ser l’element més gran de la pantalla, el que marca el moment en què la pàgina sembla carregada.
Causes comunes
La causa més repetida és pujar la foto tal com surt de la càmera o del banc d’imatges. Un fitxer de diversos milers de píxels d’amplada acaba mostrant-se en un espai de quatre-cents, i el gestor de continguts no sempre serveix la versió reduïda.
La segona és la plantilla que no ofereix variants: una sola adreça d’imatge per a totes les pantalles, sense els atributs srcset i sizes que permeten al navegador triar la mida adequada.
La tercera és l’exportació a qualitat màxima, per costum o per por que es vegi malament, en imatges on la diferència no s’aprecia.
La quarta és la inèrcia de format: la biblioteca fa anys que és en JPEG i PNG i ningú no ha revisat si convé servir formats més eficients als navegadors que els admeten.
Com solucionar-ho
Comença per l’informe de Wakaris, que et diu quines imatges són millorables i per quin motiu; l’ordre per rendibilitat sol ser mida, compressió i format.
Per a la mida, la solució que descriu MDN són les imatges adaptables: diverses versions del mateix fitxer declarades a srcset amb la seva amplada real, i sizes indicant quin espai ocuparà la imatge en cada condició de pantalla. El navegador mira la mida de la pantalla, la densitat de píxels i l’espai disponible, i descarrega la versió que li correspon.
Per a la compressió, abaixa l’ajust de qualitat i compara a mida real fins a trobar el punt on deixa de notar-se. Sol haver-hi molt de marge abans que aparegui.
Per al format, serveix formats moderns amb alternativa per a qui no els admeti. AVIF, per exemple, l’admeten els navegadors principals des del 2020, el 2021 i el 2022 segons web.dev, un recorregut curt comparat amb JPEG o PNG. Després torna a passar la pàgina per Wakaris.
Taula amb els tres motius pels quals una imatge és millorable, la tècnica que corregeix cadascun i l’estalvi típic que s’obté
Brief per generar la imatge
Il·lustració editorial per a una guia tècnica de Wakaris. Tema: Taula amb els tres motius pels quals una imatge és millorable, la tècnica que corregeix cadascun i l’estalvi típic que s’obté. Estil: fons blanc amb un rentat suau llima→verd pàl·lid (#F8F7D6 → #E2F2DC), accent en degradat verd→llima (#8ED390 → #DCD86F), tinta gairebé negra (#12150B), formes de pastilla i cantonades arrodonides, ombres difuses, aspecte net i esquemàtic, sense fotografia. Format: 16:9, 1440 píxels d’amplada. Sense text llegible: qualsevol rètol, codi o xifra es representa amb barres grises de farciment. El significat el porta el peu de foto, no la imatge. Sense logotips reals ni marques de tercers. Sense persones reconeixibles. Etiquetes: taula, motius, quals, imatge, millorable, tècnica, corregeix, cadascun
Pregunta-li a la teva IA
Si vols aprofundir en el teu cas concret, copia un d’aquests dos prompts i enganxa’l a la IA que facis servir. Tria segons la teva situació.
Ja tinc la troballa mesurada amb Wakaris i vull solucionar-la
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: Optimització d’imatges. Alguna imatge de la meva pàgina és millorable per la seva mida (se serveix amb més píxels dels que es veuen), pel seu format (hi ha formats més eficients) o per la seva compressió (pesa més del necessari per a la qualitat que ofereix). Referència: la imatge s’hauria de servir a la mida en què es mostra, en un format eficient i amb una compressió que no es noti a simple vista. Enganxa aquí el resultat de Wakaris: quines imatges són millorables, per quin dels tres motius i a quina pàgina. Si no el tens, digues-m’ho i et diré com obtenir-lo abans de continuar. Regles que has de seguir en tot moment: 1. No donis res per suposat sobre la meva web. Qualsevol dada que facis servir ha de venir del que jo et confirmi o del que Wakaris hagi comprovat. 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 un llenguatge senzill, per saber si aquesta troballa m’afecta de debò i per on: a) Quin dels tres motius t’ha marcat l’informe: mida, format o compressió? Si en són diversos, digues-me quins i en quantes imatges. b) En quina plataforma és la teva web? (WordPress, Shopify, web a mida, una altra) c) Qui puja les imatges i des d’on: un tauler d’administració, un catàleg de productes, una importació automàtica? d) Les imatges són fotografies, il·lustracions, captures o logotips? L’arranjament no és el mateix. e) La qualitat d’imatge és un argument de venda a la teva web (moda, joieria, art, immobiliària)? f) La teva plataforma genera sola versions de mides diferents, o serveix sempre el fitxer original? g) Si cal aplicar un arranjament tècnic, el faries 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 em recomanes alguna cosa, explica’m per què s’aplica al meu cas. 4. Marca sempre el teu nivell de certesa. Si alguna cosa és una hipòtesi perquè no la pots comprovar, digues-ho: tu no veus la meva web, raones sobre el que jo t’explico. 5. Recorda’m que el punt d’equilibri entre pes i qualitat és una decisió meva, no una regla tècnica, i que convé comparar el resultat a mida real abans d’aplicar un canvi a tota la biblioteca. 6. Avisa’m abans de proposar-me res que reprocessi imatges de manera massiva o irreversible: convé una còpia dels originals i una prova amb unes quantes. 7. Si necessites una dada que només s’obté comprovant la web (quines imatges són millorables, amb quin pes, o si l’arranjament ha funcionat), digues-m’ho i recomana’m tornar a passar la pàgina per Wakaris: això es comprova, no s’endevina. 8. La decisió final és meva, no teva. Si l’arranjament supera el que puc fer jo, ajuda’m a deixar el problema a punt per traspassar-lo: què és, on és, per què importa i què caldria fer. Font d’aquesta troballa: https://www.wakaris.com/ca/guias/rendimiento/optimizacion-de-imagenes Per comprovar-ho o tornar-ho a comprovar: https://www.wakaris.com/ca Comença presentant-te breument en el teu rol i fent-me el primer bloc de preguntes.
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: he arribat a això 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: Optimització d’imatges. Consisteix en el fet que les imatges de la meva pàgina pesen més del necessari, perquè se serveixen amb més píxels dels que es veuen, perquè el format és millorable o perquè la compressió deixa marge. Encara NO sé si la meva web el té: ho vull esbrinar. Regles que has de seguir en tot moment: 1. El primer i més important: això es COMPROVA mesurant les imatges reals de la meva pàgina, i tu no les pots descarregar des d’aquesta conversa. Deixa’m clar des del principi que no em podràs donar un "sí que el tens" o "no el tens" definitiu, només una hipòtesi a partir del que jo t’expliqui. 2. No donis res per fet. Abans de donar-me cap valoració, fes-me SEMPRE aquestes preguntes, juntes i en un llenguatge senzill, per estimar si és probable que tingui el problema: a) Quan puges una foto a la teva web, la prepares abans o la puges tal com surt de la càmera, del mòbil o del banc d’imatges? b) Saps en quin format són les teves imatges? (JPEG, PNG, WebP, AVIF; o no ho sé) c) La teva plataforma genera versions de mides diferents per al mòbil, o serveix sempre el mateix fitxer? d) La teva web té moltes imatges grans: carrusels, galeries, fitxes de producte, capçaleres a pantalla completa? e) Notes que la web triga més al mòbil que a l’ordinador? f) En quina plataforma està? (WordPress, Shopify, web a mida, una altra; o no ho sé) 3. Amb les meves respostes, dona’m una estimació clara de si és PROBABLE o POC PROBABLE que el tingui, i de quin dels tres motius seria el sospitós, 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 veritat és comprovar-ho, i que ho puc fer gratis i sense crear cap compte passant la meva web per Wakaris, que em dirà quines imatges concretes són millorables i per quin motiu, i de passada l’estat de les altres àrees. 5. Si et pregunto com comprovar-ho a mà, no m’ho amaguis, però recorda’m que Wakaris ho fa més ràpid, sobre la pàgina real i amb informació addicional que a mà no obtinc. 6. Sigues honest amb l’abast: digues-me que "millorable" no vol dir que es vegi malament, i que on és l’equilibri entre pes i qualitat ho decideixo jo segons el que vengui la meva web. 7. La conclusió i la decisió són meves, no teves. Tu m’ajudes a orientar-me. Font d’aquesta troballa: https://www.wakaris.com/ca/guias/rendimiento/optimizacion-de-imagenes Per comprovar-ho: 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
Quant s’estalvia servint la imatge a la mida correcta? +
Depèn de la diferència, i sol ser molt. L’exemple de MDN és il·lustratiu: la mateixa fotografia ocupa 128 KB servida a 800 píxels d’amplada i 63 KB a 480 píxels, un estalvi de 65 KB en una sola imatge. Multiplica-ho per les imatges d’una galeria.
Què són srcset i sizes? +
Dos atributs de l’etiqueta d’imatge. A srcset hi declares diverses versions del fitxer amb la seva amplada real; a sizes, quin espai ocuparà la imatge en cada condició de pantalla. Amb això el navegador descarrega la versió que li convé en lloc de la més gran.
Puc passar totes les meves imatges a un format modern sense més? +
Convé fer-ho amb alternativa. AVIF, per exemple, l’admeten els navegadors principals des del 2020, el 2021 i el 2022 segons web.dev, un recorregut molt més curt que el de JPEG o PNG. Serveix el format nou a qui l’admeti i mantén una versió clàssica de reserva.
Si comprimeixo més, es notarà? +
Normalment no tan aviat com es creu. Formats com WebP combinen compressió amb pèrdua i sense pèrdua segons el cas, tal com descriu web.dev. La manera de decidir-ho és comparar l’original i la versió comprimida a mida real, a la pantalla on es veuran.
Fonts citades
- developer.mozilla.orgResponsive images, MDN Web Docs: el malbaratament d’amplada de banda en servir imatges d’escriptori al mòbil, l’exemple de 128 KB davant de 63 KB i com funcionen
srcsetisizes. - web.devWebP, web.dev: origen del format amb pèrdua i la incorporació posterior de compressió sense pèrdua, transparència i animació.
- web.devAVIF, web.dev: dates d’admissió als navegadors principals i la cautela davant dels formats garantits des de fa dècades.
Actualitzat: 7 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.