Placeholder SVG ou placeholder par URL
Le générateur ximg.es sert les placeholders sous forme de fichiers : https://ximg.es/600x400.
C’est le plus pratique pendant la maquette, mais chaque image est une requête. Un SVG intégré se place dans le HTML ou le
CSS lui-même : aucune requête, environ 300 octets, une netteté parfaite à toutes les tailles et un fonctionnement hors
ligne. Idéal pour des prototypes envoyés par e-mail, des composants de design system ou des tests automatisés.
Le data URI est URL-encoded, et non en Base64 : avec du SVG, il est plus léger et reste lisible.
Qu’est-ce qu’un LQIP
Low Quality Image Placeholder : une version minuscule de l’image, affichée pendant le chargement de la vraie. L’emplacement ne paraît plus blanc, l’utilisateur devine le contenu et la page semble plus rapide. Les trois variantes :
- Miniature + flou CSS : une image de 20 px en WebP, de quelques centaines d’octets, agrandie et floutée en CSS. La plus proche de l’original.
- SVG flouté : la même miniature dans un SVG avec
feGaussianBlur. Elle peut servir de fond à l’<img>elle-même, avec un bord net, sans le halo que laissefilter: blur(). - Couleur moyenne : une seule couleur, la moyenne de toute l’image. Zéro octet de plus ; c’est ce qu’utilisent Google Images et Pinterest. ximg.es calcule cette même couleur pour chaque photo de sa banque.
Comment l’utiliser
Placez le LQIP en fond de l’<img> (ou de son conteneur) et gardez width et
height pour que l’emplacement ait déjà sa taille. Quand l’image arrive, elle recouvre le fond. Aucun
JavaScript n’est nécessaire.