Serveix la mateixa imatge de 2400 px a un mòbil de 390 px i a un monitor 4K. El navegador l’escala, però l’usuari ja ha pagat el pes complet en dades i temps. Els atributs srcset i sizes permeten oferir diverses resolucions i triar la adequada segons l’amplada real de l’espai a pantalla, sense duplicar dissenys ni renunciar a la qualitat en escriptori.
A l’octubre de 2026, amb més trànsit mòbil que mai i mètriques com LCP i CLS al centre del SEO tècnic, dominar srcset ja no és opcional en webs d’empresa amb fotos de producte, equip o instal·lacions. T’expliquem com funcionen, com combinar-los amb formats moderns i quins errors evitar en el proper desplegament.
Què és srcset i quin problema resol
srcset és un atribut de <img> (i de <source> dins de <picture>) que llista diverses URL de la mateixa imatge a distintes amplades o densitats de píxel. El navegador tria una segons el viewport i la densitat del dispositiu (descriptors w) o segons x (1x, 2x, 3x).
En una web corporativa típica, la foto del hero pot ocupar el 100 % de l’amplada en mòbil i només el 50 % en escriptori dins d’un grid de dues columnes. Sense srcset, tothom descarrega el mateix fitxer gran. Amb srcset ben configurat, el mòbil pot rebre un JPEG de 800 px i l’escriptori un de 1600 px, amb estalvis de centenars de kilobytes per visita.
El paper de sizes: dir al navegador quant d’espai ocuparà la imatge
sizes complementa srcset. Indica, abans que el layout estigui complet, quina amplada tindrà la imatge en distints breakpoints. El navegador usa aquesta estimació per triar el candidat de srcset més eficient.
Exemple habitual en portada:
sizes="(max-width: 768px) 100vw, 50vw"
Vol dir: en pantalles fins a 768 px la imatge ocupa tota l’amplada del viewport; a partir d’aquí, la meitat. Si el teu CSS fa una altra cosa (per exemple 33 % en desktop), sizes ha de reflectir-ho o triaràs un fitxer massa gran o massa petit.
Regla pràctica: sizes ha de coincidir amb el CSS real, no amb un valor genèric copiat d’un tutorial.
Relació amb rendiment, LCP i dades mòbils
srcset no substitueix comprimir bé les imatges ni usar WebP o AVIF, però multiplica l’efecte: menys bytes en el recurs que sol ser el LCP en landings visuals.
Combina-ho amb:
- width i height en l’HTML per reservar espai i evitar CLS.
- fetchpriority="high" només en la variant LCP above the fold (fetchpriority).
- loading="lazy" en imatges below the fold (lazy loading), mai en la hero LCP.
- CDN si serveixes moltes variants des del mateix origen (CDN).
srcset amb w versus descriptor x (DPR)
Descriptor w (amplades): ideal quan la imatge canvia de mida en CSS segons breakpoint. Necessites sizes.
Descriptor x (1x, 2x, 3x): útil per icones o imatges de mida fixa en píxels (logos en retina). No requere sizes.
En banners responsive d’empresa, gairebé sempre usaràs 480w, 800w, 1200w, 1600w amb sizes d’acord al layout. En miniatures de blog amb amplada fixa de 400 px en CSS, un srcset 400w/800w amb sizes="400px" pot bastar.
picture, art direction i formats alternatius
Quan a més de la mida canvia el retall (mòbil vertical vs escriptori panoràmic), entra <picture> amb diversos <source media="..."> i un <img> fallback. És «art direction»: no només escalar, sinó una altra composició.
També pots oferir AVIF/WebP amb fallback JPEG:
<source type="image/avif" srcset="..."><source type="image/webp" srcset="..."><img src="fallback.jpg" srcset="..." sizes="..." alt="...">
L’ordre importa: el navegador usa el primer format que entén.
Casos pràctics en webs d’empresa
Hero de serveis. Tres o quatre amplades (768, 1200, 1600, 2000) i sizes que reflecteixin amplada completa en mòbil i columna en desktop. Una sola imatge amb fetchpriority high en el fallback img.
Fitxes de producte o catàleg. Miniatura 300 px en llistat: srcset 300w/600w, sizes="(max-width: 576px) 50vw, 300px". Imatge gran en detall amb amplades majors.
Blog i notícies. Imatge destacada dins l’article: sizes="(max-width: 768px) 100vw, 720px" si el contenidor de contingut té max-width ~720–800 px.
Equip i testimonis. Retrats en grid: evita pujar només 4000 px; genera variants i deixa que srcset reparteixi.
Implementació pas a pas
- Define en disseny l’amplada màxima de la imatge en cada breakpoint (coincide amb el teu disseny responsive).
- Exporta o genera variants (manual, build script o servei d’imatges dinàmiques).
- Escriu sizes amb media queries alineades al teu CSS.
- Construeix srcset amb les amplades reals de cada fitxer (el número w ha de ser l’amplada intrínseca).
- Afegeix alt descriptiu, width/height de la variant per defecte i prova en DevTools → Network amb throttling 4G.
- Mesura LCP abans i després en PageSpeed Insights i en camp si tens CrUX.
Exemple mínim:
<img src="/img/hero-1200.jpg" srcset="/img/hero-480.jpg 480w, /img/hero-800.jpg 800w, /img/hero-1200.jpg 1200w, /img/hero-1600.jpg 1600w" sizes="(max-width: 768px) 100vw, 50vw" alt="Equip de consultoria en oficina" width="1200" height="675" fetchpriority="high" decoding="async">
Errors freqüents amb srcset i sizes
- sizes="100vw" a tot quan la imatge només ocupa un 40 % del layout en desktop → descàrregues innecessàriament grans.
- Valors w que no coincideixen amb el fitxer real (marcar 1200w en un JPEG de 800 px) → el navegador tria malament.
- Oblidar l’atribut sizes amb descriptor w → el navegador assume 100vw i sol penalitzar mòbil.
- Massa variants sense CDN o sense caché → més fitxers que mantenir sense benefici clar; 3–5 amplades solen bastar.
- Lazy en la imatge LCP junt amb srcset complex → retarda la pintura principal.
- Confiar només en el CMS «responsive» sense revisar l’HTML generat → de vegades només redimensiona en servidor una única URL.
Eines i comprovacions (2026)
En Chrome DevTools, activa «Disable cache», emula mòbil i compara el fitxer descarregat en Network amb l’amplada de l’element en Layout. PageSpeed Insights assenyala imatges «oversized» quan el fitxer supera la mida mostrada.
Si fas servir WordPress, plugins d’optimització poden generar srcset automàticament a partir de mides registrades; en stacks custom (Laravel, headless), convé automatitzar en build o amb un servei d’imatges. El important és que l’HTML final sigui correcte, no només que existeixin fitxers al servidor.
Checklist abans de publicar canvis
- sizes alineat amb CSS en mòbil, tablet i escriptori.
- 3–5 amplades raonables; fitxers comprimits en WebP/AVIF quan sigui possible.
- width/height en la variant per defecte per CLS.
- Sense lazy loading en la imatge LCP; fetchpriority high si aplica.
- Prova en 4G i en pantalla retina (DPR 2x).
- Alt text únic i descriptiu en cada imatge de producte o equip.
Conclusió
srcset i sizes són la forma estàndard d’alinear pes d’imatge i qualitat visual en cada dispositiu. En webs d’empresa amb fotografia de marca forta, ben aplicats retallen segons de càrrega percebuda i milloren LCP sense canviar el disseny que ja tens.
Si vols auditar quines imatges de la teva portada o catàleg estan sobredimensionades i com generar variants sense duplicar treball editorial, a aatsoft revisem HTML, CMS i pipeline de mitjans amb focus en rendiment i conversió.
