Skip to main content

Image Cropper

Crop images with preset aspect ratios like 1:1, 16:9, and 4:3 using a visual editor.

Geprüft von · Zuletzt geprüft

✂️

Drop an image here or click to upload

Supports JPG, PNG, WebP

So nutzt du den Bild-Zuschneider

  1. Foto laden durch Ziehen auf die Canvas oder Klicken auf die Dateiauswahl. Das Bild wird mit createImageBitmap dekodiert, sodass es sofort gerendert wird, auch für große Quellen.
  2. Seitenverhältnis wählen aus der Preset-Zeile: Frei, 1:1, 16:9, 4:3, 3:2 oder 9:16. "Frei" lässt jedes Rechteck zeichnen; die festen Presets beschränken beide Achsen des Ziehvorgangs.
  3. Auf dem Bild klicken und ziehen, um das Zuschnitts-Rechteck zu zeichnen. Ein Drittelregel-Raster-Overlay erscheint, sodass ein Motiv an einem Schnittpunkt ausgerichtet werden kann.
  4. Auswahl anpassen durch Ziehen der Eckgriffe oder der Mitte des Rechtecks. Pixelbreite und -höhe werden in der Symbolleiste live aktualisiert.
  5. "Zuschneiden" drücken. Das Tool kopiert nur den ausgewählten Bereich auf eine neue Canvas via drawImage(source, sx, sy, sw, sh, 0, 0, sw, sh) und bietet das exportierte PNG zum Download an.

Was das Zuschneiden tatsächlich mit deinen Pixeln macht

Das Zuschneiden ist die freundlichste aller Bildbearbeitungen aus Qualitätssicht: es ist eine verlustfreie Operation. Die Quellpixel innerhalb des Auswahl-Rechtecks werden byte-für-byte in die Ausgabe kopiert, ohne Neuabtastung, Interpolation oder Neukodierung des verbleibenden Bereichs. Wenn du ein 6000x4000-Foto auf ein 3000x3000-Quadrat zuschneidest, sind die resultierenden drei Megapixel genau dieselben Farbwerte, die sie im Original hatten, nur mit allem anderen weggeworfen.

Unter der Haube verwendet der Browser die Neun-Argument-Form von drawImage, die dem Canvas-2D-Kontext sagt, "nimm dieses Rechteck aus der Quelle und male es an dieses Rechteck im Ziel". Da die Quell- und Zielrechtecke gleich groß sind, läuft kein Neuabtastungsfilter. Das finale PNG wird durch die DEFLATE-Pipeline des Browsers kodiert, wobei Alpha erhalten bleibt, wenn die Quelle es hatte. Der einzige verlustbehaftete Schritt im gesamten Arbeitsablauf ist, wenn du mit einem JPEG begonnen hast - diese DCT-Quantisierungsartefakte sind in die Quelle eingebrannt und kommen mit.

Wann Zuschneiden die richtige Wahl ist

  • Eine Landschaftsaufnahme in ein 1:1-Quadrat für einen Instagram-Feed-Post umrahmen, ohne das Motiv zu verzerren.
  • Einen 9:16-vertikalen Ausschnitt aus einem horizontalen Foto für Stories, Reels oder TikTok schneiden.
  • Ablenkende Elemente am Rand eines Fotos entfernen (ein verirrter Arm, ein Bildstörer, ein rotes Hütchen).
  • Ein 16:9-Hero-Bild für einen Blogbeitrag oder ein YouTube-Thumbnail aus einem talleren Bild extrahieren.
  • Ein Porträt enger zuschneiden, damit das Motiv mehr vom Frame ausfüllt.
  • Einen 3:2-Zuschnitt erstellen, um das native Sensor-Verhältnis einer DSLR für Drucke in Standard-Fotolabor-Größen abzugleichen.

Kompositions- und Zuschnitte-Fallstricke

  • Zu enger Zuschnitt für Wiederverwendung. Wenn du ein Social-Media-Export aggressiv zuschneidest, kannst du später nicht mehr die abgeschnittenen Pixel wiederherstellen. Ein unzugeschnittenes Master in deiner Bibliothek behalten.
  • Die Drittelregel-Falle. Das Raster ist ein Ausgangspunkt, kein Gesetz. Zentrierte Kompositionen und symmetrische Motive sehen oft besser aus, ohne ein Motiv auf eine Drittellinie zu zwingen.
  • Plattform-Sicherheitszonen. Instagram bedeckt Teile eines vertikalen Videos mit der Bildunterschrift und dem Profil-Overlay; YouTube platziert den Zeitstempel-Bug auf Thumbnails. Mit Blick auf diese Overlays zuschneiden, sonst wird das Motiv verdeckt.
  • Seitenverhältnis vs. Auflösung. Ein 1:1-Preset gibt dir ein Quadrat, aber ein 200x200-Zuschnitt und ein 2000x2000-Zuschnitt sind beide quadratisch. Pixelabmessungen vor dem Export prüfen für Anwendungsfälle, die auf Auflösung achten.
  • Gedrehte Kamerafotos. Handybilder tragen oft einen EXIF-"Orientation"-Tag. Da die Canvas-Vorschau das rohe Pixel-Raster zeichnet, kann ein im Hochformat aufgenommenes Bild mit Orientation=6 seitwärts aussehen. Zuerst mit dem Drehen-Tool rotieren, dann zuschneiden.

Warum Seitenverhältnisse wichtig sind

Seitenverhältnisse gehen auf physischen Film zurück: Die 35-mm-Standfotokamera standardisierte 3:2, während das Kino das Academy Ratio 4:3 und später Widescreen 16:9 verwendete. Moderne Displays und Sensoren sind um diese Legacy-Verhältnisse herum gebaut. Für das Web ermöglicht die CSS-Eigenschaft aspect-ratio Layout-Raum vor dem Laden eines Bilds zu reservieren, was das kumulative Layout-Verschiebungsmetriken eliminiert, die Core Web Vitals bestraft. Das Zuschneiden auf ein festes Verhältnis beim Exportieren stellt sicher, dass der Browser ein responsives Raster ohne Reflow darstellen kann. Soziale Netzwerke veröffentlichen ihre eigenen genauen Pixel- und Ratio-Spezifikationen: Instagram 1:1 quadratischer Feed, 4:5 Porträt-Feed, 9:16 Stories; YouTube 16:9 Thumbnails; Twitter/X 16:9 inline, 3:1 Header.

Browser-Zuschneider vs. Desktop-Editoren

Ein vollständiger Editor wie Photoshop, Affinity Photo, GIMP oder Photopea bietet nicht-destruktive Zuschnitte - du kannst später anpassen oder sogar "entschneiden" - plus inhaltsbewahrende Füllung, Perspektivzuschnitte und Integration mit Ebenenmasken. Für ein einmaliges schnelles "Verkleinern und veröffentlichen" steht der Aufwand, diese Apps zu öffnen und einzurichten, in keinem Verhältnis zur einfachen Aufgabe. Der Browser-Zuschneider benötigt 200 ms vom Ablegen bis zum Download und berührt niemals einen Server. Auf der Befehlszeile ist magick input.jpg -crop 1080x1080+500+300 output.jpg unübertroffen für die effiziente Stapelverarbeitung identischer Zuschnitte über einen gesamten Ordner voller Bilder.

Häufig gestellte Fragen

Ist das Zuschneiden wirklich verlustfrei, oder kodiert das Tool das Bild neu?

Die Pixel-Daten innerhalb des Zuschnitts-Rechtecks werden byte-für-byte kopiert - keine Neuabtastung läuft, weil die Quell- und Zielrechtecke im Canvas-<code>drawImage</code>-Aufruf gleich gro&szlig; sind. Allerdings wird die Ausgabe als PNG kodiert, sodass du am Ende mit einer PNG mit den ursprünglichen JPEG-Artefakten endest, aber ohne neuen Kompressionsverlust, wenn deine Eingabe ein JPEG war. Die Datei ist typischerweise gro&szlig;er als die Quelle, weil PNG keine verlustbehaftete DCT-Komprimierung wie JPEG durchführt.

Warum ist meine zugeschnittene Datei gro&szlig;er als das Original-JPEG?

Weil PNG ein verlustfreies Format ist und JPEG verlustbehaftet ist. Ein 4-MB-JPEG enthält stark komprimierte Fotodaten, und wenn du einen Ausschnitt davon als PNG neu speicherst, kann der verlustfreie Kodierer das fotografische Rauschen bei weitem nicht so effizient schrumpfen. Für Fotos das Ergebnis durch den Bild-Kompressor oder den Bild-Format-Konverter leiten, um eine vernünftige Größe zu erhalten.

Was bewirkt das Drittelregel-Raster tatsächlich?

Es ist eine rein visuelle Hilfe - das Raster wird auf der Vorschau-Canvas gezeichnet, wird aber nicht in das exportierte Bild gespeichert. Das Kompositionsprinzip geht auf die Malereiteorie des 18. Jahrhunderts zurück: Das Motiv an den Schnittpunkten der Gitterlinien zu platzieren (statt genau in der Mitte) erzeugt mehr visuelle Spannung und führt das Auge. Porträtfotografen richten Augen oft entlang der oberen Drittellinie aus.

Kann ich ein exakt pixelgenaues Zuschnitts-Rechteck erhalten?

Die Ziehaktion meldet Breite und Höhe in ganzen Pixeln, also ja. Wenn du millimetergenaue Kontrolle für einen Druckauftrag benötigst, hier grob zuschneiden und das Ergebnis dann durch ein dediziertes Tool mit numerischen Eingabefeldern führen, oder den ImageMagick-Befehlszeilen- Zuschnitt mit <code>-crop BxH+X+Y</code> für genaue Koordinaten verwenden.

Gibt mir das 1:1-Format dieselben Pixel wie Instagram?

Es gibt dir ein perfektes Quadrat bei der gewählten Auflösung, aber Instagram kodiert jeden Upload bei rund 1080 px Breite neu und wendet seine eigene Komprimierung an. Wenn dein Zuschnitt 2000 x 2000 ist, wird Instagram ihn herunterskalieren; wenn dein Zuschnitt 500 x 500 ist, könnte Instagram ihn hochskalieren und das Ergebnis weichzeichnen. Genau 1080 x 1080 zu exportieren ist der Sweetspot für den Feed.

Wird das Bild an einen Server gesendet, während ich das Zuschnitts-Rechteck zeichne?

Nein. Das Bild wird lokal in ein ImageBitmap dekodiert und auf ein Canvas-Element in deinem Tab gemalt. Keine der Zuschnitts-Koordinaten, Pixel-Daten oder Metadaten werden über das Netzwerk übertragen. Du kannst den Netzwerk-Panel der DevTools beobachten, der während der gesamten Interaktion, einschlie&szlig;lich des Export-Klicks, leer bleibt.

Was passiert mit EXIF-GPS-Daten und Kamerainformationen nach dem Zuschneiden?

Alle EXIF-Metadaten werden entfernt. Die Canvas-Pipeline kodiert die Ausgabe aus rohen RGBA-Pixeln, die keine Herkunftsinformationen enthalten, sodass Kameramodell, Belichtung, GPS-Koordinaten und der ursprüngliche Aufnahme-Zeitstempel verloren gehen. Aus Datenschutzperspektive ist das ein Feature - Screenshots von Handyfotos verraten nicht mehr deine Heimadresse über GPS.

Kann ich animierte GIFs zuschneiden und die Animation behalten?

Nein. Der Canvas sieht nur das erste Frame, sodass die Ausgabe ein Standbild ist. Um ein animiertes GIF zu zuschneiden und dabei die Animation beizubehalten, ezgif.com verwenden, einen FFmpeg-Befehl wie <code>ffmpeg -i in.gif -vf crop=B:H:X:Y out.gif</code> oder gifsicle auf der Befehlszeile.

Wie schneide ich mit einem nicht standardmäßigen Seitenverhältnis wie 21:9 für ein Ultrawide-Banner zu?

Das Preset "Frei" wählen und das Rechteck zeichnen, dann die Pixelabmessungen in der Symbolleiste prüfen, um das Verhältnis zu bestätigen. Wenn das Verhältnis erzwungen werden muss, die Mathematik einmal machen (21/9 ist etwa 2,333), die Zielbreite eingeben, mit dem Faktor multiplizieren, um die Hohe zu erhalten, und dann den Bild-Skalier-Rechner verwenden, um dieses Verhältnis in der exportierten Datei zu sperren.

Warum fuhlt sich das Zuschneiden schneller an als in Photoshop?

Es gibt keine nicht-destruktive Bearbeitungshistorie zu pflegen, keine Farbprofilkonvertierung und kein geschichtetes Dokumentformat zu serialisieren. Das Tool kopiert nur ein Rechteck aus Pixeln auf eine neue Canvas und reicht dir ein PNG. Diese Einfachheit ist auch der Kompromiss: du kannst den Zuschnitt später nicht rückgängig machen oder die Grenze anpassen, ohne von der Originaldatei neu zu beginnen.

Mehr Image Tools

Base64 to Image Converter

Decode a Base64 string or data URL back into a viewable image and download it as PNG, JPG, WebP or GIF. Runs in your browser.

Open tool

Favicon Generator

Generate favicons in all standard sizes (16x16 to 512x512) for websites and PWAs.

Open tool

Image Blur & Pixelate

Apply blur or pixelation effects to images with adjustable intensity.

Open tool

Image Color Picker

Upload an image and pick colors in HEX, RGB, and HSL with a visual color history.

Open tool

Image Compressor

Compress images by adjusting quality to reduce file size without losing visual clarity.

Open tool

Image Flip & Rotate

Flip images horizontally or vertically and rotate by 90, 180, or 270 degrees.

Open tool