Skip to content

Tout pour WordPress, le développement web — et plus encore

🎨 14 Services de placeholder pour le frontend : ce qui fonctionne en 2026

🎨 14 Services de placeholder pour le frontend : ce qui fonctionne en 2026

Illustration d'aperçu des services de substitution pour le développement frontend

Vous construisez une maquette, vous collez l’URL habituelle de placeholder et elle ne charge pas. Le navigateur vous inonde d’avertissements de contenu mixte, l’onglet se fige pendant trente secondes. Cela vous rappelle quelque chose?

Les services de placeholder du début des années 2010 disparaissent en silence: des noms de domaine ne sont pas renouvelés, des certificats TLS expirent, des limites de débit étranglent les requêtes. Découvrir cela une heure avant une deadline n’a rien d’amusant.

Nous avons testé manuellement 14 outils fonctionnels: des rectangles colorés à la génération par IA en passant par les avatars déterministes. Chacun prend en charge HTTPS, maintient une disponibilité stable et ne vous lâchera pas quand le backend n’est pas prêt mais que vous devez déjà montrer la maquette.

💡 Aperçu rapide:

  • Typologie: blocs de couleur, remplisseurs photo, SVG avec distribution Edge, avatars, mockups d’appareils et génération par IA; il existe un outil pour chaque besoin.
  • Rapidité: placeholders.dev et placeholdr.dev tournent sur Cloudflare Workers et servent le contenu depuis le point de présence Edge le plus proche.
  • Sécurité: les 14 services fonctionnent en HTTPS. Aucun avertissement de contenu mixte.
  • Code prêt à l’emploi: chaque service fournit un modèle d’URL que vous pouvez copier-coller dans <img src> en quelques secondes.

Critères de sélection: ce qui rend un service adapté aux maquettes fonctionnelles

Les paramètres que nous avons utilisés pour évaluer chaque outil:

  • HTTPS uniquement. Le contenu mixte en 2026 est un signal d’alerte. Les services sans TLS n’ont pas été retenus.
  • CDN ou distribution Edge. Une couverture mondiale signifie une faible latence quel que soit l’endroit.
  • Maintenance active. Des commits ou mises à jour récents, datant de moins d’un an.
  • Syntaxe d’URL prévisible. Le modèle doit être évident au premier coup d’œil, sans lire la documentation.
  • Formats modernes. WebP, AVIF, SVG; sans eux, un service ne peut pas rivaliser.

Tableau comparatif

Besoin

Meilleur choix

Format

CDN

Blocs colorés avec texte

Placehold.co

SVG, WebP, PNG

Oui

Remplisseurs photo pour maquettes

Lorem Picsum

JPEG, WebP

Oui

Dimensions et préréglages spécifiques

DummyImage

PNG, JPEG, GIF

Non

Rapidité et netteté

placeholders.dev

SVG

Edge

Avatars d’utilisateurs

DiceBear

SVG

Oui

Avatars avec initiales

UI Avatars

PNG, SVG

Oui

Mockups d’appareils

Placeit

PNG, JPEG

Oui

Placeholders thématiques

ASSETS.SO

JPEG, PNG

Oui

Génération d’images par IA

placeholdr.dev

JPEG, WebP

Edge

1. Placehold.co: la référence pour les blocs colorés

Capture d'écran du service Placehold.co avec blocs de couleur

Arrivé pour remplacer l’instable via.placeholder.com, il est devenu le choix par défaut. Couleurs HEX, Google Fonts, dimensions: tout passe dans l’URL. SVG, WebP, PNG. Le modèle est évident au premier coup d’œil: /600x400/EEE/31343C?text=Hero+Image.

Avantages:

  • SVG, WebP, PNG: trois formats dans un seul service.
  • Couleurs HEX et Google Fonts directement dans la chaîne de requête.
  • CDN stable avec une latence minimale.

Inconvénients:

  • Blocs colorés uniquement. Le service ne génère pas de photos.
1<img src="https://placehold.co/600x400" alt="Placeholder">
2<img src="https://placehold.co/600x400/EEE/31343C?text=Hero+Image" alt="Hero">
3<img src="https://placehold.co/600x400.webp" alt="WebP format">

🔗 Placehold.co

2. Lorem Picsum: des remplisseurs photo pour des maquettes réalistes

Capture d'écran du service Lorem Picsum avec images d'exemple pour prototypes

«Lorem Ipsum, mais pour les images.» Fournit de vraies photos issues de sa base de données, parfait quand les carrés colorés semblent déplacés. Le paramètre seed verrouille une image, ce qui est précieux pour les tests d’interface.

Les filtres (grayscale, blur) ajoutent de la flexibilité. Aucune attribution requise.

Avantages:

  • Des photos de qualité pour les maquettes, pas des rebuts de banques d’images.
  • Filtres de flou et de niveaux de gris.
  • seed pour la répétabilité à chaque requête.

Inconvénients:

  • Pas de contrôle précis sur le contenu de la photo. Vous obtenez ce qui se trouvait dans le cadre.
1<img src="https://picsum.photos/800/600" alt="Random photo">
2<img src="https://picsum.photos/seed/product/400/300" alt="Fixed photo">
3<img src="https://picsum.photos/800/600?grayscale&blur=2" alt="Filtered">

🔗 Lorem Picsum

3. DummyImage: des préréglages pour toutes les situations

Capture d'écran du service DummyImage avec préréglages de dimensions

Le service offrant la personnalisation la plus poussée pour les placeholders textuels. Sa principale caractéristique réside dans ses dizaines de préréglages: formats publicitaires (Leaderboard, Wide Skyscraper), ratios d’aspect (16:9, 4:3), résolutions courantes. Couleurs de fond et de texte en HEX, formats PNG, JPEG, GIF.

Pas de CDN, la vitesse dépend donc de la géographie. Ce n’est pas critique pour le développement en local.

Avantages:

  • Des dizaines de préréglages pour les publicités, les écrans et les mises en page standard.
  • Contrôle total de la couleur d’arrière-plan et du texte.

Inconvénients:

  • Pas de CDN. La latence est perceptible depuis l’Australie ou le Japon.
1<img src="https://dummyimage.com/728x90/000/fff" alt="Leaderboard ad">
2<img src="https://dummyimage.com/16:9x1080" alt="HD ratio">

🔗 DummyImage

4. Placeholders.dev: du SVG depuis des serveurs Edge

Capture d'écran du service placeholders.dev avec placeholder SVG

Fonctionne sur Cloudflare Workers et délivre du SVG depuis des serveurs Edge. «Super rapide» n’est pas un argument marketing: la diffusion depuis le point de présence Cloudflare le plus proche se traduit par une latence de quelques millisecondes. Le SVG offre une netteté parfaite sur Retina, quelle que soit l’échelle.

Avantages:

  • Génération à la volée via Cloudflare Workers.
  • Netteté sur tous les écrans grâce au SVG.
  • Diffusion Edge depuis le point réseau le plus proche.

Inconvénients:

  • SVG uniquement. Les formats raster ne sont pas pris en charge.
1<img src="https://images.placeholders.dev/?width=400&height=300&bgColor=%23f0f0f0&textColor=%23333" alt="SVG placeholder">

🔗 placeholders.dev

5. DiceBear: des avatars déterministes

Capture d'écran du service DiceBear avec collection de styles d'avatar

Génère des avatars selon le principe «une graine, un résultat». Passez un email ou un nom d’utilisateur et vous obtenez le même avatar à chaque requête. Inestimable pour les listes d’utilisateurs et les panneaux d’administration: le contenu paraît habité sans la contrainte de vraies photos.

Plus de vingt styles, du pixel art aux visages réalistes. Le tout en SVG. L’API est ouverte.

Avantages:

  • Deux douzaines de styles d’avatars.
  • Génération déterministe: la graine garantit la répétabilité.
  • SVG pour une mise à l’échelle parfaite.

Inconvénients:

  • SVG uniquement. Pour des avatars raster, il vous faudra un convertisseur supplémentaire.
1<img src="https://api.dicebear.com/9.x/avataaars/[email protected]" alt="User avatar">

🔗 DiceBear

6. UI Avatars: des initiales plutôt que des photos

Capture d'écran du service UI Avatars avec exemples d'avatars à initiales

Génère des avatars avec les initiales de l’utilisateur sur un fond coloré. Idéal pour les commentaires, les chats et les panneaux d’administration où les photos ne sont pas nécessaires, mais où les cercles gris sans visage sont agaçants. La taille, la police, la couleur de fond et la couleur du texte sont toutes configurables via les paramètres d’URL.

Le service est entièrement ouvert: code source sur GitHub, vous pouvez lancer votre propre instance en 10 minutes. Un atout majeur pour les projets ayant des exigences de confidentialité.

Avantages:

  • Des initiales au lieu de photos, avec un chargement instantané.
  • Contrôle total de la couleur de fond, de la couleur du texte et de la police.
  • Code source ouvert sur GitHub.

Inconvénients:

  • Uniquement du texte sur fond coloré. Les illustrations ne sont pas prises en charge.
1<img src="https://ui-avatars.com/api/?name=John+Doe&size=128&background=0D8ABC&color=fff" alt="JD Avatar">

🔗 UI Avatars

7. Lorem Flickr: des photos sous licence Creative Commons

Capture d'écran du service Lorem Flickr avec une photo Flickr

Recherche des photos sous licence Creative Commons sur Flickr et les sert comme espaces réservés. Comparé à Lorem Picsum, vous obtenez ici des clichés plus «pris sur le vif» et moins de compositions posées. La qualité varie, mais pour des maquettes où l’authenticité compte, c’est un avantage.

Le paramètre lock fige l’image. La recherche par mot-clé affine la sélection.

Avantages:

  • Recherche par mot-clé.
  • lock pour la persistance de l’image.
  • Creative Commons avec des conditions de licence transparentes.

Inconvénients:

  • Qualité imprévisible: cela va du chef-d’œuvre à la photo floue.
1<img src="https://loremflickr.com/1280/720" alt="Flickr Image">

🔗 Lorem Flickr

8. Placeit: des maquettes professionnelles d’appareils

Capture d'écran de la plateforme Placeit avec maquettes d'appareils

Une plateforme d’Envato avec près de 3000 gabarits de maquettes: iPhone, Samsung, ordinateurs de bureau, portables, tablettes. Le service est payant (abonnement Envato), mais pour présenter des designs à des clients ou dans un portfolio, il offre un résultat impossible à distinguer d’un rendu de studio.

Glisser-déposer: importez une capture d’écran, choisissez un appareil, téléchargez. Pour les présentations commerciales, c’est immédiatement rentabilisé.

Avantages:

  • Près de 3000 gabarits d’appareils et de scénarios.
  • Interface en glisser-déposer ne nécessitant aucune compétence en design.

Inconvénients:

🔗 Placeit

9. ASSETS.SO: des espaces réservés thématiques avec du caractère

Capture d'écran du service ASSETS.SO avec placeholders thématiques

Ajoute du contexte à la routine quotidienne d'un développeur. Catégories: jeux, films, musique, sports, chaussures. Un site de cinéma avec de vraies images de films paraît plus convaincant qu'une maquette avec des carrés de couleur. L'API est simple: /game.jpg?w=1280&h=720.

Avantages:

  • Catégories thématiques pour différentes niches.
  • API extrêmement simple.

Inconvénients:

  • Contrôle minimal sur le contenu.
1<img src="https://via.assets.so/game.jpg?w=1280&h=720" alt="Game Asset">

🔗 ASSETS.SO

10. RoboHash: des avatars robots pour vos données de test

Capture d'écran du service RoboHash avec exemples d'avatars robot

Génère des robots uniques à partir de n’importe quel texte. Le principe est le même que DiceBear (génération déterministe), mais avec du caractère: chaque robot a sa propre expression et sa palette de couleurs. Styles disponibles: robots classiques, monstres, chats robots.

Idéal pour les prototypes où vous souhaitez donner de la personnalité aux profils de test.

Avantages:

  • Génération déterministe à partir de texte.
  • Trois styles: robots, monstres, chats.
  • Open source.

Inconvénients:

  • PNG uniquement. Le SVG n’est pas pris en charge.
1<img src="https://robohash.org/[email protected]" alt="Robot avatar">

🔗 RoboHash

11. Bacon Mockup: du bacon dans toutes les résolutions

Capture d'écran du service Bacon Mockup avec image de bacon

De délicieuses images de bacon, dans la résolution de votre choix. Pour les sites de restaurants, les blogs culinaires ou pour faire une blague à vos collègues. Cela ressemble à une plaisanterie, mais le service est stable depuis plusieurs années.

Haute résolution, API très simple. Un service de niche, mais mémorable.

Avantages:

  • Photos en haute résolution.
  • API extrêmement simple.

Inconvénients:

  • Thématique très étroite. Inutile en dehors des projets liés à l’alimentation.
1<img src="https://baconmockup.com/1280/720" alt="Bacon">

🔗 Bacon Mockup

12. Placebeard.it: de la robustesse dans chaque pixel

Capture d'écran du service Placebeard.it avec photo d'homme barbu

La réponse à placekitten, en plus terre-à-terre et masculin. Des photos couleur ou noir et blanc de personnes barbues, dans toutes les proportions. Pour les salons de coiffure, le prêt-à-porter masculin et les startups au style hipster. Le mode nuances de gris est disponible. Le service fonctionne de manière stable depuis longtemps.

Avantages:

  • Photos thématiques, idéales pour le segment masculin.
  • Prise en charge du mode nuances de gris.

Inconvénients:

  • Thématique très étroite. Ne convient pas à une audience féminine.
1<img src="https://placebeard.it/1280x720" alt="Beard">

🔗 Placebeard.it

13. Placebear: la force brute de la nature

Capture d'écran du service Placebear avec photo d'ours

Des espaces réservés imposants, poilus et parfois dangereux. Parfait pour tester la réactivité sur des images aux textures complexes: la fourrure, l’herbe et l’écorce offrent une matière riche pour vérifier la compression et le redimensionnement.

Photos en haute résolution, disponibilité stable. Ce n’est pas pour tous les projets, mais cela vaut la peine de le garder dans vos favoris.

Avantages:

  • Photos en haute résolution.
  • Disponibilité stable.

Inconvénients:

  • Contenu spécifique. Tous les clients n’apprécieront pas de voir un ours dans leur maquette.
1<img src="https://placebear.com/1280/720" alt="Bear">

🔗 Placebear

14. Placeholdr.dev: génération de placeholders par IA

Capture d'écran du service IA placeholdr.dev avec exemples de génération d'images

Le dernier arrivé sur ce créneau: génération par IA via le modèle de diffusion Flux sur Cloudflare Workers avec mise en cache R2. La première requête prend plusieurs secondes pour le rendu; les suivantes sont servies instantanément depuis le cache.

Format d’URL: /{width}x{height}/{prompt}. Styles: photographic, artistic, anime, oil-painting, 3d-render, cartoon. Le paramètre seed (1-3) verrouille la variante. Gratuit, sans création de compte.

Avantages:

  • Génération par IA: descriptions en langage naturel au lieu de codes HEX.
  • Six styles, du photoréalisme au rendu 3D.
  • Diffusion en périphérie via Cloudflare Workers.

Inconvénients:

  • Première requête lente (plusieurs secondes pour le rendu).
  • Service jeune (lancé en janvier 2026); la stabilité à long terme est incertaine.
1<img src="https://placeholdr.dev/600x400/minimalist modern office" alt="AI-generated office">
2<img src="https://placeholdr.dev/320x320/cat?style=anime" alt="AI anime cat">
3<img src="https://placeholdr.dev/1024x768/camera?style=3d-render&seed=3" alt="AI 3D camera">

🔗 placeholdr.dev

Considérations techniques: CSP, mode hors ligne et pourquoi les anciennes URL disparaissent

En-têtes Content-Security-Policy

Si votre site utilise une CSP stricte, les services de placeholders externes seront bloqués par le navigateur par défaut. Mettez à jour la directive img-src:

1Content-Security-Policy: img-src 'self' https://placehold.co https://picsum.photos;

Important: retirez ces domaines de la CSP avant le déploiement en production. Les placeholders sont faits pour le développement, pas pour les sites en ligne.

Développement local sans Internet

Pour le développement hors ligne ou les projets avec des exigences de confidentialité:

  • Génération de placeholders côté client via Canvas ou SVG.
  • Script de génération local en Node.js.
  • Fichiers de placeholders statiques dans le dépôt.

Pourquoi les anciennes URL disparaissent

La plupart des services du début des années 2010 étaient des projets personnels: lancés, maintenus quelques années, puis abandonnés. Le nom de domaine expire, le certificat devient caduc et l’URL se transforme en citrouille. Choisissez des services avec des commits récents et un support commercial.

⁉️🤔 Foire aux questions

Puis-je utiliser des placeholders en production?

Non. Les services de placeholders sont destinés uniquement au développement et au prototypage. Limites de requêtes, indisponibilités, latence en charge. Remplacez les placeholders par des assets réels avant la mise en ligne.

Pourquoi certains services survivent des années tandis que d’autres disparaissent en quelques saisons?

La différence tient au modèle de support. Les services commerciaux ou sponsorisés disposent de ressources dédiées et reçoivent des mises à jour régulières. Les projets personnels menés en solo fonctionnent sur l’enthousiasme. Vérifiez l’historique des commits: si le dernier remonte à trois ans, cherchez une alternative.

Comment verrouiller la même image à chaque rechargement?

Utilisez le paramètre seed. Lorem Picsum: /seed/product/400/300. DiceBear: [email protected]. RoboHash: n’importe quel texte dans l’URL. placeholdr.dev: ?seed=1 (trois variantes). Un seed donné produit toujours le même résultat.

Dois-je mettre à jour la CSP pour les placeholders?

Oui. Si votre site a des en-têtes Content-Security-Policy configurés, ajoutez les domaines des services à la directive img-src, sinon le navigateur bloquera le chargement. N’oubliez pas de les retirer avant le déploiement.

Les placeholders externes affectent-ils la vitesse de développement local?

Chaque balise <img> avec une URL externe génère une requête HTTP. Les services avec CDN et Edge sont rapides, mais pour une autonomie complète, conservez un jeu de placeholders statiques dans votre dépôt.

Quel format est le plus adapté pour les placeholders?

SVG pour les formes géométriques et le texte: poids minimal, mise à l’échelle parfaite. WebP pour les placeholders photo: nettement plus léger que le JPEG à qualité égale. PNG quand vous avez besoin de transparence. AVIF si les navigateurs de votre audience cible le supportent.

Puis-je utiliser les images de ces services dans des maquettes commerciales?

La plupart des services fournissent le contenu gratuitement et sans attribution. Les services basés sur Flickr fonctionnent avec Creative Commons; vérifiez la licence de chaque photo. Placeit nécessite un abonnement Envato pour les téléchargements sans filigrane.

À mettre en favoris: le récapitulatif final des placeholders en 2026

Nos choix pour le travail quotidien: Placehold.co pour les blocs de couleur, Lorem Picsum pour les maquettes photo et DiceBear pour les avatars. Ces trois services couvrent la grande majorité des besoins.

Besoin de rapidité sur Retina? placeholders.dev avec du SVG en périphérie. Vous voulez des visuels contextuels sans chercher sur des banques d’images? placeholdr.dev avec la génération par IA. Vous préparez une présentation commerciale? Placeit avec ses trois mille maquettes.

La règle principale reste la même: les placeholders vivent sur le serveur de développement. Avant le déploiement, remplacez chaque URL externe par un asset réel. Gardez deux ou trois services de secours en favoris; ce qui fonctionnait hier pourrait être hors ligne demain.