crop_original Générateur d'Images Fictives star

Pourquoi les designers et les développeurs utilisent des images fictives

Bien avant que les vraies photos, illustrations ou visuels produits d'un site web ne soient prêts, quelqu'un doit tout de même voir à quoi ressemble la page une fois les images en place. Une mise en page construite entièrement avec des boîtes grises vides ou des icônes d'image manquante est trompeuse — les marges, les ratios d'aspect et la façon dont le texte s'enroule autour d'une image se comportent tous différemment une fois qu'un élément occupe réellement cet espace. Une image fictive résout ce problème en tenant lieu du futur élément : elle a la bonne largeur et la bonne hauteur, se trouve au bon endroit dans la grille, et permet à un designer ou un développeur de juger si la mise en page fonctionne, sans que le contenu final doive déjà exister. Le contenu de l'image fictive — sa couleur, son étiquette — est délibérément sans importance ; ce qui compte, c'est que ses dimensions et son ratio d'aspect correspondent à ce que sera l'image réelle.

C'est pourquoi les services populaires d'images fictives fonctionnent traditionnellement en encodant la taille directement dans une URL, par exemple en demandant une image de 800×600 et en recevant en retour un rectangle gris avec « 800 × 600 » inscrit dessus. Cette taille imprimée est elle-même utile : elle permet à quiconque jette un œil à la maquette de confirmer instantanément que l'emplacement de l'image a bien la dimension prévue, sans avoir à inspecter le HTML. Cet outil suit la même convention — laissez le champ de texte vide et il étiquette automatiquement le rectangle avec sa propre largeur et hauteur, ou saisissez un texte personnalisé pour prévisualiser une légende, un nom de marque fictif, ou tout autre élément devant tenir dans cette boîte.

Pourquoi le SVG peut être un meilleur format d'image fictive que le PNG

Une image fictive PNG est une grille de pixels : un rectangle uni de 800×600 avec du texte doit malgré tout stocker une information de couleur pour chacun des 480 000 pixels, même si la grande majorité d'entre eux partage une couleur uniforme. Une image fictive SVG, à l'inverse, n'est pas composée de pixels du tout — c'est un court bloc de texte décrivant des formes : « dessine un rectangle de cette largeur et cette hauteur, rempli de cette couleur, puis dessine ce texte centré à l'intérieur. » Pour une image fictive simple, couleur unie plus texte, comme celles que crée cet outil, cette description ne pèse typiquement que quelques centaines d'octets, bien moins que le PNG équivalent. Le SVG a un second avantage encore plus important pour des images fictives utilisées dans une mise en page responsive : parce qu'il est défini par des instructions mathématiques de forme plutôt que par une grille de pixels fixe, il peut être agrandi ou réduit à n'importe quelle taille sans perte de qualité ni pixellisation, alors qu'un PNG étiré au-delà de sa résolution native devient visiblement flou.

Les deux formats sont générés ici de la même façon : un rectangle est dessiné et rempli avec la couleur d'arrière-plan choisie, et le texte de l'étiquette est centré à l'intérieur à la fois horizontalement et verticalement, avec une taille mise à l'échelle proportionnellement aux dimensions de la boîte afin qu'une petite image fictive ne soit pas écrasée par un texte surdimensionné. La version PNG est rendue sur un élément canvas HTML5 et exportée avec canvas.toDataURL() ; la version SVG est construite directement sous forme de chaîne XML contenant un élément <rect> et un élément <text>, puis téléchargée comme fichier. Contrairement aux services d'images fictives qui récupèrent une image depuis une URL distante — une véritable requête réseau à chaque chargement de page —, tout se passe ici localement : aucune requête ne quitte jamais le navigateur, il n'y a donc rien qui puisse échouer si ce service externe tombe en panne, ni aucune limite de taille imposée par le serveur de quelqu'un d'autre.