À propos de cet outil
Un espace réservé (placeholder) est ce qu'une page affiche l'instant avant que l'image réelle ait fini de se charger — une tache floue évoquant la photo à venir, ou simplement un rectangle de couleur unie — afin que la mise en page ne saute pas et que la page semble déjà vivante pendant que la vraie ressource est encore en chemin. Le style « photo floue » est souvent appelé LQIP (Low-Quality Image Placeholder) : on réduit la photo source à une poignée de pixels — 20 à 40 px sur le grand côté suffisent —, on l'adoucit éventuellement d'une touche de flou, puis on ré-encode ce minuscule résultat. Avec si peu de pixels, il y a très peu à encoder, si bien que le résultat pèse généralement de quelques centaines d'octets à quelques kilo-octets — assez petit pour être intégré directement comme une URI de données en base64 plutôt que récupéré comme un fichier séparé.
Intégrer l'espace réservé en tant qu'URI de données signifie qu'il voyage à l'intérieur du HTML ou du CSS même de la page — pas besoin d'un aller-retour réseau supplémentaire juste pour afficher quelque chose avant l'arrivée de la vraie photo. Étirez ce minuscule résultat légèrement flouté avec du CSS jusqu'à la taille d'affichage réelle de l'image, et il se lit comme un aperçu doux de la photo à venir ; c'est exactement l'astuce derrière l'effet de fondu au chargement sur des sites comme Medium et de nombreuses galeries de photos produit. Quand vous n'avez pas encore de photo source — un écran squelette, une maquette de mise en page approximative, ou un espace réservé pour un contenu que l'utilisateur n'a pas encore téléversé — passez au second mode pour générer à la place un espace réservé en couleur unie, en dégradé ou à rayures, à n'importe quelle taille en pixels, avec le même téléchargement instantané et la même URI de données copiable. Tout s'exécute localement dans votre navigateur ; rien n'est jamais téléversé.
Questions fréquentes
À quel point l'URI de données LQIP est-il "petit" ?
Une sortie typique aux dimensions minuscules par défaut (bien en dessous de 50px sur le côté le plus long) se situe quelque part entre quelques centaines d'octets et environ 1-2 Ko sous forme de chaîne base64 — assez petit pour être intégré directement en ligne dans votre HTML/CSS/JS sans ajouter de poids significatif à votre page, ce qui est tout l'intérêt de la technique LQIP : afficher QUELQUE CHOSE immédiatement pendant que la vraie image en taille réelle se charge en arrière-plan.
Dois-je utiliser le mode « À partir d'une photo » ou le mode « Uni/dégradé » ?
Utilisez « À partir d'une photo » lorsque vous avez déjà l'image réelle et voulez un espace réservé qui suggère visuellement ce qui va arriver (un aperçu flou du contenu réel) — cela offre aux utilisateurs une expérience de chargement plus fluide et informative. Utilisez « Uni/dégradé » lorsque vous avez besoin d'un espace réservé générique AVANT que l'image réelle ne soit connue ou prête (par ex. un état de chargement squelette pour une galerie dont les photos n'ont pas encore été choisies), ou voulez simplement quelque chose de plus simple et encore plus petit qu'un LQIP.