L'atribut decoding en <img> indica al navegador si pot descodificar la imatge en paral·lel amb la resta de treball de la pàgina o si ho ha de fer de forma síncrona. És un detall petit de l'HTML, però en webs d'empresa amb moltes fotos de producte, equip o casos d'èxit pot marcar la diferència entre una primera interacció fluida i microcortes mentre el fil principal segueix ocupat.
A l'octubre de 2026, amb mètriques com INP i un LCP cada vegada més exigents, convé dominar no només el pes del fitxer (WebP/AVIF) sinó també quan el navegador converteix aquests bytes en píxels pintables.
Què fa decoding en la pràctica
Després de descarregar una imatge, el navegador l'ha de descodificar abans de pintar-la. Amb decoding="async" la descodificació pot fer-se fora del camí crític; amb decoding="sync" queda més lligada al moment del pintat. decoding="auto" deixa decidir el motor: vàlid per defecte, però en blocs repetits sota el plec sol ser més clar usar async de forma explícita.
En pàgines corporatives amb molt contingut, la descodificació compete amb JavaScript, fonts i scripts de tercers pel temps del fil principal — la mateixa pressió que mesures amb el Total Blocking Time (TBT).
Per què importa en webs corporatives
Les landings de serveis, els catàlegues i les pàgines d'equip acumulen desenes d'etiquetes <img>. Un mal moment de descodificació es nota en tirones en fer scroll, menús lents o formularis que responen tard — just quan es registren les mètriques d'interacció.
Combina decoding amb lazy loading, width/height i fetchpriority en la candidata a LCP: reserves espai, prioritzes el visible i descodificues la resta sense lluitar amb l'interacció de l'usuari.
async, sync i auto: quan usar cadascun
- decoding="async" — Ideal per galeries, cos del blog, avatars i logos del peu.
- decoding="sync" — Només després de proves en dispositius reals si async empitjora una seqüència curta above-the-fold; mai per defecte a tot el lloc.
- decoding="auto" — Acceptable si el CMS no permet editar HTML; substitueix per async en plantilles de llistat quan puguis.
Relació amb LCP, lazy loading i fetchpriority
No facis loading="lazy" a la imatge LCP. Aplica fetchpriority="high" quan procedeixi, dimensions correctes i un fitxer lleuger. En el hero, mesura: molts equips mantenen auto o async; si l'LCP empitjora, prova sense l'atribut o amb sync.
Patró habitual amb lazy loading:
<img src="..." width="1600" height="900" alt="..." loading="lazy" decoding="async" style="max-width:100%;height:auto;">
Encaixa amb srcset i sizes perquè cada breakpoint descodifiqui quan toca.
Implementació pas a pas
- Identifica l'element LCP en Lighthouse i tracta'l diferent de la resta d'imatges.
- Afegeix
decoding="async"en partials de targetes, blog i widgets. - Corregeix la sortida del CMS si elimina atributs en guardar.
- Torna a mesurar INP i LCP en mòbils de gamma mitjana.
- Documenta la regla per qui puja contingut des de màrqueting.
Errors freqüents
- Posar
asynca cegues a totes les imatges, inclòs el hero LCP. - Barrejar plantilles optimitzades amb blocs del CMS sense
decoding. - Confondre
loading(quan es descarrega) ambdecoding(com es descodifica). - Esperar miracles sense reduir el pes de fitxers enormes.
- Oblidar CLS: decoding no reserva espai al layout.
Eines i comprovacions (2026)
PageSpeed Insights, Lighthouse en mòbil, panell Performance de Chrome i Web Vitals a Search Console. Compara dues versions que només canviïn l'atribut decoding abans de desplegar a tot el lloc.
Checklist abans de publicar canvis
- Imatge LCP sense lazy loading.
- Llistats i blog amb
decoding="async"llevat d'excepció documentada. - Dimensions definides; formats moderns on l'hosting ho permeti (WebP/AVIF).
- Segona mesuració en camp després del desplegament.
Conclusió
decoding tanca el cercle de la pila d'imatges: format, mida, prioritat i, finalment, quan descodificar. En una web d'empresa, aquesta fluïdesa també comunica professionalitat.
Si necessites auditar el teu lloc o aplicar aquestes convencions en plantilles a mida, a aatsoft ajudem a alinear rendiment, SEO i disseny sense sacrificar la identitat visual.
