Je schiet een breed landschap, opent het postscherm, en de app biedt je een vierkant met de twee beste bergen afgesneden Of je maakt een screenshot van een grafiek, en de feed crop verwijdert de aslabels die de kaart de moeite waard maakten om te delen Het plaatje is prima Het frame heeft de verkeerde vorm.
Er zijn twee uitwegen Je kunt de afbeelding bijsnijden zodat deze bij het frame past, of je kunt de hele afbeelding op een achtergrond zetten die al de juiste vorm heeft De tweede benadering wordt een matte genoemd, en het is wat de Matte Generator bouwt: een vierkant, portret - of verhaalvormig canvas met daarin je volledige afbeelding geplaatst, op een wazige kopie van zichzelf of een effen kleur Deze gids legt uit wanneer een mat een uitsnede verslaat, hoe de geometrie werkt, wat de opvulling, straal - en schaduwinstellingen doen in pixels, en welke uitvoergrootte voor elk platform moet worden gekozen.
tl;dr: Een mat is de achtergrond waarop een afwijkende foto zit, zodat deze kan worden geplaatst zonder te worden bijgesneden. In plaats van een 16:9-afbeelding terug te brengen tot 1:1, past u de hele afbeelding in een frame van 1080 x 1080 of 1080 x 1350 en vult u de overgebleven ruimte met een wazige kopie van de foto of een effen kleur. De Matte Generator doet deze clientzijde op een HTML-canvas, met 15 platformvoorinstellingen, opvulling van 0 tot 25%, afgeronde hoeken, een optionele slagschaduw en PNG-, JPEG- of WebP-export. Het is gratis, geen aanmelding en er wordt niets geüpload.
Wat is een fotomat?
Een fotomat is de rand tussen een plaatje en de rand van zijn lijst Het woord komt van picture framing, waarbij een matbord met een gesneden venster tussen een print en het glas zit zodat het beeld niet naar de frame rand loopt Op social media is het idee hetzelfde, zonder het karton: de " frame" is de beeldverhouding die een platform wil, en de matte is wat de ruimte vult die je plaatje niet vult.
De bepalende eigenschap van een mat is dat er niets uit de afbeelding wordt verwijderd Elke pixel die je hebt samengesteld overleeft in de post De handel is dat de afbeelding niet langer de hele tegel vult, dus het is kleiner op het scherm dan een bijsnijding van dezelfde foto zou zijn.
Moet je een mat gebruiken of de afbeelding bijsnijden?
Bijsnijden als het onderwerp in het midden zit en de randen incidenteel zijn Gebruik een mat als de randen informatie bevatten die je niet kunt verliezen Dat is de hele beslissing, en het is de moeite waard om met opzet te nemen in plaats van te accepteren wat het uploadscherm ook doet.
| betrekking | Betere keuze | waarom |
|---|---|---|
| Portret van één persoon, effen achtergrond | Gewas | Het onderwerp vult meer van de tegel en leest beter op miniatuurformaat |
| Breed landschap of panorama | Matte | De breedte is het punt van de foto |
| Schermafbeelding van een grafiek, code of een gesprek | Matte | Etiketten en randen dragen de informatie |
| Productopname die het hele object moet laten zien | Matte | Het snijden in het product schiet het doel voorbij |
| Groepsfoto met mensen aan beide uiteinden | Matte | Een gewas verwijdert iemand |
| Detailopname of textuur | Gewas | Er is geen betekenisvolle rand om te beschermen |
| Zeer breed panorama waar je mensen doorheen wilt laten vegen | Noch | Splits het in plaats daarvan in een carrousel |
Als je besluit dat een oogst toch goed is, zal de Social Media Image Cropper behandelt die kant van de beslissing met dezelfde platformvoorinstellingen Voor een panorama dat te breed is voor beide naderingen, is de Carrousel Scroll Generator snijdt het in veegbare panelen.
Hoe past een matte een afbeelding in een vierkant?
De pasregel is dezelfde CSS-aanroepen object-fit: contain, gedefinieerd in de CSS-beelden Module Niveau 3 specificatie: schaal de afbeelding met de grootste factor die zowel de breedte als de hoogte binnen het frame houdt, en centreer deze vervolgens. In code bestaat de berekening uit drie regels:
const scale = Math.min(frame.width / image.width, frame.height / image.height)
const width = image.width * scale
const height = image.height * scale
Welke afmeting ook de framerand raakt, bepaalt eerst de schaal Een brede afbeelding raakt de linker - en rechterrand en laat staven boven en onder achter Een hoge afbeelding raakt de boven - en onderkant en laat staven achter aan de zijkanten De Matte Generator brengt eerst opvulling aan, krimpt het frame, en laat deze pasvorm vervolgens binnen wat overblijft.
Een uitgewerkt voorbeeld met reële getallen
Maak een landschapsfoto uit 1920 x 1080 (16:9) en plaats deze op de voorinstelling van het Instagram-vierkant, 1080 x 1080, met de standaard opvulling van 6%.
- De vulling is 6% van het frame en #39;s kortere zijde: 1080 x 0,06 = 64,8 pixels aan elke rand.
- De ruimte die overblijft voor de afbeelding is 1080 - (2 x 64,8) = 950,4 pixels in het vierkant.
- De fitschaal is de kleinste van 950,4 /1920 = 0,495 en 950,4 /1080 = 0,880, dus 0,495.
- De afbeelding is getekend op 1920 x 0,495 = 950,4 breed en 1080 x 0,495 = 534,6 hoog.
- Het is verticaal gecentreerd: (950,4 - 534,6) /2 = 207,9, plus de opvulling van 64,8, brengt de bovenrand op 272,7 pixels.
De tool rapporteert dit onder de preview als " geplaatst op 950 x 535 binnen een frame" van 1080 x 1080; U kunt elk ander geval op dezelfde manier controleren.
Welke uitvoergrootte moet u kiezen?
Kies de grootte van de plaatsing waarop u plaatst en onthoud dat voor een brede afbeelding een groter frame de afbeelding niet groter maakt. De breedte is wat deze beperkt. De onderstaande tabel past op dezelfde manier voor twee bronfoto's, met een opvulling van 6%, over de gebruikelijke presets.
| Voorinstelling | Frame | 1920 x 1080 landschap is getekend op | Telefoonportret uit 1080 x 1920 is getekend op |
|---|---|---|---|
| Instagram vierkante post | 1080 x 1080 | 950 x 535 | 535 x 950 |
| Instagram portretpost (4:5) | 1080 x 1350 | 950 x 535 | 686 x 1220 |
| Instagram-verhaal of rol (9:16) | 1080 x 1920 | 950 x 535 | 950 x 1690 |
| X postafbeelding (16:9) | 1600 x 900 | 1408 x 792 | 446 x 792 |
Twee dingen vallen op Voor de landschapsfoto geven vierkant en 4:5 portret een identieke beeldgrootte; het portretframe voegt alleen maar meer mat toe Dus voor brede plaatjes is vierkant de nettere keuze Voor de hoge telefoonfoto geeft 4:5 portret het beeld ongeveer 28% meer hoogte dan een vierkant (1220 tegen 950 pixels), daarom is portret de betere standaard voor verticale opnamen.
De volledige vooraf ingestelde lijst in de tool omvat Instagram (vierkant, portret, landschap, verhaal), Threads (vierkant, portret), Bluesky (feedafbeelding en vierkant), X (postafbeelding en samenvattende kaart), Facebook-feed, LinkedIn-feed, YouTube miniatuur, Pinterest-standaardpin en de Open Graph-linkvoorbeeld Platforms wijzigen hun gewassen en coderen uploads opnieuw, dus behandel deze als "wat past vandaag en quot; in plaats van een garantie.
Welke achtergrond moet een mat gebruiken?
De tool biedt vier achtergronden: een wazige kopie van de afbeelding, een effen kleur die je kiest, wit of zwart. De wazige kopie is de standaard en meestal de beste keuze voor foto's, omdat deze het frame vult met de afbeelding en #39; zijn eigen palet zonder dat je een kleur hoeft te kiezen.
| achtergrond | lijkt op | het beste voor | uitzien voor |
|---|---|---|---|
| Wazige kopie van de afbeelding | De bekende Instagram "fill" kijk | Foto's, reizen, eten, alles wat kleurrijk is | Drukke beelden zorgen voor een drukke achtergrond |
| Effen kleur | Een platte kaart achter de afbeelding | Merkaccounts, productshots, logo's | Kies een kleur die niet tegen de foto vecht |
| White | Galerijprint op een witte muur | Minimale feeds, screenshots in de lichtmodus | Lichtgerande foto's verliezen hun grens zonder schaduw |
| Black | Bioscoop brievenbus | Nachtopnamen, filmstills, donkere UI-screenshots | Donkergerande foto's verliezen hun grens zonder schaduw |
Hoe de wazige achtergrond wordt gemaakt
De wazige achtergrond is geen gok op een bijpassende kleur Het is je eigen afbeelding, bijgesneden om het hele frame te vullen, zwaar wazig en iets donkerder gemaakt, met het scherpe beeld erbovenop getekend De waas maakt gebruik van het canvas filter eigendom, gedocumenteerd op MDN's CanvasRenderingContext2D.filter pagina, en de straal schaalt met het frame: 6% van de kortere zijde, dus 65 pixels op een vierkant van 1080.
Eén detail is van belang voor de kwaliteit Een onscherpte nabij de rand van een canvas is gemiddeld in transparante pixels van buitenaf, waardoor er een bleke rand rond de rand overblijft. Het gereedschap vermijdt dat door de achtergrond aan elke kant 12% groter te tekenen dan het frame (130 pixels rood staan op een vierkant van 1080), zodat de onscherpte echte beeldgegevens heeft om tot aan de rand te bemonsteren. Een zwarte wassing van 12% gaat dan over de bovenkant, waardoor het scherpe onderwerp als onderwerp blijft lezen.
Wat doen opvulling, hoekradius en schaduw?
Alle drie de instellingen zijn proportioneel, dus ze zien er bij 1080 pixels hetzelfde uit als bij 1600.
vulling loopt van 0 tot 25% en wordt gemeten tegen de frame' s kortere kant Bij 0 raakt een brede afbeelding beide zijranden en toont de matte alleen als balken boven en onder: een pure brievenbus Tussen 4% en 8% leest als een bewuste rand zonder de afbeelding veel te verkleinen Grotere waarden passen bij quote-card stijl berichten waarbij de achtergrond deel uitmaakt van het ontwerp Op een 1080 vierkant verwijdert elk procentpunt van opvulling 21,6 pixels uit de afbeelding 's beschikbare breedte.
Hoekradius loopt van 0 tot 50% en wordt gemeten tegen de geplaatste afbeelding' s kortere zijde, niet het frame Met het landschap voorbeeld hierboven, is de afbeelding 534,6 pixels hoog, dus de standaard 12% straal rondt elke hoek met ongeveer 64 pixels. Bij 50% worden de korte zijden volledige halve cirkels, waardoor een pilvorm ontstaat.
Slagschaduw staat standaard aan Het is een 28% zwarte schaduw met een vervaging van 3% van het frame' s kortere kant en een neerwaartse offset van 1%, wat op een 1080 frame betekent een 32-pixel vervaging en een 11-pixel daling Het scheidt de afbeelding van een achtergrond van vergelijkbare helderheid, wat precies het geval is waar witte of zwarte matten hulp nodig hebben.
Hoe een foto op een mat te zetten, stap voor stap
- Open de gratis matte generator en voeg je afbeelding toe door een bestand te laten vallen, te klikken om te bladeren of te plakken vanaf het klembord Plakken is de snelste route voor screenshots.
- Kies de uitvoergrootte uit de gegroepeerde voorinstellingslijst Begin met Instagram vierkant voor brede foto's en Instagram portret voor hoge.
- Kies de achtergrond Bewaar de wazige kopie voor foto's; schakel over naar een effen kleur en typ een hex-waarde voor merkwerk.
- Pas opvulling, hoekradius en de schaduwschakelaar aan tijdens het bekijken van de preview Het preview canvas geeft weer op de echte uitvoergrootte, dus wat je ziet is het bestand dat je krijgt.
- Kies een formaat en download Het bestand is vernoemd naar uw origineel met
-mattetoegevoegd, dusbeach.jpgHALDbeach-matte.png.
PNG, JPEG of WebP: welk formaat moet u exporteren?
Exporteer PNG wanneer het resultaat transparantie of scherpe tekst heeft, JPEG wanneer u een klein bestand wilt dat elk platform accepteert, en WebP wanneer u het kleinste bestand wilt en de bestemming dit ondersteunt JPEG en WebP zijn gecodeerd met een kwaliteit van 92%.
| formaat | Compressie | Houdt transparantie | Typisch gebruik |
|---|---|---|---|
| Great | zonder verlies | ja | Screenshots, logo's op een transparante matte, archivering van het resultaat |
| JPEG | Verliesgevend, kwaliteit 0,92 | Nee, wordt plat tot ondoorzichtig | Fotoposten op elk platform |
| WEBP | Verliesgevend, kwaliteit 0,92 | ja | Websites en platforms die WebP accepteren |
De meeste sociale platforms coderen hoe dan ook opnieuw wat u uploadt, dus het exportformaat is minder belangrijk voor de feed dan voor uw eigen exemplaar Als u van plan bent het resultaat verder te bewerken, bewaar dan een PNG. Als het bestand kleiner moet zijn voordat het wordt geüpload, moet de Afbeeldingscompressiegids wandelt dieper door de kwaliteitsinstellingen.
Kun je een transparante PNG gebruiken?
Ja, en het werkt goed voor logo's en uitgeknipte productopnamen Een transparante PNG die schoon op een effen kleur composieten wordt geplaatst, dus een matte wordt een snelle manier om een logo op een merkvierkant te plaatsen Als je eerst een achtergrond moet verwijderen, wordt de gids voor achtergrondverwijderaars dekt die stap Exporteer het resultaat als PNG of WebP om de transparantie in het bestand te behouden; JPEG heeft geen alfakanaal en zal het plat maken.
Vermindert een matte beeldkwaliteit?
Nee, zolang de bron groter is dan de ruimte waarin hij wordt ingetekend De uitgangsvoorinstellingen zijn 1080 pixels of breder, en een typische telefoonfoto is 3000 tot 4000 pixels aan de lange kant, dus het beeld wordt verkleind, waardoor er niets zichtbaars verloren gaat Het canvas tekent het met hoogwaardige afvlakking.
De enige uitzondering is een kleine bron Als je een 600 x 400 afbeelding in een 1080 vierkant met 6% vulling plaatst, moet deze worden opgeschaald naar 950 x 634, een factor van ongeveer 1,58, en zal het er zacht uitzien om dezelfde reden als elke vergroting.De tool kan geen details toevoegen die nooit in het bestand stonden. Als uw bron klein is, verklein dan de vulling of kies een kleinere voorinstelling, zodat de schaalfactor dicht bij 1 blijft. De gids voor het wijzigen van de grootte van de afbeelding verklaart waarom opschaling vervaagt en wanneer het acceptabel is.
Veelvoorkomende fouten en foutmeldingen
Een paar problemen komen vaak genoeg naar voren om te noemen.
- "Dat bestand is geen afbeelding." De tool controleert het bestand' s gerapporteerd MIME-type vóór het decoderen Een PDF of een document dat per ongeluk wordt binnengesleept, wordt bij deze stap afgewezen.
- "Die afbeelding kon niet worden gelezen." Het bestand beweert een afbeelding te zijn maar de browser kon deze niet decoderen Dit gebeurt bij corrupte downloads en bij formaten die een bepaalde browser niet ondersteunt De dropzone vermeldt PNG, JPEG, WebP, GIF en AVIF; HEIC foto's van een iPhone moeten meestal eerst worden geconverteerd.
- De mat ziet er grijs uit in plaats van kleurrijk. Waarschijnlijk heb je de optie effen kleur gekozen en de standaard lichtgrijs gelaten Schakel de achtergrond terug naar het wazige exemplaar.
- Een wit beeld verdwijnt in een wit mat. Zet de schaduw aan, voeg een beetje vulling toe of schakel over naar de wazige achtergrond.
- De post wordt nog steeds bijgesneden. De preset die je exporteerde komt niet overeen met waar je het hebt gepost. Een 1200 x 630 Open Graph-afbeelding die als Instagram-feedpost is geüpload, wordt bijgesneden, omdat 1,91:1 alleen als landschapspost wordt geaccepteerd.
- De download start niet. Downloads tellen mee voor een dagelijkse gebruikslimiet Wanneer de limiet wordt bereikt, toont de tool een bericht in plaats van een bestand.
Is er iets geüpload?
Nee. De afbeelding wordt gelezen met een lokale object-URL, samengesteld op een HTML <canvas> element in uw browsertabblad en gecodeerd naar een bestand met het canvas toBlob werkwijze beschreven in de WHATWG HTML canvas specificatie. Er worden geen beeldgegevens naar een server verzonden, opgeslagen of gelogd Zodra de pagina is geladen, blijft deze werken met het netwerk verbroken Gebruiksvolgrecords alleen welke voorinstelling, achtergrond en formaat u hebt gebruikt, nooit de afbeelding.
Alternatieven voor een online matte generator
Een browsertool is één van de vele routes.
- Het platform's eigen pasvormoptie. Sommige uploadschermen, Instagram' s onder hen, kunnen een foto in het frame passen met gewone balken in plaats van deze bij te snijden. Het is snel, maar je krijgt weinig of geen controle over de achtergrond, opvulling of schaduw.
- Telefoon foto editors. Veel galerij-apps en bewerkingsapps hebben een "fit" of " geen crop" modus met een wazige achtergrond Ze werken goed voor afzonderlijke foto's op de telefoon, en de resultaten variëren per app.
- Desktop ontwerp software. Photoshop, Affinity of Figma geven volledige controle, inclusief exacte pixelposities Ze duren langer en hebben de software geïnstalleerd nodig.
- Commandoregel. ImageMagick kan een afbeelding op een vast formaat pad met
-gravity center -extent 1080x1080, wat past bij batchtaken op een server.
De voordelen van de client-side benadering zijn dat het geen installatie of account nodig heeft, hetzelfde werkt op elk besturingssysteem, en de foto op je apparaat houdt Voor een enkele post of een kleine batch die meestal de snelste optie is Voor honderden afbeeldingen wint een script.
de hub voor sociale media-instrumenten vermeldt de gerelateerde hulpprogramma's op één plaats, inclusief de fotokaartgenerator voor offerte - en nieuwskaarten en de Afbeelding Watermarker voor het toevoegen van een logo of tegoed voordat u post.
