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.

Angenommen wird jede Datei mit einem image/…-Typ, ausdrücklich auch SVG (image/svg+xml); das Tool rastert sie beim Laden. Beim Start ist bereits ein Beispielbild geladen (in der Image Info als „Default“ geführt), sodass du sofort loslegen kannst. Sobald du ein eigenes Bild lädst, zeigt die Image Info-Karte rechts den Dateinamen (File), die Dateigröße (Size), die Abmessungen (Dimensions), den Typ (Type) und das Seitenverhältnis (Ratio) an.

Nach dem Laden ist die Auswahl auf das ganze Bild gesetzt und frei — auch dann, wenn in der Aspect-Ratio-Karte noch ein Verhältnis markiert ist. Willst du es weiter nutzen, klick nach dem Laden erst ein anderes Verhältnis (etwa Free) und dann wieder das gewünschte an — ein Klick auf den noch markierten Button allein wirkt nicht. Eine zuvor per Size Preset oder Fixed Crop Size gesetzte Zielgröße verwirft das Laden ebenfalls. Ohne weiteres Zutun exportierst du damit genau das Bild in Originalgröße. 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 das Bild unter der Auswahl in Schritten (±0,1). Dasselbe erledigt das Mausrad über der Editor-Fläche in gleichen Schritten. Die Auswahl erfasst danach einen kleineren bzw. größeren Bildausschnitt; die Export-Maße rechnet das Tool weiterhin in Pixeln des Originalbildes (sichtbar in Crop Data), Zoomen allein verändert die Auflösung also nicht.

Verschieben (Move)

Die vier Pfeil-Buttons (Move Left/Right/Up/Down) verschieben das Bild um jeweils einen Pixel. 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 Gradfeld mit dem Haken-Button Apply custom rotation: Du tippst eine Gradzahl ein und bestätigst per Haken oder Enter — 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. Nach einem Spiegeln geht diese Rechnung nicht mehr auf: Nach Flip Horizontal ohne Drehung zeigt „Rot" zum Beispiel 180, und eine eingegebene 0 liefert dann ein vertikal gespiegeltes statt des ursprünglichen Bildes. Gib einen eigenen Winkel deshalb vor dem Spiegeln ein.

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 Editor-Fläche (Canvas), ohne abzuschneiden.
Cover (fill canvas) — das Bild füllt die Editor-Fläche vollständig, Überstand ragt über ihren Rand hinaus.
Center (keep scale) — das Bild wird in der Editor-Fläche zentriert, ohne die Skalierung zu ändern.

Bezugsgröße ist immer die Editor-Fläche, nicht die Auswahl — die Auswahl selbst bleibt dabei unverändert.

Lock/unlock editing

Der Schloss-Button sperrt Maus- und Touch-Eingaben auf der Editor-Fläche (der Canvas wird disabled): Auswahl und Bild lassen sich dann nicht mehr ziehen, das Mausrad zoomt nicht mehr. Die Toolbar-Buttons (Zoom, Rotate, Flip, Move, Center/Fit, Reset) und die Pfeiltasten wirken aber weiterhin. Erneut klicken gibt die Fläche wieder frei.

Keep selection inside image

Der Schalter Keep selection inside image (Auswahl im Bild halten) ist standardmäßig eingeschaltet. Ziehst oder vergrößerst du die Auswahl über den Bildrand hinaus, schiebt das Tool sie ins Bild zurück; ihre Größe behält sie dabei, verkleinert wird sie nur, wenn sie größer als das Bild ist. Ein gewähltes Seitenverhältnis bleibt erhalten. Grenze ist der sichtbare Teil des Bildes auf der Editor-Fläche, bei einem gedrehten Bild dessen umschließendes Rechteck — bei schrägen Winkeln wie 45° liegen die leeren Ecken also innerhalb der Grenze und landen im Export.

Der Schalter prüft die Auswahl nur, wenn du sie selbst ziehst oder vergrößerst. Verkleinerst oder verschiebst du danach das Bild (Zoom Out, Mausrad, Move mode, Move-Buttons, Pfeiltasten, Center/Fit), kann die Auswahl wieder über den Bildrand ragen, und der Export bekommt leere Streifen. Fass die Auswahl dann kurz an — schon ein kleines Verschieben holt sie ins Bild zurück.

Schaltest du ihn aus, darf die Auswahl bewusst über das Bild hinausragen. Der Rand außerhalb des Bildes wird im Export mit der Background color gefüllt (siehe Skalieren und exportieren) oder bleibt transparent; bei JPEG wird er weiß bzw. in der Hintergrundfarbe gefüllt. Das ist der Weg, ein Motiv auf eine größere Fläche mit Rand zu setzen.

Undo, Redo und Reset

Der Editor merkt sich bis zu 50 Zustände, einer davon ist immer der aktuelle — du kannst also bis zu 49 Schritte zurückgehen. Einen Eintrag erzeugen das Ziehen von Auswahl oder Bild, die Transformations-Buttons der Toolbar (Zoom, Move, Rotate, Flip, Center/Fit, Reset), Apply custom rotation und Fixed Crop Size; Mausrad-Zoom, Pfeiltasten, Size Presets und der Wechsel des Seitenverhältnisses legen keinen eigenen Eintrag an. 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. Die Tastenkürzel greifen auch, während der Fokus in einem Eingabefeld liegt. Reset to original setzt Drehung, Spiegelung, Zoom und Position zurück. Das Bild steht danach in voller Pixelgröße (100 %) an der linken oberen Ecke der Editor-Fläche — nicht eingepasst wie nach dem Laden. Ist es größer als die Fläche, holst du es mit Center/Fit → Contain wieder vollständig ins Bild und ziehst die Auswahl neu auf. Reset verwirft außerdem eine gesetzte Zielgröße (das Feld Max Width behält aber seinen Wert) und setzt die Auswahl auf den sichtbaren Teil des Bildes; ist ein Seitenverhältnis aktiv — auch das unsichtbare eines Size Presets —, auf das größte zentrierte Rechteck in diesem Verhältnis.

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.

Wählst du hier ein Verhältnis, verwirft das Tool eine zuvor per Size Preset oder Fixed Crop Size gesetzte Zielgröße; exportiert wird dann wieder in der Pixelgröße des Ausschnitts.

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, übernimmt die Auswahl das passende Verhältnis, die Zielgröße erscheint als Export-Maß (Preview-Badge, Crop Data) und die Breite im Feld Max Width; die Buttons der Aspect-Ratio-Karte werden dabei abgewählt. Eine Fixed Crop Size kannst du außerdem von Hand setzen: In der Toolbar Breite (W) × Höhe (H) eingeben und per Haken-Button Apply fixed crop size oder Enter 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). Alle vier sind anfangs eingeschaltet und 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 Originalbreite des geladenen Bildes.
Max Width ist das maßgebliche Feld für die Skalierung; die Höhe ergibt sich aus dem Seitenverhältnis des Ausschnitts automatisch. (Der Editor skaliert breitengetrieben — und auf genau diese Breite, also auch über die Ausschnittgröße hinaus.) Nach jedem Laden steht hier die Breite des ganzen Bildes. Hast du zugeschnitten, trag vor Save Resized die gewünschte Breite ein — sonst rechnet das Tool den Ausschnitt auf die Originalbreite hoch.
Background color aktivierst du über den Paletten-Button Toggle background color daneben (aktiv = grün); den Farbwert wählst du im Coloris-Picker (Standard #FFFFFF, mit Alpha-Kanal und Schnellwahl-Farben inklusive transparent). Ist sie aktiv, füllt sie im Export alle transparenten Bereiche und einen Rand außerhalb des Bildes — in jedem Format.

Über Save Resized wird der Ausschnitt auf die Max Width skaliert und in einem Ergebnis-Dialog angezeigt; ein leeres oder ungültiges Breitenfeld meldet das Tool als Fehler. Für die Skalierung nutzt das Tool Pica, eine Bibliothek für hochwertiges Resampling (höchste Qualitätsstufe 3) mit leichter Unschärfemaskierung (unsharpAmount 80, unsharpRadius 0,6, unsharpThreshold 2) — 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

Der Ergebnis-Dialog (Result) zeigt das fertige Bild und im Titel seine Maße (Width / Height). Hier wählst du das Ausgabeformat:

PNG — verlustfrei, ein Klick.
JPEG… — Dropdown mit Quality 100 / 95 / 90 / 85 (Recommended) / 80 / 70 / 60 / 50 %. Weil JPEG keinen Alphakanal hat, legt das Tool das Bild vorher auf eine Fläche: die aktive Background color, sonst Weiß. Ist die aktive Background color selbst (teil-)transparent, etwa die Schnellwahl transparent, deckt sie nicht — durchsichtige Bereiche werden im JPEG dann schwarz bzw. abgedunkelt.
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. Im Editor nutzen die Codecs feste Einstellungen: MozJPEG progressiv, OxiPNG mit Level 2 ohne Interlace, WebP mit Method 4, AVIF mit Speed 6. Willst du diese Werte selbst steuern, nimm den Image Converter mit seinen Advanced Options. Nach dem Export meldet eine Einblendung die Dateigröße. Alle Codecs laufen lokal in einem Web Worker, der erst beim ersten Einsatz geladen wird; 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 in die Drop-Zone, per Klick in die Zone oder über Choose File. Als Eingabe nennt das Tool PNG, JPEG, WebP, AVIF, GIF, BMP und SVG; angenommen wird jede Datei, die der Browser als Bild erkennt und darstellen kann. Die Preview-Karte zeigt das Bild; ihr roter X-Button (Remove image) entfernt es wieder.
Image Info zeigt Filename, File Size, Dimensions, Format und Aspect Ratio — und in der Zeile Metadata, was die Quelldatei außer Pixeln mitbringt (Details unten).
Output Format wählen — PNG (Lossless, large file), JPEG (Lossy, small file, Standard), WebP (Lossy, smaller file), WebP Lossless oder AVIF (Best compression).
Bei JPEG erscheint Background for transparent areas: ein Farbwähler (Standard Weiß, #ffffff). JPEG kennt keine Transparenz; durchsichtige Pixel bekommen diese Farbe.
Encoder — steht WebAssembly bereit, schaltest du zwischen Browser und WASM um; das Badge am WASM-Button nennt den Codec des gewählten Formats (MozJPEG, OxiPNG, WebP, AVIF). Kann der Browser das gewählte Format nicht selbst kodieren (typisch: AVIF), ist Browser gesperrt und das Tool wählt WASM automatisch.
Quality über den Slider (10–100 %, Standard 85, Schritt 5). Bei PNG und WebP Lossless ist der Slider ausgeblendet, weil verlustfrei.
Advanced Options (nur beim WASM-Encoder, aufklappbar) — je nach Codec: bei MozJPEG Progressive JPEG (Standard an), bei WebP Method (effort) 0–6 (Standard 4), bei AVIF Speed 0–10 (Standard 6), bei OxiPNG Optimization Level 0–6 (Standard 2) plus Interlace (Standard aus).
Resize (optional) — Max W und Max H begrenzen die Ausgabe unter Beibehaltung des Seitenverhältnisses („Aspect ratio preserved“). Der Converter skaliert nur herunter, nie hoch. Er rechnet mit der Canvas-Skalierung des Browsers in hoher Glättungsstufe, nicht mit Pica.
File size / Savings — das Tool kodiert das Bild mit den aktuellen Einstellungen probeweise und zeigt die echte Dateigröße samt Ersparnis gegenüber der Originaldatei. Jede Änderung an Format, Qualität, Encoder, Advanced Options, Max W/H oder Hintergrundfarbe löst nach kurzer Pause (450 ms) eine neue Berechnung aus. Wird die Datei größer als das Original, steht die Differenz rot mit Pluszeichen da. Einzige Ausnahme: AVIF über den WASM-Encoder mit mehr als 2 Millionen Pixeln in der Ausgabe (also nach Max W/Max H) — das Kodieren dauert, die Größe erscheint dann erst nach dem Export („shown after export (large AVIF)“).
Export Image — Download als <name>_converted.<endung> (JPEG mit Endung .jpg). Während der WASM-Kodierung zeigt der Button „Encoding with …“. Darüber steht der Hinweis „Exports contain no metadata — EXIF, camera data and GPS location are removed.“

Metadaten der Quelldatei

Die Zeile Metadata in der Image Info liest die Quelldatei direkt aus — bei JPEG und PNG:

JPEG — aus dem EXIF-Block: camera (Hersteller/Modell), author, copyright, date, shooting data (Aufnahmedaten) und GPS location; ein EXIF-Block ohne diese Felder erscheint als EXIF. Dazu XMP und color profile (ICC-Profil).
PNG — text (Text-Chunks), EXIF und color profile.

Enthält die Liste einen GPS location-Eintrag, erscheint sie farblich hervorgehoben. Unter der Liste steht „removed on export“: Der Export besteht nur aus neu kodierten Pixeln, keine dieser Angaben wandert mit. Findet das Tool nichts, steht dort „none found“ — das gilt auch für Quellformate wie WebP oder AVIF, die es nicht auswertet.

Fehlermeldung beim Browser-Encoder

Manche Browser liefern beim Kodieren eines nicht unterstützten Formats stillschweigend ein PNG. Der Converter prüft deshalb den Typ des Ergebnisses und meldet in diesem Fall einen Fehler mit dem Hinweis auf den WASM-Encoder, statt eine falsch benannte Datei zu speichern.

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. Der Converter zeigt vorher an, was eine JPEG- oder PNG-Quelle mitbringt.
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 (im Converter wählt das Tool sie automatisch). Bei AVIF über den WASM-Encoder mit mehr als 2 Millionen Pixeln in der Ausgabe (nach Max W/Max H) zeigt der Converter die Dateigröße erst nach dem Export.
JPEG: Transparenz wird gefüllt — im Editor mit der aktiven Background color (sofern sie deckend ist) oder Weiß, im Converter mit Background for transparent areas.
Resize: Der Converter skaliert nur herunter; der Editor skaliert breitengetrieben auf die Max Width.
Auswahl: Mit Keep selection inside image bleibt die Auswahl beim Ziehen und Vergrößern im Bild; verkleinerst oder verschiebst du danach das Bild, kann sie wieder überstehen. Ohne den Schalter entstehen Ränder in Hintergrundfarbe oder transparent.

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.