Image de substitution
Placeholder Image
Fabrique une image unie ou en dégradé à la taille demandée, avec ses dimensions inscrites dessus.
Une boîte grise exactement à la taille dont vous avez besoin, avec les dimensions écrites dessus — pour une mise en page qui attend de vraies photos. Elle sort sous forme de data URI SVG que vous pouvez coller directement dans du CSS, plus petit que n’importe quel PNG et qui ne coûte aucune requête.
'/%3E%3Ctext x='50%25' y='50%25' fill='%23ffffff' font-family='system-ui, sans-serif' font-size='79' text-anchor='middle' dominant-baseline='central'%3E1200×630%3C/text%3E%3C/svg%3E)
Data URI SVG
580 oEncodé en pourcents plutôt qu’en base64 : environ 25 % plus petit, et toujours lisible. Collez-le directement dans background-image: url("…")
Comment s’en servir
Fixez la taille
Les dimensions exactes en pixels de l’emplacement. Avec l’étiquette activée, elles sont dessinées sur l’image, et c’est ce qui rend évidente une boîte de mauvaise taille dans une mise en page.
Choisissez l’aplat, le dégradé ou le bruit
L’aplat et le dégradé restent du SVG. Le bruit doit être un PNG, parce qu’un champ aléatoire pixel par pixel en SVG ferait des mégaoctets de rectangles.
Copiez le data URI
Encodé en pourcentage plutôt qu’en Base64 : environ 25 % plus petit, et toujours lisible dans la feuille de style.
Questions fréquentes
Pourquoi la version SVG n’est-elle pas disponible pour le bruit ?
Parce que le SVG n’a pas de primitive aléatoire par pixel qui s’affiche à l’identique d’un moteur à l’autre. L’exprimer littéralement veut dire un rectangle par pixel, soit 120 000 éléments pour une boîte de 400 × 300.
Le bruit change-t-il à chaque fois ?
Non — il est issu d’une graine : les mêmes réglages donnent la même image. Un espace réservé qui changerait à chaque rendu rendrait inutile une suite de tests de régression visuelle.
Puis-je les utiliser en production ?
Le data URI, oui — il fait quelques centaines d’octets et ne renvoie jamais de 404, ce qu’on ne peut pas dire d’un service tiers d’images d’attente. Pensez seulement à les retirer, parce qu’un espace réservé qui a été livré est invisible en relecture de code.
À alimenter depuis
BlurHash et ThumbHash
BlurHash / ThumbHash
Encode une image en une courte chaîne BlurHash ou ThumbHash, à afficher pendant le chargement de la vraie image.
Générateur de faux texte
Lorem Ipsum Generator
Produit des paragraphes, des phrases ou des mots de remplissage en latin, en anglais, en coréen, en japonais ou en chinois.
Générateur d’avatar
Avatar Generator
Produit un identicon déterministe ou un avatar d’initiales à partir d’un nom ou d’une adresse e-mail, en SVG ou en PNG.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
BlurHash et ThumbHash
BlurHash / ThumbHash
Encode une image en une courte chaîne BlurHash ou ThumbHash, à afficher pendant le chargement de la vraie image.
Mise en situation sur appareil
Device Mockup
Place une capture d’écran dans un cadre de téléphone, de tablette, d’ordinateur portable ou de navigateur, avec fond et ombre.
Image vers Base64 ou data URI
Image to Base64 / Data URI
Encode une image en chaîne Base64 ou en data URI prête à coller dans du CSS, du HTML ou du JSON.
Supprimer l’arrière-plan
Background Remover
Détoure un fond uni ou d’une seule couleur dans l’espace OKLab et rend un PNG transparent, avec un pinceau pour reprendre les bords, sans envoi de fichier, tout dans votre navigateur.
Supprimer les données EXIF
EXIF Remover
Efface les données d’appareil, de GPS et de retouche d’une photo sans toucher à un seul pixel, sans envoi de fichier, tout dans votre navigateur.
Générateur de favicon
Favicon Generator
Produit le jeu complet — ICO, PNG, icône Apple touch, manifeste web — accompagné du HTML à coller dans votre page.