Graphic Editor — Anwendungsbeispiele

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

Das 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.

Öffne den Graphic Editor, bleib im Tab Image Editor und lade das Foto per Open local image file oder Drag & Drop.
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.
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.
Klick auf Save Resized — das Bild wird mit Pica hochwertig skaliert und im Result-Dialog gezeigt.
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.

Bild in den Image Editor laden.
In der Aspect Ratio-Karte 1:1 wählen — die Auswahl ist jetzt zwangsweise quadratisch.
Im Crop mode die Auswahl über das Gesicht/Motiv ziehen und mittig positionieren; mit dem Crosshair (in den Options) findest du die Mitte leichter.
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.
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.

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).
In Export Settings auf Refresh Size klicken, um die echte Größe zu sehen, dann Max Width auf den Zielwert setzen, z. B. 1200.
Save Resized — Pica rechnet das Bild sauber herunter, inklusive leichter Nachschärfung, sodass Text lesbar bleibt.
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.

Du brauchst dasselbe Motiv passend für mehrere Kanäle.

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.
Auswahl auf das Motiv ausrichten und Save Resized klicken — die Grafik kommt exakt in 1080×1080 heraus.
Als JPEG 85 % oder WebP 85 % speichern.
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.

Wechsle oben auf den Tab Image Converter.
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.
Unter Output Format das Zielformat wählen — z. B. WebP (Lossy, smaller file) — und die Quality auf 85 % stellen.
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).
Die Estimated Size zeigt vorab grob, wie viel du sparst. Auf Export Image klicken — die Datei lädt als <name>_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.

PNG in den Image Editor laden. In den Options zeigt Background das Transparenz-Schachbrett an, damit du siehst, wo das Bild durchsichtig ist.
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-Tool.)
Ausschnitt setzen und Save Resized bzw. Preview cropped image klicken.
Im Result-Dialog als JPEG 90 % speichern. Die vormals transparenten Bereiche sind nun mit deiner Farbe gefüllt statt schwarz.

Noch tiefer: die Übersicht zum großen Bild, das Manual für jede Funktion im Detail und die Tipps & Tricks für die Format- und Qualitätswahl. Ausprobieren kannst du alles direkt im Tool.