Placeholder SVG o placeholder en un URL
El generador d’ximg.es serveix placeholders com a fitxers: https://ximg.es/600x400. És
el més còmode per maquetar, però cada imatge és una petició. Un SVG en línia va dins del mateix HTML o CSS: no fa cap
petició, pesa uns 300 bytes, s’escala sense perdre nitidesa i funciona sense connexió. És el millor per a prototips que
s’envien per correu, components d’un sistema de disseny o proves automàtiques.
El data URI va URL-encoded, no en Base64: amb SVG ocupa menys i continua sent llegible.
Què és un LQIP
Low Quality Image Placeholder: una versió diminuta de la imatge que es mostra mentre es carrega la bona. L’espai deixa de veure’s en blanc, l’usuari intueix el contingut i la pàgina sembla que es carrega abans. Les tres variants:
- Miniatura + CSS blur: una imatge de 20 px en WebP, d’uns centenars de bytes, ampliada i desenfocada amb CSS. La més semblant a l’original.
- SVG desenfocat: la mateixa miniatura dins d’un SVG amb
feGaussianBlur. Es pot posar com a fons de la mateixa<img>i la vora queda neta, sense l’halo que deixafilter: blur(). - Color mitjà: un sol color, el de tota la imatge feta la mitjana. Zero bytes extra; és el que fan servir Google Imatges o Pinterest. ximg.es calcula aquest mateix color per a cada foto del seu banc.
Com fer-lo servir
Posa el LQIP com a fons de la <img> (o del seu contenidor) i deixa width i
height perquè l’espai ja tingui la seva mida. Quan arriba la imatge, tapa el fons. No cal JavaScript.