Bild-Zuschneider

Was ist ein Bild-Zuschneider?#

Zuschneiden klingt wie die einfachste Bildoperation — ein Rechteck behalten, den Rest wegwerfen. Sobald man es aber richtig machen will, drängen sich gleich eine ganze Reihe Fragen auf: Behält der Zuschnitt ein festes Seitenverhältnis für ein Thumbnail- oder Banner-Format, kann ich erst einen schiefen Horizont korrigieren, wird der Export klein genug zum Hochladen und verlässt irgendetwas davon mein Gerät? Diese Seite ist ein vollständiges Zuschneide-Studio, das alle vier Fragen im Browser beantwortet.

Sie ziehen ein Bild hinein, zeichnen ein Auswahl-Rechteck darüber (oder greifen einen seiner acht Griffe zum Skalieren), drehen oder spiegeln optional den gesamten Rahmen, sperren die Auswahl auf ein Verhältnis wie 1:1 oder 16:9 und exportieren den zugeschnittenen Bereich als PNG, JPEG oder WebP in einer selbst gewählten Qualität. Alles läuft über die Canvas-API in diesem Tab — die Originaldatei wird lokal gelesen und das Ergebnis lokal neu kodiert, sodass nichts hochgeladen wird.

Verwendung#

1. Ziehen Sie ein Bild auf die gestrichelte Ablagezone (oder klicken Sie sie an, um eine Datei auszuwählen). Der Editor erscheint und ersetzt die Ablagezone.
2. Verwenden Sie die Werkzeugleiste über der Vorschau, um den gesamten Rahmen vor dem Zuschneiden zu transformieren:
   • 90° drehen dreht das Bild bei jedem Klick um 90° im Uhrzeigersinn. Die Auswahl wird im gedrehten Koordinatenraum verfolgt, sodass sie immer mit dem übereinstimmt, was Sie sehen.
   • Spiegeln H / Spiegeln V spiegeln den Rahmen horizontal oder vertikal.
3. Wählen Sie ein Seitenverhältnis aus dem Dropdown: Frei (beliebiges Rechteck ziehen), 1:1 (Avatar / Profil), 4:3 oder 16:9 (Hintergrundbild / Video-Cover). Bei gesperrtem Verhältnis behält der Rahmen beim Ziehen diese Form — Eckengriffe wachsen mit, um den Mauszeiger einzuschließen, und Kanten-Griffe leiten die senkrechte Seite automatisch ab.
4. Ziehen Sie den Körper des Rahmens, um ihn zu verschieben; ziehen Sie einen seiner acht Griffe, um die Größe zu ändern. Maus und Touch funktionieren beide.
5. Legen Sie die Export-Optionen unter der Vorschau fest:
   • Ausgabeformat — JPEG (am kleinsten, verlustbehaftet), WebP (klein, modern) oder PNG (verlustfrei; der Qualitätsregler ist deaktiviert, weil PNG keinen Qualitätsregler hat).
   • Max. Ausgabeseite — eine Zahl in Pixeln; die längere Seite des Zuschnitts wird bei erhaltenem Verhältnis auf diesen Wert begrenzt. Bei 0 bleibt die volle Zuschnitt-Auflösung erhalten.
   • Qualität — 5–100, nur für JPEG und WebP. 92 ist ein sinnvoller Standard; auf 80 für Thumbnails senken.
6. Beachten Sie die Anzeige neben Herunterladen: Sie zeigt die Auswahlgröße und die resultierende Ausgabegröße, z. B. 1500×1500 → 800×800, wenn eine 1:1-Auswahl auf 800 begrenzt wird.
7. Klicken Sie auf Herunterladen zum Speichern. Verwenden Sie Zurücksetzen, um die Auswahl auf den zentrierten Standard zurückzusetzen.

Hauptfunktionen#

• Verhältnisgebundenes Skalieren, das sich richtig anfühlt. Eckengriffe wachsen auf beiden Achsen zum Mauszeiger; Kanten-Griffe passen nur die gezogene Achse an und berechnen die andere aus dem Verhältnis. Kein versehentliches Strecken.
• Transformations-bewusste Auswahl. Drehung und Spiegelung werden einmal auf ein Offscreen-Canvas angewendet, und der Zuschnitt-Rahmen lebt in diesem transformierten Raum, sodass das, was Sie auswählen, genau dem entspricht, was Sie exportieren — keine Abweichung zwischen Vorschau und Ausgabe.
• Drei Formate mit ehrlicher Qualität. PNG wird als verlustfrei gekennzeichnet und deaktiviert den Regler, statt ihn stillschweigend zu ignorieren. JPEG und WebP legen einen echten, direkt an den Kodierer weitergereichten Qualitätswert offen.
• Optionale Ausgabe-Obergrenze. Legen Sie eine maximale Abmessung fest und der Zuschnitt wird unter Erhalt des Verhältnisses verkleinert — praktisch für Avatare, Open-Graph-Bilder oder Upload-Limits —, ohne dass Sie rechnen müssen.
• Live Vorher-/Nachher-Anzeige. Auswahl-Abmessungen und finale Ausgabe-Abmessungen stehen Seite an Seite, sodass eine Obergrenze oder eine Verhältnis-Änderung sichtbar wird, bevor Sie sich festlegen.
• 100 % lokal. Das Bild wird vom Browser dekodiert und vom Browser neu kodiert. Es gibt keinen Upload-Endpunkt.

Ausführliches Beispiel#

Sie haben ein 4000×3000 Querformat-Foto und benötigen ein 16:9-Banner-Thumbnail, dessen längere Seite 1280 px beträgt. Laden Sie das Foto, setzen Sie Seitenverhältnis auf 16:9 und ziehen Sie die Auswahl über den Horizont. Weil das Verhältnis gesperrt ist, schnappt der Rahmen in ein 16:9-Rechteck; nehmen wir an, die Auswahl landet bei 4000×2250 in Quellpixeln. Tippen Sie nun 1280 in Max. Ausgabeseite. Die Anzeige aktualisiert sich auf:

Zuschnitt  4000 × 2250  →  1280 × 720

Wählen Sie Ausgabeformat: JPEG, belassen Sie Qualität bei 92 und klicken Sie auf Herunterladen. Sie erhalten ein 1280×720-JPEG von etwa 180–280 KiB je nach Szene — ein Bruchteil der ursprünglichen Multimegabyte-Datei, mit genau dem Seitenverhältnis, das ein Hero-Banner braucht, und ohne Letterboxing. Derselbe Ablauf mit 1:1 und Max. Ausgabeseite 512 liefert ein hochlade-fertiges Profilbild.

FAQ#

Die Auswahl lässt sich nicht kleiner als eine bestimmte Größe ziehen — warum?#

Es gibt eine 8-Pixel-Mindestkante, die durchgesetzt wird, damit die Griffe greifbar bleiben und der Export nie ein degeneriertes Splitter wird. Wenn Sie einen extrem engen Zuschnitt benötigen, zoomen Sie nicht hinein und schneiden Sie einen winzigen Bereich zu — schneiden Sie einen größeren Bereich zu und skalieren Sie ihn dann mit Max. Ausgabeseite herunter.

Ich habe 16:9 gesperrt, aber der Rahmen hat in der Nähe der Kante die Größe geändert.#

Das ist die Bereich-Klammer, die den Rahmen vollständig im Bild hält. Wenn ein verhältnisgebundener Rahmen über eine Kante hinausragen würde, wird die kürzere Seite reduziert, sodass das Verhältnis im verfügbaren Raum überlebt. Verschieben Sie den Rahmen zuerst zur Mitte und ändern Sie dann die Größe.

Soll ich JPEG oder WebP exportieren?#

WebP ist bei gleicher Qualität typischerweise 25–35 % kleiner als JPEG und wird mittlerweile überall unterstützt, wo es darauf ankommt. Verwenden Sie JPEG nur, wenn eine ältere Downstream-Pipeline WebP ablehnt. Verwenden Sie PNG, wenn der Zuschnitt ein Logo, ein UI-Screenshot oder etwas mit harten Kanten und deckenden Farben ist, bei denen verlustbehaftete Artefakte sichtbar wären.

Reduziert das Zuschneiden die Dateigröße?#

Es kann, auf zwei Arten: weniger Fläche bedeutet weniger zu kodierende Pixel, und Max. Ausgabeseite kann zusätzlich verkleinern. Aber ein 200×200 Zuschnitt eines verrauschten Fotos bei Qualität 100 kann dennoch größer sein als das vollständige Bild bei Qualität 80 — der Qualitätsregler ist der eigentliche Hebel für die verlustbehaftete Größe.