L'element <picture> permet servir versions diferents de la mateixa imatge segons l'amplada de pantalla, la densitat de píxels o el suport de formats moderns. En una web d'empresa no és un detall tècnic: és l'eina per art direction (retallar diferent en mòbil i escriptori), combinar WebP i AVIF amb un JPEG de recanvi i evitar que el visitant descarregui un hero de 2400 px quan el mòbil només necessita 800.
A l'octubre de 2026, quan ja domines srcset i sizes en <img>, el següent pas és decidir quan cal picture i quan n'hi ha prou amb un img ben configurat.
Què aporta picture respecte a un img amb srcset
Amb <img srcset sizes> tries resolucions del mateix retall escalat proporcionalment. Amb <picture> pots canviar el encuadrament, la relació d'aspecte o fins i tot el format segons condicions en <source>:
- Art direction — Hero en escriptori amb equip a l'oficina; en mòbil, primer pla del producte.
- Formats per navegador — AVIF/WebP en
sourcei JPEG enimgcom a recanvi universal. - Media queries en HTML — Fonts distintes amb
media="(max-width: 767px)"sense dependre només de CSS.
Si totes les variants són el mateix encuadrament escalat, segueix amb srcset; si el disseny canvia entre breakpoints, picture sol ser l'opció correcta.
Estructura mínima que funciona en producció
Patró habitual en landings corporatives:
<picture>
<source type="image/avif" srcset="hero-mobile.avif 800w, hero-desktop.avif 1600w" media="(max-width: 767px)">
<source type="image/webp" srcset="hero-mobile.webp 800w, hero-desktop.webp 1600w">
<img src="hero-fallback.jpg" alt="Descripció concreta" width="1600" height="900" fetchpriority="high" decoding="async">
</picture>
L'etiqueta <img> interior continua definint alt, dimensions i, sovint, el que mesura Lighthouse per l'LCP. Mantén width i height coherents amb el fallback per no empitjorar el CLS.
Quan usar-lo en webs d'empresa (i quan no)
Sí convé picture en: pàgina d'inici, fitxes de producte premium, casos d'èxit amb foto protagonista, capçaleres de serveis i campanyes estacionals on màrqueting demana encuadraments diferents.
Probablement no cal en: icones, logos en SVG, miniatures de blog uniformes o galeries on només canvia la mida. Aquí n'hi ha prou amb optimització de pes i lazy loading.
Regla pràctica: mateixa imatge escalada → img + srcset; encuadrament diferent → picture.
Formats, pes i CDN
Encadena fonts de dalt a baix: AVIF (menor pes), WebP, JPEG/PNG de recanvi. Genera els fitxers en el flux de disseny o amb un build estàtic; evita servir només AVIF sense recanvi si la teva audiència B2B encara inclou entorns corporatius restrictius.
Si fas servir CDN, assegura't que respecta type i no reescriu URLs de manera que trenqui les variants. Comprova també que la memòria cau no barregi respostes entre formats.
Rendiment: LCP, lazy loading i fetchpriority
La imatge LCP no ha d'anar amb loading="lazy". En el hero amb picture, posa fetchpriority="high" en el img interior quan procedeixi, com en l'article sobre fetchpriority. La resta de blocs picture sota el plec poden usar lazy + decoding="async".
Mesura en mòbil real: de vegades un picture amb massa fonts obliga el navegador a avaluar media queries abans de descarregar; simplifica fonts redundants.
Errors freqüents en plantilles i CMS
- Oblidar el img final — Sense recanvi ni alt accessible.
- Alt genèric — "imatge hero" no descriu; usa context de negoci.
- width/height d'escriptori en mòbil — Provoca salts; alinea amb el fallback visible.
- Duplicar picture i background-image en CSS — Doble descàrrega i LCP confús.
- Sources sense type — El navegador pot triar mal; declara
type="image/webp", etc.
Checklist abans de publicar
- El retall mòbil aporta valor respecte a escalar l'escriptori?
- Hi ha JPEG/PNG de recanvi en el img?
- Alt, width i height estan en el img interior?
- El hero queda exclòs del lazy loading?
- Has provat en Safari, Chrome i un dispositiu iOS recent?
Conclusió
<picture> no substitueix una bona estratègia d'imatges: la complementa quan el disseny responsive exige més que redimensionar. En webs d'empresa, usar-lo amb criteri millora l'experiència en mòbil, redueix pes amb formats moderns i manté compatibilitat — sempre que el marcatge sigui net i mesuris l'impacte en LCP i CLS.
Vols auditar com serveixes les imatges clau del teu lloc? A aatsoft revisem heroes, catàleg i plantilles per alinear disseny, rendiment i SEO multilingüe.
