Graphic Editor — Manual

Zurück zur Übersicht: Graphic Editor · Tool live öffnen: www.jpkc.com/tools/graphic/

Dieses Manual beschreibt den Graphic Editor vollständig: wie du ein Bild lädst, was jede Operation im Editor tut, wie Seitenverhältnis- und Größen-Vorgaben zusammenspielen, wie der Export in die vier Formate funktioniert und was der separate Image Converter macht. Die Oberfläche des Tools ist auf Englisch — die Tab-, Button- und Feld-Bezeichnungen werden hier deshalb in ihrer englischen Original-Schreibweise genannt (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.

Bild laden

Es gibt zwei Wege, ein Bild in den Image Editor zu holen:

Open local image file — der Datei-Button (Ordner-Symbol) in der Toolbar öffnet einen Dateidialog (accept="image/*").
Drag & Drop — ein Bild direkt auf den Editor-Bereich ziehen.

Beim Start ist bereits ein Beispielbild geladen, sodass du sofort loslegen kannst. Sobald du ein eigenes Bild lädst, zeigt die Image Info-Karte rechts den Dateinamen, die Dateigröße, die Abmessungen, den Typ und das Seitenverhältnis an. Der Dateiname für den Export wird automatisch zu <name>_cropped.<endung> (beim Beispielbild: untitled.<endung>).

Editor-Operationen

Alle Werkzeuge liegen in der Toolbar über dem Editor. Sie wirken auf das Bild bzw. die Auswahl, das eigentliche Ergebnis entsteht erst beim Export.

Crop mode und Move mode

Über die beiden Modus-Buttons schaltest du zwischen Crop mode (Auswahlrahmen aufziehen und anpassen) und Move mode (das Bild unter dem Rahmen verschieben) um. Die Auswahl lässt sich an den Kanten und Ecken greifen; in der Mitte verschiebst du sie als Ganzes.

Zoom

Zoom In und Zoom Out vergrößern bzw. verkleinern die Ansicht des Bildes in Schritten (±0,1). Das ändert nur die Darstellung im Editor, damit du genauer auswählen kannst.

Verschieben (Move)

Die vier Pfeil-Buttons (Move Left/Right/Up/Down) verschieben das Bild pixelweise. Dasselbe geht mit den Pfeiltasten der Tastatur, solange der Fokus nicht in einem Eingabefeld liegt.

Drehen (Rotate)

Rotate Left und Rotate Right drehen das Bild in 45°-Schritten. Für einen genauen Winkel gibt es das Feld Custom rotation: Du tippst eine Gradzahl ein und bestätigst — das Bild wird auf genau diesen absoluten Winkel gedreht (das Tool berechnet die Differenz zur aktuellen Drehung). Das aktuell ermittelte Rotations-Ergebnis steht als „Rot" in der Crop Data-Karte.

Spiegeln (Flip)

Flip Horizontal und Flip Vertical spiegeln das Bild an der jeweiligen Achse.

Center / Fit

Das Center/Fit-Dropdown bietet drei Einpass-Varianten:

Contain (fit inside) — das ganze Bild passt in die Auswahl/den Canvas, ohne abzuschneiden.
Cover (fill canvas) — das Bild füllt den Bereich vollständig, Überstand wird abgeschnitten.
Center (keep scale) — das Bild wird zentriert, ohne die Skalierung zu ändern.

Lock/unlock editing

Der Schloss-Button friert die Bearbeitung ein (der Canvas wird disabled), damit du eine fertige Einstellung nicht versehentlich verschiebst. Erneut klicken gibt sie wieder frei.

Undo, Redo und Reset

Der Editor führt einen Verlauf von bis zu 50 Schritten. Undo (Ctrl+Z) und Redo (Ctrl+Y oder Ctrl+Shift+Z) bewegen dich darin vor und zurück; die Buttons sind deaktiviert, wenn nichts zum Rückgängigmachen da ist. Reset stellt den Originalzustand wieder her und verwirft eine gesetzte Zielgröße.

Seitenverhältnis (Aspect Ratio)

Die Aspect Ratio-Karte bietet feste Verhältnisse als Auswahl: 32:9, 21:9, 2:1, 16:9, 16:10, 3:2, 4:3, 5:4, 1:1 sowie Free (frei, Standard). Ein gewähltes Verhältnis zwingt die Auswahl in genau diese Proportion.

Darüber sitzt ein Orientation-Umschalter zwischen Landscape (Querformat) und Portrait (Hochformat). Im Hochformat dreht sich jedes Verhältnis um — aus 16:9 wird 9:16, aus 4:3 wird 3:4; 1:1 bleibt gleich. Die Beschriftung der Buttons passt sich entsprechend an.

Größen-Vorgaben (Size Presets)

Die Size Presets setzen nicht nur ein Seitenverhältnis, sondern auch eine exakte Zielpixelgröße für den Export — in einem Klick. Sie sind nach Plattform und Zweck gruppiert:

Instagram — Post 1080×1080, Portrait 1080×1350, Story/Reels 1080×1920.
Facebook — Post 1200×630, Cover 820×312, Story 1080×1920.
X — Post 1200×675, Header 1500×500.
YouTube — Thumbnail 1280×720, Banner 2560×1440.
LinkedIn — Post 1200×627, Banner 1128×191.
TikTok — Video 1080×1920.
Pinterest — Pin 1000×1500, Square 1000×1000.
Web Banners — Leaderboard 728×90, Large Leaderboard 970×90, Medium Rectangle 300×250, Wide Skyscraper 160×600, Half Page 300×600, Billboard 970×250, WP Plugin Banner 772×250, WP Plugin Banner @2x 1544×500.
Devices — iPhone 15 Pro 393×852, iPhone SE 375×667, iPad Pro 1024×1366, Desktop HD 1920×1080, Desktop 4K 3200×1800, MacBook Pro 1512×982.
Common — Square Small/Medium/Large (150×150, 300×300, 600×600), Thumbnail 150×100, Preview 400×300, Hero 1200×400.

Wählst du eine Vorgabe, springt die gewünschte Endgröße in die Export-Felder, und die Auswahl übernimmt das passende Verhältnis. Eine Fixed Crop Size kannst du außerdem von Hand setzen: Breite × Höhe eingeben und bestätigen — das wirkt wie ein eigenes Preset.

Optionen, Vorschau und Datenfelder

In der Options-Karte schaltest du die Hilfslinien der Auswahl ein und aus: Grid (Drittel-Raster), Crosshair (Fadenkreuz), Shade (Abdunkeln außerhalb der Auswahl) und Background (Schachbrett für Transparenz). Sie sind reine Darstellungshilfen.

Die Preview-Karte zeigt den aktuellen Ausschnitt live in vier Größen; ein Badge nennt die geplante Export-Größe. Drei weitere Karten sind read-only und dienen der Kontrolle: Crop Data (Position, Größe und Drehung der Auswahl in Bild-Pixeln plus die Export-Maße), Image Data (die rohe Transformations-Matrix) und Selection Data (die Auswahl in Canvas-Koordinaten).

Skalieren und exportieren (Image Editor)

In der Export Settings-Karte legst du die Ausgabegröße fest:

Refresh Size füllt das Breitenfeld mit der tatsächlichen aktuellen Bildgröße.
Max Width ist das maßgebliche Feld für die Skalierung; die Höhe ergibt sich aus dem Seitenverhältnis automatisch. (Der Editor skaliert breitengetrieben.)
Background color aktivierst du über den Paletten-Button daneben; den Farbwert wählst du im Coloris-Picker (Standard #FFFFFF, Transparenz möglich). Ist sie aktiv, wird der Export-Hintergrund mit dieser Farbe gefüllt — wichtig, wenn ein transparentes PNG in ein Format ohne Alpha (JPEG) wandert.

Über Save Resized wird der Ausschnitt auf die Max Width skaliert und in einem Ergebnis-Dialog angezeigt. Für die Skalierung nutzt das Tool Pica, eine Bibliothek für hochwertiges Resampling mit leichter Nachschärfung — das Ergebnis ist sauberer als ein einfaches Browser-Resize. Steht Pica nicht zur Verfügung, fällt das Tool auf eine Canvas-Skalierung mit hoher Glättung zurück.

Alternativ öffnet Preview cropped image (Floppy-Symbol) den Ergebnis-Dialog direkt mit dem Ausschnitt in voller Pixelgröße (bzw. der gesetzten Zielgröße).

Der Export-Dialog: PNG, JPEG, WebP, AVIF

Im Ergebnis-Dialog (Result) wählst du das Ausgabeformat:

PNG — verlustfrei, ein Klick.
JPEG… — Dropdown mit Quality 100 / 95 / 90 / 85 (Recommended) / 80 / 70 / 60 / 50 %.
WebP… — Dropdown mit Lossless sowie 95 / 90 / 85 (Recommended) / 80 / 70 / 60 / 50 %.
AVIF… — Dropdown mit Quality 90 / 80 (Recommended) / 70 / 60 / 50 / 40 %.

Der AVIF-Button ist deaktiviert, wenn dein Browser AVIF nicht über das Canvas exportieren kann — es sei denn, du schaltest die WASM-Codecs zu (siehe unten). Der Download landet als <name>_cropped.<endung> in deinem Download-Ordner.

WASM-Codecs (optional)

Unterstützt dein Browser WebAssembly, erscheint im Dialog der Schalter Use WASM Codecs (MozJPEG / OxiPNG / WebP / AVIF). Ist er aktiv, kodiert das Tool nicht über die eingebaute Canvas-Funktion, sondern über spezialisierte Codecs aus dem Squoosh-Projekt: MozJPEG (progressives JPEG), OxiPNG (optimiertes PNG), libwebp (WebP) und libavif (AVIF). Diese liefern bei gleicher Qualität oft kleinere Dateien — und der WASM-Pfad macht AVIF auch dann verfügbar, wenn der Browser es nativ nicht kann. Alle Codecs laufen lokal in einem Web Worker; nichts wird hochgeladen.

Der Image Converter

Der zweite Tab, Image Converter, ist der direkte Weg, wenn du nur konvertieren (und optional verkleinern) willst, ohne zuzuschneiden.

Bild laden — per Drag & Drop oder Choose File. Als Eingabe akzeptiert er PNG, JPEG, WebP, AVIF, GIF, BMP und SVG.
Image Info zeigt Dateiname, Dateigröße, Abmessungen, Format und Seitenverhältnis.
Output Format wählen — PNG (Lossless, large file), JPEG (Lossy, small file, Standard), WebP (Lossy, smaller file), WebP Lossless oder AVIF (Best compression).
Quality über den Slider (10–100 %, Standard 85, Schritt 5). Bei PNG und WebP Lossless ist der Slider ausgeblendet, weil verlustfrei.
Resize (optional) — Max W und Max H begrenzen die Ausgabe unter Beibehaltung des Seitenverhältnisses. Der Converter skaliert nur herunter, nie hoch.
Estimated Size / Savings schätzt vor dem Export grob die resultierende Dateigröße und die Ersparnis. Beim WASM-Export wird daraus nach dem Kodieren die Actual Size.
Export Image — Download als <name>_converted.<endung>.

Steht WebAssembly bereit, kannst du auch hier zwischen Browser- und WASM-Encoder umschalten. Im WASM-Modus gibt es Advanced Options: bei MozJPEG Progressive JPEG, bei WebP Method (effort) 0–6 (Standard 4), bei AVIF Speed 0–10 (Standard 6) und bei OxiPNG Optimization Level 0–6 (Standard 2) plus Interlace.

Betriebsgrenzen und Datenschutz — kompakt

Privatsphäre: Alles läuft im Browser. Kein Upload, kein Server, kein API — auch die WASM-Codecs rechnen lokal.
Metadaten: Der Export erzeugt ein frisch gerendertes Bild; eingebettete EXIF-/Metadaten (GPS, Kamera) bleiben dabei nicht erhalten.
Eingabe: ein Bild pro Durchlauf je Tab (kein Stapel-/Batch-Modus).
Größe: kein hartes Datei-Limit; die Grenze ist der verfügbare Browser-Speicher — sehr große Bilder können langsam werden.
AVIF: Browser-Export nur, wenn der Browser AVIF beherrscht; sonst die WASM-Codecs nutzen.
Resize: Der Converter skaliert nur herunter; der Editor skaliert breitengetrieben auf die Max Width.

Für den Einstieg und das große Bild siehe die Übersichtsseite. Konkrete Durchläufe stehen in den Beispielen, Kniffe in den Tipps & Tricks. Ausprobieren kannst du alles direkt im Tool.