Placeholders LQIP i blur-up en imatges de la web de la teva empresa: com millorar la percepció de càrrega, reduir CLS i no penalitzar l'LCP

Quan una foto tarda a arribar, el visitant no només espera: interpreta que la web «va lenta» o «està incompleta». Els placeholders LQIP (Low Quality Image Placeholder) i la tècnica blur-up mostren primer una versió minúscula i borrosa de la imatge i després la substitueixen per l'arxiu definitiu. La transició transmet control i redueix el forat en blanc, especialment en catàlegs, notícies o casos d'èxit.

A finals d'octubre de 2026, si ja fas lazy loading, reserves espai amb aspect-ratio i vigiles l'LCP, els placeholders són el següent pas per polir percepció i CLS sense inflar el pes de la pàgina.

Què és un LQIP i en què es diferencia del blur-up

Un LQIP és una còpia molt comprimida de la mateixa imatge (sovint 20–40 px d'ample), incrustada o servida com arxiu separat. El navegador l'escala i, amb filter: blur(), l'usuari veu forma i color fins que arriba la versió nítida.

Blur-up és el patró d'experiència: mostrar el LQIP a pantalla completa i fer un fundit cap al WebP o JPEG final. No és un format; és com presentes el placeholder.

Per què importa en una web d'empresa

• Velocitat percebuda: la càrrega progressiva tolera millor que un rectangle buit que «salta».
• Mòbil: en 4G irregular, el placeholder confirma que el contingut ve.
• Marca: el gris genèric sembla plantilla sense acabar; el LQIP manté la paleta real.
• Responsive: combina amb srcset i sizes.

Com implementar-ho sense inflar l'HTML

Base64 inline

Zero peticions extra, però HTML més pesat—només per heroes i targetes destacades.

Arxiu LQIP estàtic

foto-lqip.jpg (2–8 KB) al costat de foto.jpg; canvies src en carregar. Escala millor amb CMS grans.

Blur-up amb dues capes CSS

.media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.media__lqip { filter: blur(20px); transform: scale(1.05); }
.media__full { opacity: 0; transition: opacity 400ms ease; }
.media.is-loaded .media__full { opacity: 1; }

LCP, lazy loading i decoding

Mai blur-up amb lazy loading a la imatge LCP. Carrega-la amb loading="eager" i fetchpriority="high" si cal.

Sí LQIP sota el plec: galeries, entrades relacionades, logos de clients. Afegeix decoding="async" en imatges no crítiques.

Flux de continguts

1. En pujar la foto, generar LQIP (màx. 32 px, qualitat 40–50).
2. Guardar dimensions i ruta LQIP al CMS.
3. Imprimir wrapper amb ratio fix i ambdues URL.
4. Verificar Lighthouse: l'LCP segueix sent el hero.

Errors freqüents

• Base64 enorme a cada targeta.
• Sense width/height o aspect-ratio.
• Mateix LQIP per variants srcset diferents.
• Transicions llargues en grafiles grans.
• alt incorrect en imatges decoratives.

Conclusió

Els LQIP i el blur-up no substitueixen la compressió ni el srcset correct, però converten l'espera tècnica en experiència cuidada. En una web d'empresa es nota en credibilitat de catàleg i paciència mòbil.

Si vols revisar catàleg o blog—LCP, lazy loading i placeholders—des d'aatsoft podem auditar el rendiment real i proposar canvis de plantilla sense perdre el disseny que ja funciona en vendes.