Zum Hauptinhalt springen

Bild-Zuschnitt – kostenlos

Bilder per Ziehen auswählen und zuschneiden, optional mit festem Seitenverhältnis (1:1, 16:9, 4:3 usw.), Drittel-Raster und Export in mehreren Formaten (JPEG, PNG, WebP).

Funktioniert nach dem Laden offline

Datei hierher ziehen oder zum Auswählen klicken

JPG, PNG, WebP, HEIC, HEIF · Verarbeitung auf Ihrem Gerät

oder drücken Sie Strg+V, um aus der Zwischenablage einzufügen

Dateien durchsuchen

Tipp: Sie können einen Screenshot mit Strg+V einfügen

Ihre Dateien verlassen nie Ihr Gerät. Die gesamte Verarbeitung findet lokal in Ihrem Browser statt.

Häufige Anwendungen

  • Fotos für Instagram zuschneidenSchneiden Sie auf Instagrams bevorzugte Seitenverhältnisse zu: 1:1 (Quadrat), 4:5 (Hochformat) und 1.91:1 (Querformat).
  • Profilbilder auf Quadrat zuschneidenErstellen Sie quadratische Profilbilder für LinkedIn, Twitter, GitHub oder jede Social-Media-Plattform.
  • YouTube- und Artikel-Miniaturansichten zuschneidenSchneiden Sie auf das 16:9-Seitenverhältnis zu, das von YouTube-Videos und den meisten Blog-Heldenbildern verwendet wird.
  • Reisepass- / Ausweisfotos zuschneidenSchneiden Sie Fotos auf das Standard-Hochformat-Seitenverhältnis von 2:3 für Pass-, Visa- und Ausweisanträge zu.
  • E-Commerce-Produktfotos zuschneidenStandardisieren Sie Seitenverhältnisse von Produktfotos für Amazon, Shopify, Etsy und andere Marktplätze.

So funktioniert es

Das Zuschneiden erfolgt vollständig in Ihrem Browser mit der HTML5 Canvas API – kein Upload, kein Server. Sie ziehen einen Auswahlbereich direkt auf einem Canvas-Element auf, und beim Anwenden liest die integrierte 2D-Rendering-Engine des Browsers nur die ausgewählten Pixel und kodiert sie neu als JPEG, PNG oder WebP.

  1. 1
    Bild in den Speicher geladen
    Ihre Datei wird mit URL.createObjectURL() gelesen, das dem Browser eine lokale Blob-URL übergibt. Ein HTMLImageElement dekodiert die Datei vollständig im Browser-Tab – die Bildbytes verlassen nie Ihr Gerät.
  2. 2
    Pointer Events steuern die Zuschnittauswahl
    Die Pointer Events API des Browsers (die Maus-, Touch- und Stifteingabe vereint) verfolgt Ziehbewegungen auf einem Canvas-Overlay. Ein Druck außerhalb der Auswahl beginnt ein neues Rechteck; innerhalb verschiebt es; nahe der unteren rechten Ecke ändert es die Größe. Optionale Seitenverhältnis-Voreinstellungen (1:1, 16:9, 4:3 usw.) begrenzen die Geometrie beim Ziehen.
  3. 3
    Canvas zeichnet die Live-Vorschau
    Bei jeder Änderung des Zuschnitts zeichnet der Canvas-2D-Kontext das Bild neu, legt außerhalb der Auswahl eine dunkle Überlagerung darüber, macht den Zuschnittbereich frei, um das Original in voller Qualität zu zeigen, und blendet ein Drittel-Raster sowie einen türkisfarbenen Größengriff ein.
  4. 4
    toBlob() kodiert und liefert das Ergebnis
    Wenn Sie auf Zuschneiden klicken, wird ein neues nicht sichtbares Canvas in den exakten Zuschnittmaßen erstellt. ctx.drawImage() kopiert nur das ausgewählte Rechteck, und canvas.toBlob() kodiert das Ergebnis mit dem nativen JPEG-, PNG- oder WebP-Encoder des Browsers in der gewählten Qualität. Die Ausgabe wird als lokale Blob-URL zum Download bereitgestellt.

Ihr Bild wird als lokale Blob-URL geöffnet und vollständig in Ihrem Browser-Tab verarbeitet – zu keinem Zeitpunkt wird etwas auf einen Server hochgeladen.

Ähnliche Tools

Häufige Fragen