# Graphic Editor — Manual > Funktionsbeschreibung des Graphic Editors: alle Editor-Operationen, Seitenverhältnis- und Größen-Vorgaben, Export in PNG/JPEG/WebP/AVIF und der Image Converter. Source: https://www.jpkc.com/db/tools/graphic/manual/ Zurück zur Übersicht: [Graphic Editor](https://www.jpkc.com/db/tools/graphic/) · Tool live öffnen: [www.jpkc.com/tools/graphic/](https://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 `_cropped.` (beim Beispielbild: `untitled.`). ## 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 `_cropped.` 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. 1. **Bild laden** — per Drag & Drop oder **Choose File**. Als Eingabe akzeptiert er PNG, JPEG, WebP, AVIF, GIF, BMP und SVG. 2. **Image Info** zeigt Dateiname, Dateigröße, Abmessungen, Format und Seitenverhältnis. 3. **Output Format** wählen — **PNG** (Lossless, large file), **JPEG** (Lossy, small file, Standard), **WebP** (Lossy, smaller file), **WebP Lossless** oder **AVIF** (Best compression). 4. **Quality** über den Slider (10–100 %, Standard 85, Schritt 5). Bei PNG und WebP Lossless ist der Slider ausgeblendet, weil verlustfrei. 5. **Resize (optional)** — **Max W** und **Max H** begrenzen die Ausgabe unter Beibehaltung des Seitenverhältnisses. Der Converter skaliert nur **herunter**, nie hoch. 6. **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**. 7. **Export Image** — Download als `_converted.`. 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](https://www.jpkc.com/db/tools/graphic/). Konkrete Durchläufe stehen in den [Beispielen](https://www.jpkc.com/db/tools/graphic/examples/), Kniffe in den [Tipps & Tricks](https://www.jpkc.com/db/tools/graphic/tips/). Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/graphic/).