BrowserTools
Accueil / Images / Générateur d'images de remplacement, créez des images factices dans votre navigateur

Générateur d'images de remplacement, créez des images factices dans votre navigateur

Générez des images de remplacement entièrement dans votre navigateur. Définissez la taille, les couleurs, le texte et le format (PNG, JPEG, WebP ou SVG), puis téléchargez ou copiez une data URI.

Maintenu par BrowserTools

Chargement de Générateur d'images de remplacement, créez des images factices dans votre navigateur… Si rien ne se passe, activez JavaScript.

Une image de remplacement (placeholder) est un visuel provisoire utilisé pendant la conception ou le développement d'une page, avant que les vraies photos et illustrations ne soient prêtes. Ce générateur les crée instantanément et entièrement dans votre navigateur : choisissez une largeur et une hauteur (de 1 à 4000 pixels, avec des préréglages en un clic pour les tailles courantes comme 1920×1080 ou 1200×630), sélectionnez une couleur de fond et une couleur de texte, saisissez éventuellement votre propre libellé, et téléchargez le résultat en PNG, JPEG, WebP ou SVG. Par défaut, l'image est étiquetée avec ses propres dimensions, la convention sur laquelle les développeurs s'appuient pour repérer les emplacements d'une maquette d'un coup d'œil.

Questions fréquentes

À quoi sert une image de remplacement ?
Les images de remplacement réservent l'espace dans une mise en page avant que le visuel final n'existe. Les designers les glissent dans les wireframes et les maquettes, les développeurs les utilisent pour tester les emplacements d'images, le comportement responsive et les gabarits de CMS, et les testeurs se servent de factices aux dimensions exactes pour vérifier la logique de recadrage et de ratio. Étiqueter l'image avec ses propres dimensions rend chaque emplacement identifiable d'un coup d'œil.
Cet outil contacte-t-il un service de placeholder comme placehold.co ?
Non. Tout est généré localement dans votre navigateur à l'aide de l'API canvas ou de balisage SVG en ligne. Il n'y a aucune requête réseau, aucun service externe, aucune limite de débit ni aucune dépendance susceptible de tomber en panne. Il fonctionne hors ligne et ne voit ni ne stocke jamais rien de ce que vous générez.
Quel format de sortie choisir ?
Le SVG est généralement le meilleur pour les placeholders : il est minuscule, s'adapte parfaitement à n'importe quelle résolution et peut être collé sous forme de code. Choisissez le PNG quand un outil de votre chaîne exige un fichier matriciel, le JPEG quand vous voulez le fichier matriciel le plus léger aux grandes tailles de type photo, et le WebP pour les chaînes modernes qui le prennent en charge. Les quatre sont générés localement.
Qu'est-ce qu'une data URI et quand l'utiliser ?
Une data URI intègre l'image entière directement dans le HTML ou le CSS sous forme de chaîne base64 (ou de SVG encodé en URL), par exemple src="data:image/png;base64,...". C'est parfait pour les prototypes rapides et les démos en un seul fichier, car il n'y a aucun asset séparé à héberger. Évitez les énormes data URI en production, car elles ne peuvent pas être mises en cache séparément et gonflent le document.
Pourquoi l'outil m'avertit-il que ma data URI est volumineuse ?
L'encodage base64 rend les données binaires environ 33 % plus lourdes que le fichier lui-même, et toute la chaîne vit dans votre HTML ou votre CSS. Un PNG de 4000×4000 peut facilement produire une URI de plusieurs mégaoctets qui ralentit les éditeurs et les chargements de page. L'avertissement s'affiche pour que vous puissiez passer à un fichier téléchargé ou à un SVG, radicalement plus léger pour les images en aplats de couleur.
Quelle est la taille maximale d'image que je peux générer ?
La largeur et la hauteur acceptent chacune des valeurs de 1 à 4000 pixels, ce qui couvre tout, du substitut de pixel de suivi 1×1 aux bannières 4K et au-delà. Cette limite maintient une utilisation raisonnable de la mémoire du canvas sur les appareils courants ; les navigateurs échouent silencieusement sur les canvas gigantesques, l'outil reste donc prudemment en dessous de ces seuils.
Puis-je mettre mon propre texte sur le placeholder ?
Oui. Par défaut, l'image affiche ses propres dimensions, par exemple 800×600, le libellé le plus utile pendant le développement. Tapez ce que vous voulez dans le champ de texte pour le remplacer, par exemple "Image héros", "Bientôt disponible" ou le nom d'un client. Laisser le champ vide restaure le libellé automatique des dimensions.
Comment la taille de police est-elle choisie en mode auto ?
Le mode auto met le libellé à l'échelle d'environ un cinquième du plus petit côté de l'image, puis le réduit encore si le texte devait déborder de la largeur. Cela garde les libellés courts bien lisibles et gras, tandis qu'un texte personnalisé long tient encore dans des bannières étroites. Passez en mode manuel pour définir vous-même une taille exacte en pixels.
Pourquoi le SVG est-il souvent meilleur que le PNG pour les placeholders ?
Un placeholder SVG n'est que quelques lignes de balisage : un rectangle et un élément texte. Il pèse typiquement moins d'un demi-kilooctet quelles que soient les dimensions, reste parfaitement net sur n'importe quelle densité d'écran et peut être modifié à la main plus tard. Le PNG et les autres formats matriciels grossissent avec le nombre de pixels et deviennent flous quand on les agrandit.
Puis-je utiliser les images générées à des fins commerciales ?
Oui. Le résultat est un simple rectangle coloré avec un texte que vous avez configuré vous-même ; il ne contient aucune œuvre tierce, aucune police intégrée depuis des services externes ni aucun contenu sous licence. Vous pouvez utiliser les fichiers générés dans des maquettes commerciales, des produits, de la documentation ou n'importe où ailleurs, sans attribution.

À propos de Générateur d'images de remplacement, créez des images factices dans votre navigateur

La plupart des services de placeholder fonctionnent en demandant une image à un serveur distant, ce qui signifie que chaque maquette que vous ouvrez déclenche des requêtes réseau, casse quand vous êtes hors ligne, ralentit le développement local et divulgue les URL de votre travail en cours à un tiers. Cet outil fait le même travail sans aucune implication du réseau : l'image est dessinée sur un canvas (ou assemblée en balisage SVG) directement sur votre appareil. Rien n'est demandé, téléversé ou journalisé nulle part, les aperçus s'affichent instantanément, et le générateur continue de fonctionner dans un avion, derrière un pare-feu d'entreprise strict ou dans un environnement de démonstration hors ligne.

Au-delà du téléchargement d'un fichier, vous pouvez copier l'image sous forme de data URI et la coller directement dans un attribut src ou un background-image CSS, ce qui garde les prototypes rapides complètement autonomes, sans fichiers d'assets à gérer. L'outil vous avertit quand une data URI devient volumineuse, car le base64 gonfle la taille du fichier d'environ un tiers et les très grandes URI alourdissent le HTML et les feuilles de style. Si vous choisissez la sortie SVG, vous pouvez aussi copier le code SVG brut lui-même, ce qui est généralement l'option la plus légère et la plus nette puisqu'il s'adapte à n'importe quelle résolution et ne pèse souvent que quelques centaines d'octets.

Les usages typiques incluent les wireframes et maquettes de design, les données d'amorçage de CMS, les tests unitaires et de mise en page qui nécessitent une image d'une taille exacte, les substituts de cartes Open Graph et réseaux sociaux (le préréglage 1200×630), les miniatures vidéo (1920×1080) et les grilles e-commerce en attente de photos produit. La taille de police est calculée automatiquement pour que le libellé reste lisible quelles que soient les dimensions, ou vous pouvez la définir manuellement pour un rendu précis. Quand les vrais assets arrivent, le redimensionneur d'images et le générateur de favicons de ce site vous aident à les préparer, et le générateur de dégradés peut produire des arrière-plans provisoires plus décoratifs.

Le Lorem Ipsum des images : comment le placeholder est devenu un pilier du web

Bien avant le web, les graphistes de l'imprimé marquaient les mises en page inachevées des lettres FPO, abréviation de "for position only", apposées sur les visuels provisoires pour que personne n'envoie accidentellement une image de travail à la presse d'imprimerie. Le texte recevait le même traitement via le greeking et le fameux passage Lorem Ipsum, du latin brouillé utilisé comme remplissage depuis que les typographes l'ont popularisé dans les années 1960 à partir d'un texte de Cicéron du Ier siècle. Quand le design est passé aux écrans, la boîte grise FPO a suivi et a simplement appris à se décrire elle-même, avec ses dimensions en pixels imprimées en son centre.

Le web a fait du placeholder un service. Au début des années 2010, une vague de petits sites à usage unique est apparue, où l'URL elle-même était l'API : placehold.it servait des boîtes grises à n'importe quelle taille tapée dans la barre d'adresse, placekitten.com renvoyait des photos de chatons recadrées aux dimensions demandées, et lorempixel, placebear, fillmurray (des photos de Bill Murray) et placecage (Nicolas Cage) ont suivi la même recette. Les placeholders à base de chatons et de célébrités sont devenus une blague récurrente dans le travail d'agence, et plus d'une équipe a une anecdote sur une photo de chat ou sur Nicolas Cage ayant survécu par accident jusqu'à une démo client ou une mise en production.

Cette commodité avait un coût caché : chaque placeholder distant est une dépendance réseau. Quand le populaire service lorempixel est devenu instable et que placehold.it a changé de domaine, d'innombrables maquettes, tutoriels et même des bases de code livrées se sont retrouvés remplis d'images cassées, un petit rappel que les assets liés en direct pourrissent. La pratique moderne est revenue vers des placeholders autonomes, de minuscules SVG en ligne, des data URI en base64 et des fichiers générés localement, ce qui est exactement l'approche de cet outil : la classique boîte grise étiquetée de ses dimensions, moins le serveur.

Outils associés

Redimensionneur d'images, redimensionnez vos photos en ligne

Redimensionnez des images par largeur, hauteur ou pourcentage, verrouillez le rapport d'aspect et choisissez un mode d'ajustement. 100 % dans votre navigateur, sans téléversement.

Générateur de Favicon

Générez des PNG de favicon dans toutes les tailles standard et un fichier .ico multirésolution à partir de n'importe quelle image, entièrement dans votre navigateur.

Générateur de dégradés CSS

Créez des dégradés CSS linéaires, radiaux et coniques avec un aperçu en direct et un code prêt à copier.

Optimiseur SVG

Nettoyez et allégez des fichiers SVG en supprimant les métadonnées d'éditeur, les commentaires et les espaces blancs redondants, localement dans votre navigateur.
Soutenir