# Graphic Editor — Anwendungsbeispiele > Praxisnahe Durchläufe mit dem Graphic Editor: Hero-Bild für WebP/AVIF optimieren, quadratisch zuschneiden, Screenshot verkleinern, Social-Grafik aus Größen-Vorgaben. Source: https://www.jpkc.com/db/tools/graphic/examples/ 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/) Das [Manual](https://www.jpkc.com/db/tools/graphic/manual/) erklärt jede Funktion einzeln. Diese Seite ergänzt das um **konkrete Arbeitsabläufe** — typische Aufgaben Schritt für Schritt, mit Fokus darauf, welchen Knopf du wann drückst und worauf du beim Ergebnis achtest. Die Oberfläche ist auf Englisch; Tab- und Button-Namen stehen deshalb im Original, bei Bedarf mit deutscher Erläuterung. ## Beispiel 1: Hero-Bild für WebP und AVIF optimieren Ein großes Header-Foto soll als schlankes WebP (mit AVIF als Bonus) ausgespielt werden. 1. Öffne den [Graphic Editor](https://www.jpkc.com/tools/graphic/), bleib im Tab **Image Editor** und lade das Foto per **Open local image file** oder Drag & Drop. 2. Setz das Seitenverhältnis: In der **Aspect Ratio**-Karte **16:9** wählen (Orientation auf **Landscape**). Zieh die Auswahl so auf, dass der wichtige Bildinhalt drinbleibt. 3. Leg die Ausgabebreite fest: In **Export Settings** unter **Max Width** z. B. `1600` eintragen. Die Höhe ergibt sich automatisch aus dem 16:9-Verhältnis. 4. Klick auf **Save Resized** — das Bild wird mit Pica hochwertig skaliert und im **Result**-Dialog gezeigt. 5. Im Dialog **WebP…** öffnen und **Quality 85 % (Recommended)** wählen. Vergleiche bei Bedarf mit **AVIF… → 80 % (Recommended)**: AVIF ist meist noch kleiner. Steht der AVIF-Button grau, schalte unten **Use WASM Codecs** ein — dann geht AVIF auch ohne Browser-Support. Ergebnis: ein passend geschnittenes, auf Zielbreite skaliertes Bild in einem modernen Format — typischerweise ein Bruchteil der Größe des Original-PNG/JPEG. ## Beispiel 2: Quadratisches Profilbild zuschneiden Aus einem beliebigen Foto soll ein sauberes 1:1-Avatar werden. 1. Bild in den **Image Editor** laden. 2. In der **Aspect Ratio**-Karte **1:1** wählen — die Auswahl ist jetzt zwangsweise quadratisch. 3. Im **Crop mode** die Auswahl über das Gesicht/Motiv ziehen und mittig positionieren; mit dem **Crosshair** (in den **Options**) findest du die Mitte leichter. 4. Für eine feste Pixelgröße entweder eine **Size Preset** wie **Common → Square Medium (300×300)** klicken oder unter **Fixed Crop Size** `300 × 300` eintragen und bestätigen. 5. **Preview cropped image** oder **Save Resized** klicken, dann im **Result**-Dialog als **PNG** (verlustfrei, scharfe Kanten) oder **JPEG 90 %** speichern. ## Beispiel 3: Screenshot verkleinern und als PNG sichern Ein UI-Screenshot ist zu groß für die Doku und soll auf eine vernünftige Breite herunter. 1. Screenshot in den **Image Editor** laden. Bei Screenshots willst du meist **nicht** zuschneiden — lass das Seitenverhältnis auf **Free** und zieh die Auswahl über das ganze Bild (oder nutz **Center → Contain**). 2. In **Export Settings** auf **Refresh Size** klicken, um die echte Größe zu sehen, dann **Max Width** auf den Zielwert setzen, z. B. `1200`. 3. **Save Resized** — Pica rechnet das Bild sauber herunter, inklusive leichter Nachschärfung, sodass Text lesbar bleibt. 4. Im **Result**-Dialog als **PNG** speichern. Für Screenshots mit viel Text und harten Kanten ist PNG die richtige Wahl; willst du noch kleiner werden, probier **WebP Lossless**. ## Beispiel 4: Social-Media-Grafik aus einer Größen-Vorgabe Du brauchst dasselbe Motiv passend für mehrere Kanäle. 1. Bild laden. Statt das Verhältnis von Hand zu setzen, klick direkt eine **Size Preset**, z. B. **Instagram → Post (1080×1080)**. Auswahl-Verhältnis und Zielgröße sind damit in einem Schritt gesetzt. 2. Auswahl auf das Motiv ausrichten und **Save Resized** klicken — die Grafik kommt exakt in 1080×1080 heraus. 3. Als **JPEG 85 %** oder **WebP 85 %** speichern. 4. Für die nächste Plattform dasselbe Bild erneut laden (oder den Ausschnitt anpassen) und eine andere Vorgabe wählen — etwa **X → Post (1200×675)** oder **Facebook → Cover (820×312)**. So ziehst du aus einem Motiv mehrere kanalgerechte Grafiken. ## Beispiel 5: Nur das Format wechseln — im Image Converter Wenn du gar nicht zuschneiden, sondern nur ein vorhandenes Bild umwandeln willst, ist der zweite Tab schneller. 1. Wechsle oben auf den Tab **Image Converter**. 2. Bild per **Choose File** oder Drag & Drop in die Drop-Zone laden (PNG, JPEG, WebP, AVIF, GIF, BMP, SVG werden angenommen). **Image Info** zeigt Format und Größe. 3. Unter **Output Format** das Zielformat wählen — z. B. **WebP (Lossy, smaller file)** — und die **Quality** auf 85 % stellen. 4. Optional unter **Resize** eine **Max W** oder **Max H** setzen, falls das Bild gleichzeitig kleiner werden soll (Seitenverhältnis bleibt erhalten, es wird nur verkleinert). 5. Die **Estimated Size** zeigt vorab grob, wie viel du sparst. Auf **Export Image** klicken — die Datei lädt als `_converted.webp`. Hast du den **WASM**-Encoder aktiv, erscheint nach dem Kodieren die **Actual Size**. ## Beispiel 6: Transparentes PNG als JPEG mit Hintergrundfarbe Ein Logo mit transparentem Hintergrund soll als JPEG raus — JPEG kennt keine Transparenz, also brauchst du eine Füllfarbe. 1. PNG in den **Image Editor** laden. In den **Options** zeigt **Background** das Transparenz-Schachbrett an, damit du siehst, wo das Bild durchsichtig ist. 2. In **Export Settings** den **Paletten-Button** (Background color) aktivieren und im **Coloris**-Picker die gewünschte Farbe wählen — z. B. `#FFFFFF` für Weiß. (Brauchst du exakt die Markenfarbe, hol sie dir vorab aus dem [Colors](https://www.jpkc.com/db/tools/colors/)-Tool.) 3. Ausschnitt setzen und **Save Resized** bzw. **Preview cropped image** klicken. 4. Im **Result**-Dialog als **JPEG 90 %** speichern. Die vormals transparenten Bereiche sind nun mit deiner Farbe gefüllt statt schwarz. --- Noch tiefer: die [Übersicht](https://www.jpkc.com/db/tools/graphic/) zum großen Bild, das [Manual](https://www.jpkc.com/db/tools/graphic/manual/) für jede Funktion im Detail und die [Tipps & Tricks](https://www.jpkc.com/db/tools/graphic/tips/) für die Format- und Qualitätswahl. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/graphic/).