Man schießt eine weite Landschaft, öffnet den Post-Bildschirm, und die App bietet einem ein Quadrat mit den zwei besten abgeschnittenen Bergen Oder man macht einen Screenshot von einem Chart, und die Futterpflanze entfernt die Achsenbeschriftungen, die das Chart zum Teilen gemacht haben Das Bild ist in Ordnung Der Rahmen ist die falsche Form.
Es gibt zwei Auswege Man kann das Bild passend zum Rahmen zuschneiden, oder man stellt das ganze Bild auf einen Hintergrund, der bereits die richtige Form hat Der zweite Ansatz wird als matt bezeichnet, und es ist das, was die Matte Generator Builds: eine quadratische, portrait - oder geschichtenförmige Leinwand, in deren Inneren Ihr vollständiges Bild platziert ist, auf einer unscharfen Kopie von sich selbst oder einer einfarbigen Farbe. In dieser Anleitung wird erklärt, wann eine Matte einen Ausschnitt schlägt, wie die Geometrie funktioniert, was die Polsterung, der Radius und die Schatteneinstellungen in Pixeln bewirken und welche Ausgabegröße für jede Plattform ausgewählt werden soll.
tl; dr: Eine Matte ist der Hintergrund, auf dem ein Off-Shape-Foto sitzt, damit es ohne Beschneiden gepostet werden kann Anstatt ein 16:9-Bild auf 1:1 zu reduzieren, passen Sie das gesamte Bild in einen 1080 x 1080 oder 1080 x 1350-Rahmen und füllen den verbleibenden Raum mit einer unscharfen Kopie des Fotos oder einer einfarbigen Farbe. Der Matte Generator macht diese Clientseite auf einer HTML-Leinwand, mit 15 Plattform-Voreinstellungen, Polsterung von 0 bis 25%, abgerundeten Ecken, einem optionalen Drop-Schatten und PNG, JP- oder WebP-Export. Es ist kostenlos, keine Anmeldung und nichts wird hochgeladen.
Was ist eine Fotomatte?
Eine Fotomatte ist die Grenze zwischen einem Bild und dem Rand seines Rahmens Das Wort kommt vom Bilderrahmen, wo ein Mattenbrett mit einem geschnittenen Fenster zwischen einem Druck und dem Glas sitzt, damit das Bild nicht bis zum Rahmenrand läuft In den sozialen Medien ist die Idee die gleiche, ohne den Karton: das " frame" ist das Seitenverhältnis, das eine Plattform haben möchte, und das Matte ist das, was den Raum ausfüllt, den Ihr Bild nicht ausfüllt.
Die prägende Eigenschaft einer Matte ist, dass nichts aus dem Bild entfernt wird Jedes Pixel, das Sie komponiert haben, überlebt in den Beitrag Der Handel ist, dass das Bild nicht mehr die ganze Kachel füllt, also ist es kleiner auf dem Bildschirm als ein Ausschnitt des gleichen Fotos wäre.
Soll man eine Matte verwenden oder das Bild zuschneiden?
Zuschneiden, wenn das Motiv in der Mitte sitzt und die Kanten nebensächlich sind Verwenden Sie eine Matte, wenn die Kanten Informationen tragen, die Sie nicht verlieren können Das ist die ganze Entscheidung, und es lohnt sich, absichtlich zu treffen, anstatt zu akzeptieren, was auch immer der Upload-Bildschirm tut.
| Situation | Bessere Wahl | wieso |
|---|---|---|
| Porträt einer Person, einfacher Hintergrund | Ernte | Das Motiv füllt mehr von der Kachel und liest sich besser in Miniaturansicht |
| Weites Landschaftsbild oder Panorama | Matte | Die Breite ist der Punkt des Fotos |
| Screenshot eines Diagramms, Codes oder einer Konversation | Matte | Etiketten und Kanten tragen die Informationen |
| Produktaufnahme, die das gesamte Objekt zeigen muss | Matte | Das Einschneiden in das Produkt verfehlt den Zweck |
| Gruppenfoto mit Menschen an beiden Enden | Matte | Eine Ernte entfernt jemanden |
| Detailaufnahme oder Textur | Ernte | Es gibt keine sinnvolle Kante zu schützen |
| Sehr weites Panorama, durch das die Leute wischen sollen | Weder noch | Teilen Sie es stattdessen in ein Karussell auf |
Wenn Sie entscheiden, dass eine Ernte doch richtig ist, ist die Social Media Image Cropper Behandelt diese Seite der Entscheidung mit denselben Plattformvoreinstellungen Für ein Panorama, das für beide Ansätze zu breit ist, ist die Karussell-Rollengenerator Schneidet es in wischbare Platten.
Wie passt eine Matte ein Bild in ein Quadrat?
Die Anpassungsregel ist dieselbe, die CSS aufruft object-fit: contain, definiert in der CSS-Bilder Module Ebene 3 Spezifikation: skalieren Sie das Bild um den größten Faktor, der sowohl seine Breite als auch seine Höhe im Rahmen behält, und zentrieren Sie es dann. Im Code beträgt die Berechnung drei Zeilen:
const scale = Math.min(frame.width / image.width, frame.height / image.height)
const width = image.width * scale
const height = image.height * scale
Welche Dimension auf den Rahmenrand trifft, entscheidet zuerst über den Maßstab Ein breites Bild berührt den linken und rechten Rand und lässt Balken oben und unten ein hohes Bild berührt oben und unten und lässt Balken an den Seiten zurück Der Matte Generator trägt zuerst Polsterung auf, schrumpft den Rahmen, dann läuft dieser Passform innerhalb des Restes.
Ein gearbeitetes Beispiel mit reellen Zahlen
Machen Sie ein Landschaftsfoto von 1920 x 1080 (16:9) und legen Sie es auf das Instagram-Quadrat-Voreinstellung, 1080 x 1080, mit der standardmäßigen Polsterung von 6%.
- Die Polsterung beträgt 6% des Rahmens's kürzere Seite: 1080 x 0,06 = 64,8 Pixel an jeder Kante.
- Der für das Bild verbleibende Platz beträgt 1080 - (2 x 64,8) = 950,4 Pixel im Quadrat.
- Die Passformskala ist mit 950,4 / 1920 = 0,495 und 950,4 / 1080 = 0,880 kleiner, also 0,495.
- Das Bild ist mit 1920 x 0,495 = 950,4 breit und 1080 x 0,495 = 534,6 hoch gezeichnet.
- Es ist vertikal zentriert: (950,4 - 534,6) / 2 = 207,9 plus 64,8-Polsterung ergibt eine Oberkante von 272,7 Pixeln.
Das Tool meldet dies unter der Vorschau als & quot; bei 950 x 535 innerhalb eines 1080 x 1080 frame" anderen Fall können Sie genauso überprüfen.
Welche Ausgabegröße sollten Sie auswählen?
Wählen Sie die Größe der Platzierung, auf die Sie posten, und denken Sie daran, dass für ein breites Bild ein höherer Rahmen das Bild nicht größer macht Die Breite ist das, was es begrenzt Die folgende Tabelle passt für zwei Quellfotos mit 6% Polsterung auf die gleichen Anforderungen.
| Voreingestellt | Rahmen | Die Landschaft von 1920 x 1080 ist gezeichnet | Das Telefonporträt 1080 x 1920 ist gezeichnet |
|---|---|---|---|
| Instagram Platz Beitrag | 1080 x 1080 | 950 x 535 | 535 x 950 |
| Instagram-Porträtbeitrag (4:5) | 1080 x 1350 | 950 x 535 | 686 x 1220 |
| Instagram-Story oder Reel (9:16) | 1080 x 1920 | 950 x 535 | 950 x 1690 |
| X-Postbild (16:9) | 1600 x 900 | 1408 x 792 | 446 x 792 |
Zwei Dinge stechen hervor Für das Landschaftsfoto geben Quadrat und 4:5-Portrait eine identische Bildgröße; der Portraitrahmen fügt nur mehr Matt hinzu Also bei breiten Bildern ist Quadrat die aufgeräumtere Wahl Für das große Telefonfoto ergibt 4:5-Portrait das Bild etwa 28% mehr Höhe als ein Quadrat (1220 gegenüber 950 Pixel), weshalb Portrait die bessere Vorgabe für vertikale Aufnahmen ist.
Die vollständige voreingestellte Liste im Tool umfasst Instagram (Quadrat, Porträt, Landschaft, Geschichte), Threads (Quadrat, Porträt), Bluesky (Feedbild und Quadrat), X (Postbild und Zusammenfassungskarte), Facebook-Feed, LinkedIn-Feed, YouTube-Miniaturansicht, Pinterest-Standard-Pin und die Linkvorschau Open GraphPlattformen ändern ihre Ernte und kodieren Uploads neu, behandeln Sie diese also als & quot; was heute passt" statt einer Garantie.
Welchen Hintergrund sollte eine Matte verwenden?
Das Tool bietet vier Hintergründe: eine unscharfe Kopie des Bildes, eine von Ihnen gewählte Volltonfarbe, Weiß oder Schwarz. Die unscharfe Kopie ist die Standard- und normalerweise die beste Wahl für Fotos, da sie den Rahmen mit dem Bild füllt. & #39; eigene Palette, ohne dass Sie eine Farbe auswählen müssen.
| Hintergrund | sieht aus wie | am besten für | sich umsehen |
|---|---|---|---|
| Verschwommene Kopie des Bildes | Das bekannte Instagram "fill" schauen | Fotos, Reisen, Essen, alles bunte | Besetzt Bilder erzeugen eine geschäftige Kulisse |
| Einfarbig | Eine flache Karte hinter dem Bild | Markenkonten, Produktaufnahmen, Logos | Wählen Sie eine Farbe, die das Foto nicht bekämpft |
| Weiß | Galeriedruck auf weißer Wand | Minimale Feeds, Screenshots im Lichtmodus | Lichtschneide-Fotos verlieren ohne Schatten ihre Grenze |
| Schwarz | Kinobriefkasten | Nachtaufnahmen, Filmstills, dunkle UI-Screenshots | Dunkelkantige Fotos verlieren ohne Schatten ihre Grenze |
Wie die verschwommene Kulisse entsteht
Der unscharfe Hintergrund ist keine Vermutung auf eine passende Farbe Es ist das eigene Bild, beschnitten, um den ganzen Rahmen zu füllen, stark unscharf und leicht verdunkelt, mit dem scharfen Bild oben drauf gezeichnet Die Unschärfe benutzt die Leinwand filter Besitz, dokumentiert am MDN's CanvasRenderingContext2D.filter-Seite, und sein Radius skaliert mit dem Rahmen: 6% der kürzeren Seite, also 65 Pixel auf einem 1080-Quadrat.
Ein Detail ist wichtig für die Qualität Eine Unschärfe in der Nähe des Randes einer Leinwand durchschnittlich in transparenten Pixeln von außerhalb, die einen blassen Rand um den Rand herum hinterlässt Das Werkzeug vermeidet, indem es den Hintergrund auf jeder Seite 12% größer als den Rahmen zeichnet (130 Pixel Overdraw auf einem 1080-Quadrat), so dass die Unschärfe echte Bilddaten bis zum Rand zu proben hat Eine 12% schwarze Wäsche geht dann über die Oberseite, die das scharfe Motiv als Motiv lesen hält.
Was bewirken Polsterung, Eckradius und Schatten?
Alle drei Einstellungen sind proportional, sehen also mit 1080 Pixeln gleich aus wie mit 1600.
Polster Läuft von 0 bis 25% und wird an der kürzeren Seite von frame' s gemessen Bei 0 berührt ein breites Bild beide Seitenkanten und die Matte zeigt nur als Balken oben und unten: eine reine Letterbox Zwischen 4% und 8% liest sich als bewusste Umrandung, ohne das Bild stark zu verkleinern Größere Werte passen zu quote-card-Style-Posts, bei denen der Hintergrund Teil des Designs ist Auf einem 1080-Quadrat entfernt jeder Prozentpunkt der Polsterung 21,6 Pixel aus dem Bild' verfügbare Breite.
Eckradius Läuft von 0 bis 50% und wird gemessen an der platzierten Bild' s kürzere Seite, nicht der Rahmen Mit dem obigen Landschaftsbeispiel ist das Bild 534,6 Pixel groß, so dass der Standardradius von 12% jede Ecke um etwa 64 Pixel rundet Bei 50% werden die kurzen Seiten zu vollen Halbkreisen, was eine Pillenform ergibt.
Schlagschatten Ist standardmäßig auf Es ist ein 28% schwarzer Schatten mit einer Unschärfe von 3% des Frames' s kürzere Seite und einem Versatz von 1% nach unten, was auf einem 1080-Frame eine 32-Pixel-Unschärfe und einen 11-Pixel-Drop bedeutet Es trennt das Bild von einem Hintergrund ähnlicher Helligkeit, was genau dort der Fall ist, wo weiße oder schwarze Matten Hilfe benötigen.
Wie man ein Foto auf eine Matte legt, Schritt für Schritt
- Öffne das Freier Mattgenerator und fügen Sie Ihr Bild hinzu, indem Sie eine Datei ablegen, zum Durchsuchen klicken oder aus der Zwischenablage einfügen Einfügen ist der schnellste Weg für Screenshots.
- Wählen Sie die Ausgabegröße aus der gruppierten voreingestellten Liste. Beginnen Sie mit Instagram-Quadrat für große Fotos und Instagram-Porträt für große Fotos.
- Wählen Sie den Hintergrund Bewahren Sie die unscharfe Kopie für Fotos auf; wechseln Sie zu einer Volltonfarbe und geben Sie einen Hex-Wert für die Markenarbeit ein.
- Passen Sie die Polsterung, den Eckradius und den Schattenumschalter an, während Sie die Vorschau ansehen. Die Vorschau-Leinwand rendert in der tatsächlichen Ausgabegröße, Sie sehen also die Datei, die Sie erhalten.
- Wählen Sie ein Format und laden Sie die Datei nach Ihrem Original mit
-matteHinzugefügt, alsobeach.jpgwirdbeach-matte.pngdrohen
PNG, JPEG oder WebP: welches Format sollte man exportieren?
Exportieren Sie PNG, wenn das Ergebnis Transparenz oder scharfen Text hat, JPEG, wenn Sie eine kleine Datei haben möchten, die jede Plattform akzeptiert, und WebP, wenn Sie die kleinste Datei wünschen und das Ziel sie unterstützt JPEG und WebP werden mit einer Qualität von 92% codiert.
| Format | Kompression | Hält Transparenz | Typische Verwendung |
|---|---|---|---|
| PNG | verlustlos | ja | Screenshots, Logos auf transparenter Matt, Archivierung des Ergebnisses |
| JPEG | Verlustbehaftet, Qualität 0,92 | Nein, flacht ab bis undurchsichtig | Fotobeiträge auf jeder Plattform |
| WebP | Verlustbehaftet, Qualität 0,92 | ja | Websites und Plattformen, die WebP akzeptieren |
Die meisten sozialen Plattformen kodieren das, was man hochlädt, ohnehin neu, sodass das Exportformat für den Feed weniger zählt als für die eigene Kopie, wenn man vorhat, das Ergebnis weiter zu bearbeiten, behält man ein PNG, wenn die Datei vor dem Hochladen kleiner sein muss, wird die Bildkomprimierungshandbuch Geht tiefer durch die Qualitätseinstellungen.
Kann man ein transparentes PNG verwenden?
Ja, und es funktioniert gut für Logos und ausgeschnittene Produktaufnahmen Ein transparentes PNG, das sauber auf einfarbige Verbundwerkstoffe gelegt wird, so dass eine matte wird eine schnelle Möglichkeit, ein Logo auf einem Markenquadrat zu setzen Wenn Sie einen Hintergrund zuerst entfernen müssen, die Hintergrundentferner-Anleitung Deckt diesen Schritt ab Exportieren Sie das Ergebnis als PNG oder WebP, um die Transparenz in der Datei aufrechtzuerhalten; JPEG hat keinen Alphakanal und wird ihn platt machen.
Reduziert eine Matte die Bildqualität?
Nein, solange die Quelle größer ist als der Raum, in den sie hineingezogen wird, sind die Ausgabevoreinstellungen 1080 Pixel oder breiter, und ein typisches Telefonfoto ist auf seiner Längsseite 3000 bis 4000 Pixel groß, das Bild wird also verkleinert, was nichts Sichtbares verliert Die Leinwand zeichnet es mit hochwertiger Glättung.
Die eine Ausnahme ist eine kleine Quelle, Wenn man ein 600 x 400 Bild in ein 1080 Quadrat mit 6% Polsterung legt, muss es auf 950 x 634 skaliert werden, also um den Faktor etwa 1,58, und es wird weich aussehen aus dem gleichen Grund wie jede Vergrößerung Das Tool kann keine Details hinzufügen, die nie in der Datei waren Wenn Ihre Quelle klein ist, reduzieren Sie die Polsterung oder wählen Sie eine kleinere Voreinstellung, damit der Skalenfaktor nahe bei 1 bleibt. Die Leitfaden zur Größenänderung des Bildes Erklärt, warum die Hochskalierung verschwimmt und wann sie akzeptabel ist.
Häufige Fehler und Fehlermeldungen
Ein paar Probleme kommen oft genug vor, um sie zu nennen.
- " Diese Datei ist kein Bild. " Das Tool überprüft vor der Dekodierung den von file' s gemeldeten MIME-Typ Ein PDF oder ein versehentlich hineingezogenes Dokument wird in diesem Schritt abgelehnt.
- " Dieses Bild konnte nicht gelesen werden. " Die Datei behauptet, ein Bild zu sein, aber der Browser konnte es nicht dekodieren Dies geschieht bei beschädigten Downloads und bei Formaten, die ein bestimmter Browser nicht unterstützt Die Dropzone listet PNG, JPEG, WebP, GIF und AVIF auf; HEIC-Fotos von einem iPhone müssen normalerweise zuerst konvertiert werden.
- Die Matte sieht grau statt bunt aus. Sie haben wahrscheinlich die Vollfarboption ausgewählt und die Standardversion hellgrau gelassen Schalten Sie den Hintergrund zurück zur unscharfen Kopie.
- Ein weißes Bild verschwindet in einer weißen Mattheit. Schalten Sie den Schatten ein, fügen Sie eine kleine Polsterung hinzu oder wechseln Sie zum unscharfen Hintergrund.
- Der Beitrag wird immer noch beschnitten. Die von Ihnen exportierte Voreinstellung stimmt nicht mit der Stelle überein, an der Sie sie gepostet haben. Ein als Instagram-Feed-Beitrag hochgeladenes Bild mit 1200 x 630 Open Graph wird zugeschnitten, da 1,91:1 nur als Landschaftspost akzeptiert wird.
- Der Download startet nicht. Downloads zählen auf ein tägliches Nutzungslimit an, wenn das Limit erreicht ist, zeigt das Tool eher eine Nachricht als eine Datei an.
Wird etwas hochgeladen?
Nr. Das Bild wird mit einer lokalen Objekt-URL gelesen, die auf einem HTML-Code zusammengesetzt ist <canvas> Element in Ihrer Browser-Registerkarte und mit der Leinwand in eine Datei kodiert toBlob Methode beschrieben in der WHATWG HTML-Canvas-Spezifikation. Es werden keine Bilddaten an einen Server gesendet, gespeichert oder protokolliert, sobald die Seite geladen wurde, arbeitet sie weiter mit dem Netzwerk getrennt Die Nutzungsverfolgung zeichnet nur auf, welche Voreinstellung, welchen Hintergrund und welches Format Sie verwendet haben, niemals das Bild.
Alternativen zu einem Online-Matte-Generator
Ein Browser-Tool ist eine Route unter mehreren.
- Die Plattform's eigene Passformoption. Einige Upload-Bildschirme, darunter Instagram's, können ein Foto mit schlichten Balken in den Rahmen integrieren, anstatt es zuzuschneiden. Es geht schnell, aber Sie haben kaum oder gar keine Kontrolle über den Hintergrund, die Polsterung oder den Schatten.
- Telefon-Bildbearbeitungsprogramme. Viele Galerie-Apps und Bearbeitungs-Apps verfügen über einen & quot; fit" oder & quot; no crop" Modus mit unscharfem Hintergrund Sie funktionieren gut für einzelne Fotos auf dem Telefon, und die Ergebnisse variieren je nach App.
- Desktop-Designsoftware. Photoshop, Affinity oder Figma geben volle Kontrolle, auch über exakte Pixelpositionen, sie dauern länger und müssen mit der Software installiert werden.
- Befehlszeile. ImageMagick kann ein Bild auf eine feste Größe padden mit
-gravity center -extent 1080x1080, was für Batch-Jobs auf einem Server geeignet ist.
Die Vorteile des clientseitigen Ansatzes sind, dass er keine Installation oder Konto benötigt, auf jedem Betriebssystem gleich funktioniert, und das Foto auf Ihrem Gerät behält Für einen einzelnen Beitrag oder einen kleinen Stapel, der normalerweise die schnellste Option ist Bei Hunderten von Bildern gewinnt ein Skript.
der Hub für Social-Media-Tools Listet die zugehörigen Dienstprogramme an einem Ort auf, einschließlich der Fotokartengenerator Für Zitat - und Nachrichtenkarten und die Bild Wassermarker Für das Hinzufügen eines Logos oder Guthabens, bevor Sie posten.
