Mockup gratuit en ligne

Comment le calcul est fait

En bref : un mockup est une image de présentation réaliste qui montre un logo ou un visuel sur un vrai produit. Cet outil pose votre image en perspective sur huit photos : t-shirt, sweat à capuche, mug, enseigne de boutique, carte de visite, ordinateur portable, smartphone et affiche encadrée, en conservant les plis, les ombres et les reflets. Tout se passe dans le navigateur, sans compte, sans filigrane et sans envoi de fichier.

Mode d’emploi

1. Glissez votre logo, choisissez un fichier ou collez-le avec Ctrl + V. Sans image, un logo d’exemple est dessiné à partir du texte saisi.
2. Touchez un produit : l’aperçu s’affiche immédiatement.
3. Réglez la taille et la position. Laissez « Supprimer le fond blanc » activé pour un logo sur fond blanc ; activez « Remplir toute la surface » pour une photo ou une capture d’écran.
4. « Enregistrer le mockup » télécharge un PNG ou un JPG ; « Les 8 en ZIP » génère tous les produits d’un coup, pratique pour un devis, une boutique en ligne ou une présentation client.

Le calcul

Une enseigne, une affiche ou un écran apparaissent de biais sur la photo. À partir des quatre coins de la surface, l’outil calcule une transformation projective (homographie), la méthode décrite par Paul Heckbert en 1989 pour le placage de textures. Pour chaque pixel de la photo, il retrouve le point correspondant de votre visuel et mélange les quatre pixels voisins (interpolation bilinéaire) : ni escaliers, ni raccords visibles. Le mug est cylindrique : le visuel s’enroule autour, se resserre vers les bords et suit un arc d’ellipse en haut et en bas.

Pour avoir l’air imprimé et non collé, le visuel est multiplié par la luminosité de la photo (mode de fusion « produit » du W3C). Les plis du tissu et l’ombre du mug passent ainsi à travers l’impression, et les reflets de la céramique restent visibles. Un écran émet de la lumière : il n’est pas assombri.

Limites

Les photos produits mesurent 1024 à 1216 pixels de côté : largement assez pour un site, une boutique ou les réseaux sociaux, mais pas pour un fichier d’impression. Elles ont été générées localement pour ce site avec un modèle d’image et ne montrent aucune marque. Un mockup reste un aperçu : les couleurs réelles dépendent du procédé d’impression et de la matière.

Confidentialité

Votre logo est traité uniquement dans le navigateur et n’est jamais envoyé. Seuls les réglages (produit, taille, texte) sont mémorisés, jamais l’image.

À voir aussi : supprimer l’arrière-plan d’un logo et créer une carte de visite prête à imprimer.

Questions fréquentes

Sources et références juridiques

• Heckbert (1989) – Fundamentals of Texture Mapping and Image Warping, UC Berkeley UCB/CSD-89-516 (projektive Abbildung Quadrat → Viereck)
• W3C – Compositing and Blending Level 1: multiply B(Cb, Cs) = Cb × Cs
• ITU-R BT.709 – Luminanz Y = 0,2126 R + 0,7152 G + 0,0722 B
• MDN – CanvasRenderingContext2D.getImageData() / putImageData()
• W3C – Web Share API
• ITU-T T.81 / ISO/IEC 10918-1 – JPEG
• W3C – Portable Network Graphics (PNG) Specification
• Google for Developers – An image format for the Web (WebP)
• AOMedia – AV1 Image File Format (AVIF)
• MDN – Image file type and format guide
• MDN – HTMLCanvasElement.toBlob()

Dernière mise à jour : 1 octobre 2026 · Principes éditoriaux