Quan una imatge encara s'està descarregant, el visitant no veu un disseny acabat: veu salts i una web que sembla a mitges. Els placeholders de color dominant reserven l'espai amb el to principal de la foto abans que arribi l'arxiu. És una tècnica lleugera, compatible amb gairebé qualsevol stack, i encaixa bé amb el CLS i la percepció de velocitat.
En aquest article veuràs què és el color dominant, com obtenir-lo, on aplicar-lo en una web d'empresa i quins errors evitar per no empitjorar el LCP ni l'accessibilitat.
Què és un placeholder de color dominant
És un fons sòlid (o degradat molt suau) que ocupa el mateix rectangle que la imatge final. Sol calcular-se a partir del color més representatiu de la foto: el to que l'ull percep mentre la imatge encara no ha carregat.
A diferència d'un placeholder LQIP o blur-up, aquí no cal generar una miniatura borrosa: n'hi ha prou amb un valor CSS (background-color) al contenidor. Menys bytes, menys complexitat al build.
L'objectiu no és decorar: és reservar espai i donar continuïtat visual fins que apareix la imatge real.
Per què importa en una web d'empresa
A les webs corporatives les imatges solen ser pesades: heroes de serveis, fotos d'equip, captures de projectes. Si no reserves alçada i color:
- El text salta quan entra la foto (pitjor senyal de qualitat i pitjor CLS).
- L'usuari interpreta la pàgina com a lenta encara que el servidor respongui bé.
- En mòbil, amb xarxes variables, l'efecte es multiplica.
Combinar color dominant amb width i height i aspect-ratio cobreix la major part dels salts de layout en galeries, cards de blog i capçaleres.
Com obtenir el color dominant
Hi ha tres enfocaments habituals en projectes reals:
- Manual al CMS. L'editor tria un color d'accent en pujar la imatge. Funciona bé amb pocs actius i control editorial estricte.
- Pipeline en build o en pujar. Un script analitza la imatge (histograma, k-means simplificat o APIs del CDN) i desa l'hex en metadades.
- Plataforma/CDN. Alguns serveis d'imatge retornen el color dominant amb les variants responsive; útil si ja fas servir CDN.
Per a la majoria de pimes, un valor aproximat n'hi ha prou: no cal precisió de laboratori. L'important és que el to sigui coherent amb la foto i no un gris genèric que desentoni amb la teva marca.
On aplicar-lo en HTML i CSS
Patró recomanat per a imatges de contingut:
- Contenidor amb
aspect-ratioibackground-color: #…del color dominant. - Imatge amb
width,height,object-fit: coveriloading="lazy"fora del LCP. - Transició opcional d'opacitat en carregar per suavitzar el canvi.
A la imatge LCP (hero), evita retardar la càrrega amb efectes pesats: el color de fons sí; animacions llargues no. Si fas servir fetchpriority="high" al hero, mantén el placeholder estàtic.
Color dominant vs LQIP: quan usar cadascun
Color dominant guanya quan busques simplicitat, poc manteniment i bon CLS amb cost gairebé zero. LQIP/blur-up aporta més “màgia” visual en portfolios creatius o botigues amb moltes fotos de producte, a canvi de generar i servir miniatures extra.
En molts llocs corporatius la combinació funciona: color dominant en llistats i cards; LQIP només al hero principal o a la fitxa de producte estrella.
Errors freqüents
- Gris universal (#eee) a tot arreu. Redueix salts però no millora la percepció; sembla plantilla sense acabar.
- Color massa saturat que no coincideix amb la foto. El “flash” en carregar desentona més que un buit gris.
- Oblidar reservar dimensions. El color no evita CLS si no fixes ratio o alçada.
- Lazy loading al hero LCP. Revisa lazy loading i prioritats.
- Contrast insuficient amb text superposat. Si poses titular sobre el placeholder, verifica contrast WCAG abans que carregui la imatge.
Checklist ràpid abans de publicar
- Cada imatge above-the-fold té ratio i color de reserva?
- El hero LCP carrega sense lazy i amb prioritat adequada?
- Has provat en 3G simulat i en mòbil real?
- El color dominant està documentat al CMS per a futures substitucions?
- Mesures CLS a Search Console o Lighthouse després del canvi?
Conclusió
Els placeholders de color dominant són un detall petit amb impacte desproporcionat en confiança i mètriques d'estabilitat visual. No substitueixen optimitzar pes (optimització d'imatges) ni un bon alt, però tanquen la bretxa entre “pàgina buida” i “contingut a punt”.
Si vols auditar com carreguen les imatges de la teva web corporativa —des del hero fins al blog— a aatsoft podem revisar CLS, LCP i el flux editorial d'actius amb tu.
