Lade ein Landschaftsfoto auf einen Instagram-Post hoch, ein großes Telefonfoto als LinkedIn-Linkbild, oder einen Screenshot auf X, und die Plattform entscheidet leise, welchen Teil davon die Leute sehen Es passt zum Bild zu einer von wenigen festen Formen und schneidet alles, was nicht passt, und es schneidet von der Mitte nach außen ab, wenn das Motiv in der Mitte ist, funktioniert das, wenn das Motiv ein Gesicht in der Nähe der Oberseite des Rahmens, ein Produkt auf der linken Seite oder eine Überschrift unten ist, schneidet die Plattform es weg.
Die Lösung besteht darin, das Bild selbst zu schneiden, genau in die Form, die der Feed haben möchte, und auszuwählen, welches Teil überlebt. Diese Anleitung behandelt die Größen und Seitenverhältnisse, die die Hauptplattformen anzeigen, die Geometrie einer Ernte, wie man einen Brennpunkt wählt, was der Anbau mit Qualität und Dateigröße macht und wie man das weiche, hochskalierte Ergebnis vermeidet, das Menschen auffängt. Die gearbeiteten Beispiele verwenden das kostenlose Social Media Image Cropper auf Toolz, das die gesamte Arbeit clientseitig erledigt.
tl; dr: Um ein Bild für soziale Medien zuschneiden, wählen Sie das Zielseitenverhältnis für die Plattform und Platzierung (z. B. 1080 x 1350 für einen Instagram-Porträtbeitrag, 1200 x 630 für eine Linkvorschau, 1600 x 900 für ein X-Postbild) und nehmen Sie die größte Region dieser Form, die in Ihr Foto passt, verankern Sie es auf dem wichtigen Teil und skalieren Sie es dann auf die genaue Pixelgröße. Ein auf 4:5 zugeschnittenes Telefonfoto 4032 x 3024 behält 60% seiner Fläche; auf 16:9 zugeschnitten, behält es 75%. Die Social Media Bilderbeschneider Tut dies auf einer Leinwand in Ihrem Browser mit einem neun-Punkte-Brennfeld, kostenlos, ohne Anmeldung, ohne Upload.
Was macht ein Social Media Image Cropper?
Ein Social-Media-Image-Cropper schneidet ein Foto auf das Seitenverhältnis, das eine Plattform anzeigt, und skaliert es auf die Pixelgröße dieser Plattform's, sodass die Plattform nichts mehr zu schneiden hat Es passieren zwei separate Vorgänge, und es hilft, sie auseinanderzuhalten:
- Ernte. Wählen Sie ein Rechteck im Inneren des Originals, das die Zielform hat Pixel außerhalb davon werden verworfen Pixel darin sind unberührt.
- Skala. Ändern Sie die Größe dieses Rechtecks auf die Zielabmessungen, z. B. 1080 x 1350. Hier kann sich die Qualität ändern, da das Bild neu abgetastet wird.
Ein generischer Bildeditor kann beides, aber er lässt Sie das Verhältnis finden, die Box von Hand zeichnen und sich die Ausgabegröße merken Ein dedizierter Cropper kennt die Größen, zeichnet automatisch die größte gültige Box und lässt Sie sie mit einem Klick verschieben Die Toolz-Version sagt Ihnen auch, was die Ernte gekostet hat, bevor Sie herunterladen: wie viel von der ursprünglichen Fläche überlebt und ob das Ergebnis verkleinert oder vergrößert wurde.
Welche Bildgrößen verwenden die Hauptplattformen?
Jedes Netzwerk rendert Feed-Bilder mit einem kleinen Satz von Seitenverhältnissen, und alles andere wird an das nächste angepasst Die Tabelle listet die 15 im Cropper integrierten Zielgrößen auf, die widerspiegeln, was jede Plattform derzeit ohne Nachschneiden anzeigt Plattformen überarbeiten diese von Zeit zu Zeit, behandeln sie also als aktuelle Anleitung und nicht als dauerhafte Spezifikation.
| Podest | Platzierung | Pixelgröße | Seitenverhältnis | wo es verwendet wird |
|---|---|---|---|---|
| Vierkantpfosten | 1080 x 1080 | 1: 1 | Der klassische Feedpost | |
| Porträtpost | 1080 x 1350 | 4: 5 | Der größte Teil des Feeds ermöglicht den größten Bildschirmplatz | |
| Landschaftsposten | 1080 x 566 | 1.91: 1 | Der Feed akzeptiert am breitesten | |
| Geschichte oder Rolle | 1080 x 1920 | 9:16 | Vollbild; Halten Sie den Text 250 px von oben und unten fern | |
| Fäden | Vierkantpfosten | 1080 x 1080 | 1: 1 | Uncropped in der Timeline angezeigt |
| Fäden | Porträtpost | 1080 x 1350 | 4: 5 | Höchste Threads-Displays ohne Zuschneiden |
| Bluesky | Vorschubbild | 1200 x 630 | 1,90:1 | Breite Bilder werden auf 1,91:1 zu gezogen |
| Bluesky | Quadratisches Bild | 1080 x 1080 | 1: 1 | Unbeschnitten dargestellt |
| X | Postbild | 1600 x 900 | 16: 9 | Vollständig ohne Wasserhahn dargestellt |
| X | Summenkarte | 1200 x 628 | 1.91: 1 | Große Link-Vorschaukarte |
| Futterpfahl | 1200 x 630 | 1,90:1 | Auch die Open Graph-Größe | |
| Futterpfahl | 1200 x 627 | 1.91: 1 | LinkedIn-Feed-Standard | |
| YouTube | Miniatur | 1280 x 720 | 16: 9 | Mindestens 1280 breit für den HD-Player |
| Standardstift | 1000 x 1500 | 2:3 | Höhere Stifte werden herabgestuft | |
| Open Graph | Link-vorschau | 1200 x 630 | 1,90:1 | Standardkarte die meisten Websites und Chat-Apps rendern |
Zwei Dinge stechen hervor Das "1.91:1" Familie (1200 x 630, 1200 x 628, 1200 x 627, 1080 x 566) ist eine Form mit leicht unterschiedlicher Rundung, und es ist die Form von fast jeder Linkvorschau im Web Es geht zurück auf die Open Graph-Protokoll, der die definiert og:image Tag-Sites verwenden, um ein Vorschaubild bereitzustellen Und die hohen Formate unterscheiden sich: Instagram und Threads stoppen bei 4:5, Pinterest geht zu 2:3 und Stories verwenden 9:16. Ein Crop serviert nicht alle.
Wenn Sie auch das Vorschaubild für eine Webseite einstellen, ist die Open GraphVorschau-Tool Zeigt an, wie dieses 1200 x 630 große Bild aussehen wird, sobald es geteilt wird.
Wie wird das Ernterechteck berechnet?
Der Zuschnitt ist das größte Rechteck der Zielform, das in das ursprüngliche Bild passt, ist das Bild breiter als die Zielform, behält der Zuschnitt die volle Höhe und beschneidet die Seiten, ist er höher, behält der Zuschnitt die volle Breite und schneidet die Ober - und Unterseite ab.
In Zahlen für eine Quelle der Breite W und Höhe H und ein Zielverhältnis R (Breite dividiert durch Höhe):
if W / H > R: crop width = H x R, crop height = H (trim the sides)
else: crop width = W, crop height = W / R (trim top and bottom)
Gearbeitetes Beispiel 1: ein 4032 x 3024 großes Telefonfoto zu einem Instagram-Porträtbeitrag.
- Quellverhältnis: 4032 / 3024 = 1,333. Zielverhältnis: 1080 / 1350 = 0,8.
- Die Quelle ist breiter, sodass die Ernte die volle Höhe von 3024 px behält.
- Erntebreite: 3024 x 0,8 = 2419,2 px.
- Gehaltene Fläche: 2419,2 / 4032 = 0,60, also sind 60% des Fotos erhalten und 40% sind von den Seiten beschnitten.
- Die Ernte wird dann von etwa 2419 x 3024 auf 1080 x 1350 skaliert.
Gearbeitetes Beispiel 2: dasselbe Foto zu einem X-Post-Bild.
- Zielverhältnis: 1600 / 900 = 1,778. Das Quellverhältnis ist kleiner 1,333, so dass die Ernte die volle Breite von 4032 px beibehält.
- Erntehöhe: 4032 / 1,778 = 2268 px.
- Behaltene Fläche: 2268 / 3024 = 0,75, also überleben 75%, wobei 756 px aus der Höhe geschnitten sind.
Gearbeitetes Beispiel 3: das gleiche Foto auf einen Pinterest-Pin.
- Zielverhältnis: 1000 / 1500 = 0,667. Erntebreite: 3024 x 0,667 = 2016 px.
- Gehaltene Fläche: 2016 / 4032 = 50%. Das Foto geht zur Hälfte.
Diese Prozentsätze sind das, was das Tool als & quot; 60% des Originals einhalten" angibt, und sie sind lesenswert, bevor Sie sich verpflichten Ein Zuschnitt, der die Hälfte des Rahmens behält, ist eine Kompositionsentscheidung, kein Formatierungsschritt.
Wie wählen Sie aus, welchen Teil des Bildes Sie behalten möchten?
Wählen Sie den Brennpunkt, der das Motiv hält, und denken Sie daran, dass es nur entlang der zu beschneidenden Achse wichtig ist Das Cropper's-Neunpunktgitter legt einen Fokus von 0, 0,5 oder 1 über jede Achse, der das Erntegut am linken Rand, in der Mitte oder am rechten Rand horizontal und oben, in der Mitte oder unten vertikal verankert.
Die Position wird so ausgearbeitet und dann festgeklemmt, damit der Schnitt nie vom Bild abläuft:
crop x = focusX x W - cropWidth / 2 (clamped between 0 and W - cropWidth)
crop y = focusY x H - cropHeight / 2 (clamped between 0 and H - cropHeight)
Im Arbeitsbeispiel 1 werden nur die Seiten beschnitten, daher ändert nur die horizontale Wahl etwas:
| Ankerkolonne | Ernte x | Spalten des Fotos aufbewahrt |
|---|---|---|
| Links | 0 | 0 bis 2419 |
| Zentrum | 806,4 | 806 bis 3226 |
| Recht | 1612.8 | 1613 bis 4032 |
Die obere, mittlere und untere Reihe liefern identische Ergebnisse für diese Ernte, da die volle Höhe bereits beibehalten wird. Es ist eine nützliche Überprüfung, wenn ein Klick nichts zu bewirken scheint: Die Ernte kann sich nur in eine Richtung frei bewegen.
Gearbeitetes Beispiel 4: ein Porträt-Telefonfoto als LinkedIn-Bild. Ein auf 1200 x 627 (Verhältnis 1,914) beschnittenes Foto 3024 x 4032 behält die volle Breite und ein Streifen 3024 / 1,914 = 1580 px ist groß Das sind 1580 / 4032 = 39% des Fotos Mit dem Standard-Mittelanker läuft der Streifen von y = 1226 bis y = 2806, was bei einem typischen Kopf-Schulter-Porträt die Brust ist, nicht das Gesicht. Durch Klicken der Obermitte wird der Streifen in y = 0 bis 1 liegt der Grund vor.
Ein paar Faustregeln für das Ankern:
- Personen: obere Reihe, da Gesichter normalerweise im oberen Drittel eines Rahmens sitzen.
- In eine Grafik eingebettete Schlagzeilen oder Bildunterschriften: die Zeile oder Spalte, in der der Text steht.
- Produkte und außermittige Themen: die passende Ecke oder Seite.
- Symmetrische Szenen und zentrierte Logos: Lassen Sie es im Mittelpunkt.
Wird das Zuschneiden die Bildqualität verringern?
Das Zuschneiden allein verringert nicht die Qualität, aber der Skalierungsschritt kann Die verbleibenden Pixel werden durch das Verwerfen von Pixeln außerhalb des Rahmens genau so belassen, wie sie waren. Durch die Größenänderung auf die Zielgröße kann sich das Ergebnis verbessern oder verschlechtern.
Die Verkleinerung ist sicher und lässt ein Foto oft knackiger aussehen, da in jedem Ausgabepixel mehrere Quellpixel gemittelt werden. Der Cropper zeichnet mit der Einstellung canvas's für hohe Glättungsqualität, wobei die drawImage Methode definiert in der WHATWG HTML-Canvas-Spezifikation. Durch die Skalierung können keine Details hinzugefügt werden, die nie erfasst wurden. Die Ausgabe wird größer, aber nicht schärfer und die Kanten sehen weich aus.
Gearbeitetes Beispiel 5: ein hochskalierter Screenshot. Ein 800 x 600 Screenshot, der für ein X-Post-Bild zugeschnitten wurde, behält die volle Breite von 800 px und einen 450 px hohen Streifen, 75% der Fläche, dass die Region 800 x 450 dann auf 1600 x 900 vergrößert wird, also doppelt so groß wie in jede Richtung. Das Tool sagt es unter der Vorschau: " Hochskaliert - die Quelle ist kleiner als das Ziel, also wird sie weich aussehen."
Der Schnelltest ist, die Schnittbreite mit der Zielbreite zu vergleichen, ist der Zuschnitt breiter als das Ziel, wird das Bild verkleinert und sieht gut aus, ist es schmaler, wird es vergrößert Bei Fotos hat eine Telefonkamera fast immer Pixel zu ersparen Screenshots, alte Bilder und Bilder, die von anderen Beiträgen gespeichert wurden, sind die üblichen Upscaling-Fälle, und die einzige wirkliche Lösung ist eine größere Quelle.
Sollten Sie PNG, JPEG oder WebP exportieren?
Exportieren Sie JPEG für Fotos, PNG für Screenshots, Text und Grafiken mit harten Kanten und WebP, wenn Sie die kleinste Datei haben möchten und wissen, dass das Ziel sie akzeptiert. Der Cropper wird standardmäßig auf PNG umgestellt, da er verlustfrei ist, und bietet alle drei an.
| Format | Kompression | am besten für | sich umsehen |
|---|---|---|---|
| PNG | Verlustfrei, wie von der W3 C PNG Standard | Screenshots, Benutzeroberfläche, Text, Logos, Transparenz | Große Dateien für Fotos |
| JPEG | Verlustbehaftet, die Methode in ITU-T T.81 | Fotografien | Halos um scharfen Text und Zeilen; keine Transparenz |
| WebP | Verlustbehaftet oder verlustfrei, beschrieben in Google's WebP-Dokumentation | Kleinste Dateien in ähnlicher Qualität | Ein paar ältere Tools können es nicht öffnen |
JPEG - und WebP-Exporte verwenden auf dem Canvas-Encoder eine Qualitätseinstellung von 0,92, die hoch genug ist, dass Komprimierungsartefakte auf Fotos kaum zu erkennen sind Die heruntergeladene Datei ist nach dem Original plus der Voreinstellung benannt, also team.jpg Für einen Instagram-Porträtbeitrag zugeschnitten, während JPEG als speichert team-ig-portrait.jpegdrohen
Die meisten Plattformen kodieren das, was Sie hochladen, trotzdem neu, so dass ein verlustfreies PNG eines Fotos nicht überlebt, wie PNG einmal gepostet hat Es fügt hauptsächlich Upload-Größe hinzu Für die Auswahl von Formaten in mehr Tiefe, die Bildformat-Konverter-Handbuch Vergleicht sie in mehr Anwendungsfällen.
Schritt für Schritt: Zuschneiden eines Bildes mit dem Werkzeug
der Image Cropper für Social Media Es besteht aus vier Schritten und die Vorschau-Leinwand ist dieselbe Leinwand, die die Datei erstellt. Sie genehmigen also, was Sie herunterladen.
- Fügen Sie das Bild hinzu. Eine Datei ablegen, klicken, um eine auszuwählen, oder ein Bild aus der Zwischenablage mit Cmd+V oder Strg+V einfügen Der Einfüge-Listener befindet sich auf der ganzen Seite, sodass ein in die Zwischenablage kopierter Screenshot direkt hineingeht, ohne vorher gespeichert zu werden Die Drop-Zone akzeptiert PNG, JPEG, WebP, GIF oder AVIF oder alles andere, was Ihr Browser dekodieren kann.
- Wählen Sie die Zielgröße. Das Menü Zielgröße gruppiert die 15 Voreinstellungen nach Plattform, die jeweils mit ihrer Pixelgröße und ihrem Pixelverhältnis beschriftet sind, und zeigt eine einzeilige Notiz darüber, wo die Größe verwendet wird. Standardmäßig ist der Instagram-Porträtbeitrag.
- Wählen Sie, was Sie behalten möchten. Klicken Sie auf einen der neun Punkte im Keep-Raster Die Vorschau zeichnet sofort neu.
- Überprüfen Sie die Zahlen und laden Sie. Lesen Sie unter der Vorschau die Zeile, in der der gehaltene Prozentsatz, die Zuschnittmaße und ob das Ergebnis herunterskaliert oder hochskaliert wird angegeben ist PNG, JPEG oder WebP auswählen und auf Herunterladen klicken.
Alles läuft auf einer HTML-Leinwand im Browser-Tab Das Bild wird nicht hochgeladen, gespeichert oder protokolliert, und die Seite arbeitet weiter mit dem Netzwerk aus Wie jedes Tool auf der Seite prüft der Download-Schritt ein tägliches Nutzungslimit.
Auf welche Fehler kann man da stoßen?
Die meisten Probleme kommen vom Dateiformat oder von der Größe der Quelle Die Meldungen sind spezifisch.
- " Diese Datei ist kein Bild. " Der Datei-'s-Typ beginnt nicht mit
image/(zum Beispiel ein PDF oder ein Video Die Meldung benennt die Datei. - " Dieses Bild konnte nicht gelesen werden. Es kann beschädigt sein oder in einem Format dekodiert dieser Browser nicht. " Die Datei behauptet ein Bild zu sein aber der Browser kann es nicht dekodieren, der übliche Fall ist ein iPhone HEIC Foto in einem Browser ohne HEIC Unterstützung Konvertieren Sie es zuerst in JPG mit dem Bildformatwandlerdrohen
- " Hochskaliert - die Quelle ist kleiner als das Ziel, so wird es weich aussehen. " Kein Fehler, eine Warnung Verwenden Sie ein größeres Original, wenn Sie eines haben.
- Das Brenngitter scheint nichts zu bewirken. Die Ernte wird nur entlang einer Achse beschnitten, sodass nur die Anker entlang dieser Achse sie bewegen.
- Tageslimit erreicht. Das kostenlose Nutzungs-Taggeld ist in Anspruch genommen.
Ein Effekt ist noch wissenswert, denn die Ausgabe wird aus Leinwandpixeln neu codiert, die heruntergeladene Datei trägt keine EXIF-Metadaten: keine Kameraeinstellungen, Aufnahmedatum oder GPS-Standort Bei öffentlich eingestellten Fotos ist das meist ein Datenschutzgewinn Die EXIF Entferner Ratgeber Erklärt, was diese Metadaten enthalten und warum es beim Teilen von Fotos wichtig ist.
Zuschneiden, Größenänderung oder Passen auf einen Hintergrund?
Das Zuschneiden ist eine von drei Möglichkeiten, ein Bild in eine feste Form zu bringen, und die richtige hängt davon ab, ob Sie es sich leisten können, etwas vom Bild zu verlieren.
| heraufkommen | Was passiert | Wann man es benutzen sollte | Werkzeug |
|---|---|---|---|
| Auf das Verhältnis zuschneiden | Beschneidet die Kanten, hält die Form exakt | Das Motiv ist ein Teil des Rahmens und die Kanten können weg | Social Media Image Cropper |
| Auf einer Matte passen | Schrumpft das ganze Bild auf einen farbigen oder unscharfen Hintergrund | Es darf nichts geschnitten werden, wie z.B. ein Artwork oder ein Gruppenfoto | Matte Generator |
| Nur Größe ändern | Ändert die Pixelabmessungen und behält das ursprüngliche Verhältnis bei | Das Verhältnis stimmt schon, oder die Plattform nimmt jede Form an | Bildgröße ändern |
| In Dias aufteilen | Schneidet ein breites Bild in aufeinanderfolgende Karusselldias | Ein Panorama zu breit für einen Beitrag | Karussell-Rollengenerator |
Wenn das Problem eher die Dateigröße als die Form ist, ist die Leitfaden zur Größenänderung des Bildes Bedeckt sich ohne Verzerrung verändernde Maße Wenn ein beschnittenes Bild öffentlich erscheint und Ihren Namen tragen sollte, wird die Wasserzeichen Fügt ein Logo oder eine Signatur in einer Ecke hinzu oder über den Rahmen gekachelt Der vollständige Satz von Bildtools zum Posten von Leben im Hub für Social-Media-Toolsdrohen
Warum überhaupt vor dem Hochladen zuschneiden?
Denn der Plattform-Crop wird von einer Software entschieden, die Ihr Motiv nicht sehen kann Jeder Feed rendert in festen Verhältnissen, und ein Upload in jeder anderen Form wird automatisch angepasst, normalerweise durch gleichmäßiges Zuschneiden von beiden Seiten der langen Dimension Einige Plattformen, darunter Bluesky, wenden diesen Crop nur in der Zeitleiste an, sodass das vollständige Bild existiert, die meisten Menschen es jedoch nie sehen.
Beim Zuschneiden geht es zunächst um drei Entscheidungen zurück zu Ihnen: Welcher Teil des Rahmens sichtbar ist, wie scharf das Ergebnis bei der genauen Displaygröße ist und wie groß die Datei ist. Pro Bild dauert es einige Sekunden, und es kommt am meisten auf die Bilder an, die den Menschen am Herzen liegen: Porträts, Produktaufnahmen und Grafiken mit Text am Rand Für diejenigen Zuschneiden des Bildes auf die Plattformgröße Da der Schwerpunkt auf dem Thema liegt, kostenlos, ohne Anmeldung und mit dem Hochladen einer Datei, hat der Feed keinen Grund, sich zu ändern.
