Comment créer une image fictive d'une taille précise ?

Saisissez la largeur et la hauteur ci-dessus, l'image est générée aussitôt. Téléchargez-la en SVG ou PNG, ou copiez le data URI.

Pourquoi un data URI plutôt qu'un service ?

Il supprime une requête par image, fonctionne hors ligne et ne casse pas quand un service externe tombe ou limite l'usage.

SVG ou PNG pour un espace réservé ?

SVG à l'écran : quelques centaines d'octets et net à toute taille. PNG quand un outil exige une image matricielle.

Quelle taille pour une image Open Graph ?

1200 par 630 pixels, le préréglage inclus : c'est ce que recadrent Facebook, LinkedIn et la plupart des aperçus.

Générateur d'images fictives

Créez des images fictives de toute taille, en SVG, PNG ou data URI prêt à coller.

Le générateur d'images fictives fonctionne entièrement dans votre navigateur : le SVG est construit et rasterisé sur votre appareil, rien n'est envoyé.

Ouvrir le générateur Open Graph

À propos de Générateur d'images fictives

Les services d'images fictives placent une requête réseau au milieu d'une maquette encore en cours, et une page qui en est pleine devient lente, inutilisable hors ligne et dépendante d'un tiers. Générer le même rectangle gris en local supprime cette dépendance : le résultat est un SVG à enregistrer, à rasteriser en PNG ou à coller en data URI sans la moindre requête. Les tailles couvrent celles qu'on utilise vraiment — cartes sociales, formats publicitaires, avatars, bannières — et l'étiquette affiche par défaut les dimensions, exactement ce qu'il faut pendant le débogage d'une grille.

Fonctionnalités

Toute largeur et hauteur, avec préréglages social, publicité et général
Couleurs de fond et de texte personnalisées, avec valeur lisible par défaut
L'étiquette affiche les dimensions ou votre propre texte
Rayon d'angle et croix diagonale des maquettes fil de fer
Téléchargement en SVG ou rasterisation en PNG pleine résolution
Data URI qui fonctionne hors ligne et ne coûte aucune requête

Comment utiliser Générateur d'images fictives

Indiquez la largeur et la hauteur ou choisissez un préréglage
Choisissez les couleurs et une étiquette, ou gardez les dimensions
Copiez le data URI ou téléchargez le SVG ou le PNG
Collez l'extrait HTML, CSS ou JSX dans votre maquette

Exemple

Entrée

1200 × 630 · #e5e7eb background

Sortie

<img src="data:image/svg+xml,%3Csvg…" width="1200" height="630" alt="" />

Un espace réservé de carte Open Graph en data URI : aucune requête, aucune panne, identique hors ligne.

Erreurs courantes et dépannage

Le data URI casse la feuille de style. — Entourez-le de guillemets doubles dans url(), comme le fait l'extrait CSS proposé ici.
Le PNG est flou sur un écran retina. — Générez-le au double de la taille d'affichage : il est rasterisé exactement aux pixels demandés.

Foire aux questions

Comment créer une image fictive d'une taille précise ?: Saisissez la largeur et la hauteur ci-dessus, l'image est générée aussitôt. Téléchargez-la en SVG ou PNG, ou copiez le data URI.
Pourquoi un data URI plutôt qu'un service ?: Il supprime une requête par image, fonctionne hors ligne et ne casse pas quand un service externe tombe ou limite l'usage.
SVG ou PNG pour un espace réservé ?: SVG à l'écran : quelques centaines d'octets et net à toute taille. PNG quand un outil exige une image matricielle.
Quelle taille pour une image Open Graph ?: 1200 par 630 pixels, le préréglage inclus : c'est ce que recadrent Facebook, LinkedIn et la plupart des aperçus.

Outils associés

Générateur BlurHash — Encode et décode des espaces réservés d'image floutés.
Générateur d’icônes d’app — Transformez une image en toutes les tailles d’icône d’app pour iOS, macOS et Android, téléchargées dans un ZIP, dans votre navigateur.
SVG vers PNG — Rastérise un SVG en PNG ou JPG net à toute échelle, transparence conservée.
Optimiseur d’images — Réencode et réduit les images (JPEG/WebP/PNG), avec redimensionnement optionnel.
Calculateur de ratio d’image — Simplifie les ratios, résout les dimensions, sortie CSS.
Générateur Open Graph — Génère des balises meta Open Graph et Twitter avec aperçu de carte sociale.