Què són width i height en una imatge web
Els atributs width i height en <img> indiquen les dimensions intrínseques del fitxer en píxels. No substitueixen el CSS: el navegador els fa servir per calcular la relació d’aspecte abans que la imatge acabi de descarregar-se i reservar espai a la pàgina.
En una web d’empresa, cada foto d’equip, icona ampliada o imatge de blog sense dimensions pot empènyer el text, el menú o el botó de contacte quan finalment carrega. Aquest moviment és un dels motius més habituals d’un CLS (Cumulative Layout Shift) alt i de visites que marxen abans de llegir la teva proposta.
Per què importen en webs corporatives
Les plantilles de WordPress, Shopify o constructors visuals sovint insereixen <img src="..."> sense width ni height, o amb mides de miniatura que no coincideixen amb el disseny final. En mòbil el hero “salta”, el formulari es mou i l’usuari prem l’enllaç equivocat.
Reservar espai amb dimensions correctes millora la percepció de qualitat, redueix la frustració en catàlegs i fitxes de servei, i complementa el lazy loading i srcset i sizes: pots carregar tard sense que el layout col·lapse.
Relació amb aspect-ratio i CSS modern
En CSS pots fixar aspect-ratio: 16 / 9 (o la proporció real del fitxer) juntament amb width: 100% i height: auto. Els atributs HTML width/height segueixen sent útils perquè el navegador coneix la proporció des del primer parseig de l’HTML, fins i tot abans d’aplicar fulls d’estil externs.
Patró recomanat el 2026:
<img src="foto.jpg" width="1600" height="900" alt="..." loading="lazy" decoding="async" style="max-width:100%;height:auto;">
Els números han de reflectir el fitxer real (o la variant que serveixes per defecte), no la mida visual en pantalla. El CSS escala; la proporció evita el salt.
Com evitar CLS sense deformar les imatges
L’error més comú és posar width/height del contenidor quan el JPEG té una altra proporció. El navegador reserva un rectangle incorrect i, en aplicar height: auto, el layout torna a moure’s.
Comprova sempre la proporció del fitxer font. Si retallas al CMS, actualitza els atributs o regenera la miniatura. Per imatges responsives, fes servir els valors de la variant per defecte del src principal.
width/height front a només CSS
Posar només width: 100% en CSS sense atributs HTML obliga el navegador a esperar a conèixer l’altura intrínseca. Amb atributs corrects, l’espai vertical queda fixat des de l’inici, especialment en llistats de notícies, graella de projectes i pàgines d’equip.
Casos pràctics en pàgines d’empresa
- Hero de serveis: width/height del banner principal; combina amb fetchpriority només a la imatge LCP.
- Logotips de clients: mateixa alçada reservada per a tots.
- Icones en landing: si substitueixes SVG per PNG, definir dimensions explícites.
- Contingut del blog: l’editor ha de conservar atributs en publicar.
Implementació pas a pas
- Audita imatges above-the-fold amb Lighthouse o PageSpeed.
- Extreu ample i alt reals (metadades o CMS).
- Afegeix width i height a l’HTML o al component.
- Aplica CSS responsiu:
max-width: 100%; height: auto;o contenidor amb aspect-ratio. - Després de canvis en WebP/AVIF, confirma la mateixa proporció.
- Torna a mesurar CLS en camp (CrUX) després de setmanes de trànsit.
Errors freqüents
- Copiar width/height d’escriptori en un retall mòbil diferent.
- Oblidar imatges de widgets (mapes, ressenyes, xat).
- Confiar que el constructor “ja optimitza” sense revisar l’HTML publicat.
Eines i comprovacions (2026)
Chrome DevTools → Performance amb “Experience” per vincular layout shifts a imatges. Search Console → Informe d’experiència a la pàgina. Validadors HTML assenyalen img sense dimensions.
Checklist abans de publicar canvis
- Totes les imatges del template principal tenen width i height coherents.
- El CSS no força alçades que trenquen la proporció.
- Les imatges lazy mantenen espai reservat.
- CLS en laboratori per sota de 0,1 en pàgines clau.
Conclusió
width i height són un detall petit al codi i un impacte gran a l’experiència: pàgines estables, més confiança i millor alineació amb Core Web Vitals. Si vols una auditoria de rendiment i maquetació al teu web corporatiu, a aatsoft podem prioritzar les pàgines que més converteixen sense sacrificar la identitat visual.
