Lorem Picsum

Les deux permettent d'obtenir une image reproductible, mais ils fonctionnent différemment. Un identifiant d'image récupère une photo précise dans le catalogue Picsum, qui va de #1 à #1084 — l'URL devient picsum.photos/id/237/640/480, et cette image spécifique se charge à chaque fois. Une seed est une chaîne de texte que vous choisissez librement, comme le nom de votre projet ; Picsum la transforme en une photo aléatoire mais constante via un chemin /seed/votretexte/. La distinction clé est le contrôle contre la commodité : un identifiant garantit une image connue que vous avez déjà vue, tandis qu'une seed garantit la même photo aléatoire pour chaque membre de l'équipe sans que vous ayez à en choisir une vous-même. Utilisez un identifiant quand une image précise compte, et une seed quand vous voulez simplement que vos maquettes cessent de changer à chaque rafraîchissement. Cet outil construit l'une ou l'autre URL pour vous et prévisualise le résultat instantanément.

Picsum applique ses effets via des paramètres d'URL, et cet outil les ajoute pour vous grâce à une bascule et un curseur. Pour le noir et blanc, il ajoute ?grayscale au lien, ce qui donne quelque chose comme picsum.photos/800/600?grayscale. Pour le flou, il ajoute ?blur=N, où N est un niveau de 1 à 10 — plus le nombre est élevé, plus l'image est adoucie, donc ?blur=5 est modéré et ?blur=10 est très diffus. Lorsque vous activez les deux, ils se combinent dans une seule chaîne de requête. Ces effets sont utiles pour des wireframes basse fidélité, des textures d'arrière-plan discrètes derrière du texte, ou pour vérifier qu'une légende superposée reste lisible sur une photo chargée. Activez la bascule niveaux de gris ou faites glisser le curseur de flou ici, et l'aperçu en direct ainsi que l'extrait prêt à copier se mettent à jour immédiatement pour que vous puissiez coller l'URL exacte dans votre balisage.

Spécifier la largeur et la hauteur indique au navigateur l'espace qu'occupera une image avant même qu'elle ait fini de se charger. Sans ces dimensions, le navigateur ignore la taille de l'image, ce qui fait sauter le contenu environnant pendant le chargement — un problème mesuré par le Cumulative Layout Shift (CLS), l'un des Core Web Vitals de Google. En réservant le bon espace à l'avance, vous conservez une mise en page stable et protégez votre score CLS, ce qui reste important même une fois que les photos définitives auront remplacé vos images de remplacement. C'est pourquoi l'extrait HTML de cet outil est livré avec des attributs width et height déjà renseignés, accompagnés de loading="lazy", et pourquoi la sortie Next.js inclut les props width et height requises par next/image. Générez votre image de remplacement ici et le balisage prêt à copier intègre automatiquement les bonnes dimensions, afin que vous adoptiez de bonnes habitudes de mise en page dès l'étape du prototype.

Oui. Au-delà d'une simple image, la galerie en lot crée plusieurs images de remplacement en un seul clic — choisissez 4, 6, 9 ou 12, ou définissez n'importe quel nombre jusqu'à 24. Vous pouvez garder toutes les images aux mêmes dimensions pour une grille uniforme, ou laisser l'outil les varier selon des formats courants pour simuler le contenu mixte qu'une vraie mise en page en mosaïque ou en cartes contiendrait. Cette variété est précisément ce qui révèle tôt les problèmes de mise en page : comment les cartes se réorganisent selon différents formats, où des espaces vides apparaissent, et si une rangée respire bien sur mobile. Chaque carte de la galerie est indépendante — rafraîchissez-la pour une nouvelle photo, verrouillez-la sur une seed pour qu'elle cesse de changer, ouvrez-la dans un nouvel onglet, téléchargez-la en JPEG, ou supprimez-la. C'est le moyen le plus rapide de peupler une grille de prototype avec des images réalistes plutôt que des cadres gris.

Les deux fournissent de vraies photographies comme images de remplacement, mais à partir de sources différentes avec des contrôles différents. Le mode Picsum par défaut puise dans le catalogue picsum.photos d'images sélectionnées numérotées de #1 à #1084, prend en charge des identifiants d'image précis et des seeds pour des résultats reproductibles, et accepte les paramètres de niveaux de gris et de flou. Le mode Unsplash Source puise dans la bibliothèque plus vaste et plus variée d'Unsplash, pratique quand vous voulez une photographie fraîche, à l'apparence plus actuelle, ou une ambiance visuelle différente. En pratique, choisissez Picsum quand vous avez besoin d'une image précise et reproductible, ou d'un identifiant de catalogue connu, et passez à Unsplash quand vous voulez plus de variété sans avoir besoin de fixer une image exacte. Les deux options construisent l'URL dans votre navigateur, tandis que les images elles-mêmes proviennent de ces CDN externes. Basculez entre les deux services dans cet outil et copiez l'URL qui convient le mieux à votre maquette.