Vous photographiez un large paysage, ouvrez l'écran de publication et l'application vous offre un carré avec les deux meilleures montagnes coupées Ou vous prenez une capture d'écran d'un graphique, et la culture fourragère supprime les étiquettes d'axe qui valaient la peine d'être partagées. L'image va bien. Le cadre n’a pas la bonne forme.
Il y a deux façons de sortir Vous pouvez recadrer l'image pour l'adapter au cadre, ou vous pouvez mettre l'image entière sur un fond qui a déjà la bonne forme La deuxième approche est appelée un mat, et c'est ce que le Générateur mat construit : un carré, portrait ou toile en forme d'histoire avec votre image complète placée à l'intérieur, sur une copie floue de lui-même ou une couleur unie Ce guide explique quand un mat bat une récolte, comment la géométrie fonctionne, ce que le rembourrage, le rayon et les paramètres d'ombre font en pixels, et quelle taille de sortie choisir pour chaque plate-forme.
tl;dr : Un mat est l'arrière-plan sur lequel se trouve une photo hors forme afin qu'elle puisse être publiée sans être recadrée Au lieu de couper une image 16 :9 à 1 :1, vous installez l'image entière dans un cadre 1080 x 1080 ou 1080 x 1350 et remplissez l'espace restant avec une copie floue de la photo ou une couleur unie Le Matte Generator fait ce côté client sur un canevas HTML, avec 15 préréglages de plate-forme, un remplissage de 0 à 25 %, des coins arrondis, une ombre portée en option et une exportation PNG, JPEG ou WebP. Il est gratuit, aucune inscription n'est téléchargé.
Qu'est-ce qu'une photo matte ?
Une photo matte est la frontière entre une image et le bord de son cadre Le mot vient de l'encadrement de l'image, où un panneau de tapis avec une fenêtre coupée se trouve entre une impression et le verre de sorte que l'image ne court pas jusqu'au bord du cadre Sur les médias sociaux l'idée est la même, sans le carton : le " ; frame" ; est le rapport d'aspect qu'une plate-forme veut, et le mat est tout ce qui remplit l'espace que votre image ne fait pas.
La propriété déterminante d'une matte est que rien n'est retiré de l'image Chaque pixel que vous avez composé survit dans le post Le commerce est que l'image ne remplit plus toute la tuile, donc elle est plus petite à l'écran qu'une recadrage de la même photo ne le serait.
Faut-il utiliser un mat ou recadrer l'image ?
Recadrer lorsque le sujet est assis au milieu et que les bords sont accessoires Utilisez un mat lorsque les bords portent des informations que vous ne pouvez pas perdre C'est toute la décision, et cela vaut la peine de faire exprès plutôt que d'accepter tout ce que fait l'écran de téléchargement.
| situation | Meilleur choix | pourquoi |
|---|---|---|
| Portrait d'une personne, fond uni | Cultiver | Le sujet remplit davantage la tuile et lit mieux à la taille d'une vignette |
| Large paysage ou panorama | Mat | La largeur est le point de la photo |
| Capture d'écran d'un graphique, d'un code ou d'une conversation | Mat | Les étiquettes et les bords portent les informations |
| Produit shot qui doit montrer l'objet entier | Mat | Couper dans le produit va à l'encontre du but recherché |
| Photo de groupe avec des gens aux deux extrémités | Mat | Une récolte enlève quelqu'un |
| Plan détaillé ou texture | Cultiver | Il n'y a pas de bord significatif à protéger |
| Très large panorama que vous voulez que les gens traversent | Ni l'un ni l'autre | Divisez-le plutôt en carrousel |
Si vous décidez qu'une récolte est juste après tout, le Croppeur d'images de médias sociaux gère ce côté de la décision avec les mêmes préréglages de plate-forme Pour un panorama trop large pour l'une ou l'autre approche, le Générateur de défilement de carrousel tranchez-le en panneaux glissables.
Comment un mat s'intègre-t-il à une image dans un carré ?
La règle d'ajustement est la même que celle que les appels CSS object-fit: contain, défini dans le Images du module CSS Niveau 3 spécification : mettre à l'échelle l'image par le plus grand facteur qui garde à la fois sa largeur et sa hauteur à l'intérieur du cadre, puis la centrer En code le calcul est de trois lignes :
const scale = Math.min(frame.width / image.width, frame.height / image.height)
const width = image.width * scale
const height = image.height * scale
Quelle que soit la dimension qui touche le bord du cadre, elle décide d'abord de l'échelle Une image large touche les bords gauche et droit et laisse des barres au-dessus et en dessous Une image haute touche le haut et le bas et laisse des barres sur les côtés Le générateur mat applique le rembourrage en premier, rétrécissant le cadre, puis exécute cet ajustement à l'intérieur de ce qui reste.
Un exemple travaillé avec des nombres réels
Prenez une photo de paysage 1920 x 1080 (16 :9) et mettez-la sur le préréglage du carré Instagram, 1080 x 1080, avec le remplissage par défaut de 6 %.
- Le remplissage représente 6 % du cadre et n°39 ; côté le plus court : 1080 x 0,06 = 64,8 pixels sur chaque bord.
- L'espace restant pour l'image est de 1080 - (2 x 64,8) = 950,4 pixels carrés.
- L'échelle d'ajustement est la plus petite de 950,4 /1920 = 0,495 et 950,4 /1080 = 0,880, donc 0,495.
- L'image est dessinée à 1920 x 0,495 = 950,4 de large et 1080 x 0,495 = 534,6 de haut.
- Il est centré verticalement : (950,4 - 534,6) /2 = 207,9, plus le remplissage 64,8, place son bord supérieur à 272,7 pixels.
L'outil rapporte cela sous l'aperçu sous la forme " ; placé à 950 x 535 dans un frame" 1080 x 1080 ; Vous pouvez vérifier n’importe quel autre cas de la même manière.
Quelle taille de sortie devez-vous choisir ?
Choisissez la taille du placement que vous publiez et rappelez-vous que pour une image large, un cadre plus haut ne rend pas l'image plus grande. La largeur est ce qui la limite. Le tableau ci-dessous convient de la même manière pour deux photos sources, avec un remplissage de 6 %, sur les préréglages courants.
| Préréglé | Cadre | Le paysage de 1920 x 1080 est dessiné à | Le portrait téléphonique de 1080 x 1920 est dessiné sur |
|---|---|---|---|
| Poste carrée Instagram | 1080 x 1080 | 950 x 535 | 535 x 950 |
| Publication de portrait Instagram (4 :5) | 1080 x 1350 | 950 x 535 | 686 x 1220 |
| Histoire Instagram ou bobine (9 :16) | 1080x1920 | 950 x 535 | 950 x 1690 |
| Image de publication X (16 :9) | 1600 x 900 | 1408x792 | 446 x 792 |
Deux choses se démarquent Pour la photo de paysage, le carré et le portrait 4 :5 donnent une taille d'image identique ; le cadre du portrait n'ajoute que plus de mat Donc pour les images larges, le carré est le choix le plus soigné Pour la photo de grand téléphone, le portrait 4 :5 donne à l'image environ 28 % de hauteur en plus qu'un carré (1220 contre 950 pixels), c'est pourquoi le portrait est le meilleur défaut pour les prises de vue verticales.
La liste complète des préréglages de l'outil couvre Instagram (carré, portrait, paysage, histoire), Threads (carré, portrait), Bluesky (image de flux et carré), X (image postale et carte récapitulative), flux Facebook, flux LinkedIn, YouTube vignette, épingle standard Pinterest et l'aperçu du lien Open Graph. Les plateformes modifient leurs cultures et réencodent les téléchargements, alors traitez-les comme " ; ce qui correspond aujourd'hui et quot ; plutôt qu'une garantie.
Quel fond utiliser une matte ?
L'outil offre quatre arrière-plans : une copie floue de l'image, une couleur unie que vous choisissez, blanche ou noire. La copie floue est la valeur par défaut et généralement le meilleur choix pour les photos, car elle remplit le cadre avec la palette picture' ; sa propre palette sans que vous ayez à choisir une couleur.
| fond | apparence | le mieux pour | faire attention |
|---|---|---|---|
| Copie floue de l'image | Le familier Instagram " ; remplir" ; regarder | Photos, voyages, nourriture, tout ce qui est coloré | Les images occupées produisent une toile de fond chargée |
| Couleur unie | Une carte plate derrière l'image | Comptes de marques, shots produits, logos | Choisissez une couleur qui ne combat pas la photo |
| Blanc | Impression galerie sur un mur blanc | Flux minimaux, captures d'écran en mode lumière | Les photos aux bords clairs perdent leur limite sans ombre |
| Noir | Boîte aux lettres cinéma | Captures de nuit, images fixes de films, captures d'écran sombres de l'interface utilisateur | Les photos aux bords sombres perdent leur limite sans ombre |
Comment est faite la toile de fond floue
L'arrière-plan flou n'est pas une supposition à une couleur correspondante C'est votre propre image, recadrée pour remplir tout le cadre, fortement floue et légèrement assombrie, avec l'image nette dessinée sur le dessus Le flou utilise la toile filter propriété, documentée sur MDN' ;s CanvasRenderingContext2D.filter page6, et son rayon évolue avec le cadre : 6 % du côté le plus court, donc 65 pixels sur un carré de 1080.
Un détail compte pour la qualité Un flou près du bord d'une toile se situe en moyenne en pixels transparents depuis l'extérieur, ce qui laisse un bord pâle autour de la bordure L'outil évite cela en dessinant la toile de fond 12 % plus grande que le cadre de chaque côté (130 pixels de découvert sur un carré de 1080), de sorte que le flou a des données d'image réelles à échantillonner jusqu'au bord Un lavage noir de 12 % passe ensuite par-dessus, ce qui maintient le sujet net en lecture comme sujet.
Que font le rembourrage, le rayon de coin et l'ombre ?
Les trois paramètres sont proportionnels, ils se ressemblent donc à 1 080 pixels comme à 1 600.
bourre fonctionne de 0 à 25 % et est mesuré par rapport au cadre et au côté plus court n°39 ; En 0, une image large touche les deux bords latéraux et le mat ne se présente que sous forme de barres au-dessus et au-dessous : une boîte aux lettres pure Entre 4 % et 8 % se lit comme une bordure délibérée sans rétrécir beaucoup l'image Des valeurs plus grandes conviennent aux poteaux de style carte de devis où l'arrière-plan fait partie du dessin Sur un carré de 1080, chaque point de pourcentage de rembourrage supprime 21,6 pixels de l'image et du n°39 ; la largeur disponible.
Rayon d'angle fonctionne de 0 à 50 % et est mesuré par rapport à l'image placée' ; s côté plus court, pas le cadre Avec l'exemple de paysage ci-dessus, l'image mesure 534,6 pixels, donc le rayon de 12 % par défaut arrondit chaque coin d'environ 64 pixels À 50 % les petits côtés deviennent des demi-cercles complets, donnant une forme de pilule.
Abaisser l'ombre est allumé par défaut C'est une ombre noire de 28 % avec un flou de 3 % de la trame' ; son côté plus court et un décalage vers le bas de 1 %, ce qui sur une trame de 1080 signifie un flou de 32 pixels et une chute de 11 pixels Il sépare l'image d'un fond de luminosité similaire, ce qui est exactement le cas où les mattes blanches ou noires ont besoin d'aide.
Comment mettre une photo sur un mat, étape par étape
- Ouvrez le générateur mat gratuit et ajoutez votre image en laissant tomber un fichier, en cliquant pour parcourir ou en collant depuis le presse-papiers. Coller est l'itinéraire le plus rapide pour les captures d'écran.
- Choisissez la taille de sortie dans la liste groupée des préréglages Commencez par Instagram square pour les photos larges et Instagram portrait pour les grandes.
- Choisissez l'arrière-plan Gardez la copie floue pour les photos ; passez à une couleur unie et tapez une valeur hexadécimale pour le travail de marque.
- Ajustez le remplissage, le rayon du coin et la bascule de l'ombre tout en regardant l'aperçu Le canevas d'aperçu se rend à la taille réelle de la sortie, donc ce que vous voyez est le fichier que vous obtiendrez.
- Choisissez un format et téléchargez Le fichier porte le nom de votre original avec
-matteajouté, doncbeach.jpgse transformebeach-matte.png.
PNG, JPEG ou WebP : quel format exporter ?
Exportez PNG lorsque le résultat a de la transparence ou du texte net, JPEG lorsque vous voulez un petit fichier que chaque plate-forme accepte, et WebP lorsque vous voulez le plus petit fichier et que la destination le supporte JPEG et WebP sont codés à 92 % de qualité.
| format | Compression | Garde la transparence | Usage typique |
|---|---|---|---|
| png | sans perte | oui | Captures d'écran, logos sur un mat transparent, archivage du résultat |
| jpeg | Perte, qualité 0,92 | Non, s'aplatit à opaque | Articles photo sur n’importe quelle plateforme |
| Webp | Perte, qualité 0,92 | oui | Sites Web et plateformes qui acceptent WebP |
La plupart des plateformes sociales réencodent ce que vous téléchargez de toute façon, le format d'exportation compte donc moins pour le flux que pour votre propre copie Si vous prévoyez de modifier le résultat plus loin, conservez un PNG. Si le fichier doit être plus petit avant le téléchargement, le Guide de compression d'images parcourt les paramètres de qualité plus en profondeur.
Pouvez-vous utiliser un PNG transparent ?
Oui, et ça marche bien pour les logos et les shots de produits découpés Un PNG transparent placé sur un composite de couleur unie proprement, donc un mat devient un moyen rapide de mettre un logo sur un carré de marque Si vous devez d'abord enlever un fond, le guide de dépoussiéreur d'arrière-plan couvre cette étape Exportez le résultat en PNG ou WebP pour garder la transparence dans le fichier ; JPEG n'a pas de canal alpha et l'aplatira.
Un mat réduit-il la qualité de l'image ?
Non, tant que la source est plus grande que l'espace dans lequel elle est attirée Les préréglages de sortie sont de 1080 pixels ou plus, et une photo de téléphone typique est de 3000 à 4000 pixels sur son côté long, donc l'image est réduite, ce qui ne perd rien de visible La toile la dessine avec un lissage de haute qualité.
La seule exception est une petite source Si vous placez une image 600 x 400 dans un carré 1080 avec un remplissage de 6 %, il doit être mis à l'échelle jusqu'à 950 x 634, un facteur d'environ 1,58, et il semblera doux pour la même raison tout agrandissement fait L'outil ne peut pas ajouter de détail qui n'a jamais été dans le fichier Si votre source est petite, réduisez le remplissage ou choisissez un préréglage plus petit pour que le facteur d'échelle reste proche de 1. Le guide de redimensionnement d'image explique pourquoi la mise à l'échelle s'estompe et quand elle est acceptable.
Erreurs courantes et messages d'erreur
Quelques problèmes reviennent assez souvent pour être nommés.
- " ; Ce fichier n'est pas une image." ; L'outil vérifie le fichier' ; s signalé type MIME avant décodage Un PDF ou un document glissé par erreur est rejeté à cette étape.
- " ; Cette image n'a pas pu être lue." ; Le fichier prétend être une image mais le navigateur n'a pas pu la décoder Cela se produit avec des téléchargements corrompus et avec des formats qu'un navigateur particulier ne prend pas en charge La dropzone répertorie PNG, JPEG, WebP, GIF et AVIF ; les photos HEIC d'un iPhone doivent généralement être converties en premier.
- Le mat semble gris au lieu d'être coloré. Vous avez probablement choisi l'option couleur unie et laissé le gris clair par défaut. Remettez l’arrière-plan sur la copie floue.
- Une image blanche disparaît dans une matte blanche. Allumez l'ombre, ajoutez un peu de rembourrage ou passez à la toile de fond floue.
- Le poteau est toujours recadré. Le préréglage que vous avez exporté ne correspond pas à l'endroit où vous l'avez publié Une image 1200 x 630 Open Graph téléchargée en tant que publication de flux Instagram sera recadrée, car 1.91 :1 n'est accepté que comme publication de paysage.
- Le téléchargement ne démarre pas. Les téléchargements comptent pour une limite d'utilisation quotidienne Lorsque la limite est atteinte, l'outil affiche un message plutôt qu'un fichier.
Quelque chose est-il téléchargé ?
N° L'image est lue avec une URL d'objet local, composée sur un HTML <canvas> élément dans l'onglet de votre navigateur, et codé dans un fichier avec le canevas toBlob méthode décrite dans le Spécification du canevas HTML WHATWG. Aucune donnée d'image n'est envoyée à un serveur, stockée ou enregistrée Une fois la page chargée, elle continue de fonctionner avec le réseau déconnecté. Enregistrements de suivi d'utilisation uniquement quel préréglage, arrière-plan et format vous avez utilisé, jamais l'image.
Des alternatives à un générateur de mattes en ligne
Un outil de navigation est un itinéraire parmi plusieurs.
- La plateforme' ; sa propre option d'ajustement. Certains écrans de téléchargement, Instagram' ; parmi eux, peuvent installer une photo à l'intérieur du cadre avec des barres simples au lieu de la recadrer. C'est rapide, mais vous obtenez peu ou pas de contrôle sur l'arrière-plan, le remplissage ou l'ombre.
- Éditeurs de photos téléphoniques. De nombreuses applications de galerie et applications d'édition ont un " ; fit" ; ou " ; pas de crop" ; mode avec un fond flou Ils fonctionnent bien pour des photos uniques sur le téléphone, et les résultats varient selon l'application.
- Logiciel de conception de bureau. Photoshop, Affinity ou Figma donnent un contrôle total, y compris les positions exactes des pixels Ils prennent plus de temps et ont besoin du logiciel installé.
- Ligne de commande. ImageMagick peut pad une image à une taille fixe avec
-gravity center -extent 1080x1080(en), qui convient aux travaux par lots sur un serveur.
Les avantages de l'approche côté client sont qu'elle ne nécessite aucune installation ni compte, fonctionne de la même manière sur n'importe quel système d'exploitation et garde la photo sur votre appareil Pour un seul post ou un petit lot qui est généralement l'option la plus rapide Pour des centaines d'images, un script gagne.
le hub d'outils de médias sociaux répertorie les utilitaires associés en un seul endroit, y compris le Générateur de cartes photo pour devis et cartes de nouvelles et le Filigrane d'image pour l'ajout d'un logo ou d'un crédit avant de publier.
