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. Nach dem Laden umfasst die Auswahl bereits das ganze Bild; die Crop Data-Karte zeigt dir die vollen Originalmaße.
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).
File size und Savings zeigen vorab die echte Größe der Ausgabedatei — das Tool kodiert dafür probeweise mit deinen Einstellungen. Schieb den Quality-Regler und beobachte, wie sich die Zahl ändert. Auf Export Image klicken — die Datei lädt als <name>_converted.webp.

Beispiel 6: Transparentes PNG als JPEG mit Hintergrundfarbe

Ein Logo mit transparentem Hintergrund soll als JPEG raus — JPEG kennt keine Transparenz, die durchsichtigen Bereiche brauchen also eine Füllfarbe. Weiß setzt das Tool automatisch; für jede andere Farbe gehst du so vor:

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 — er wird grün — und im Coloris-Picker die gewünschte Farbe wählen, z. B. ein helles Grau #F5F5F5. (Brauchst du exakt die Markenfarbe, hol sie dir vorab aus dem Colors-Tool.)
Ausschnitt setzen und Preview cropped image klicken. Willst du stattdessen über Save Resized skalieren, trag vorher unter Max Width die Zielbreite ein — nach dem Laden steht dort die Breite des ganzen Bildes, ein Ausschnitt würde sonst auf diese Breite hochgerechnet.
Im Result-Dialog als JPEG 90 % speichern. Die vormals transparenten Bereiche sind nun mit deiner Farbe gefüllt. Lässt du die Background color aus, werden sie weiß.

Ohne Zuschnitt geht es im Image Converter noch schneller: Output Format auf JPEG stellen, unter Background for transparent areas die Farbe wählen und exportieren.

Beispiel 7: Fotos ohne GPS-Daten weitergeben

Ein Handyfoto soll in einen Blog-Artikel oder an Dritte gehen — ohne verräterischen Aufnahmeort.

Wechsle in den Tab Image Converter und lade das Foto.
Schau in der Image Info auf die Zeile Metadata. Bei einem JPEG mit Standortdaten stehen dort etwa Einträge wie camera, date, shooting data, GPS location — weil GPS location dabei ist, ist die ganze Angabe farblich hervorgehoben. Darunter steht „removed on export“.
Output Format wählen, etwa JPEG mit Quality 85 % oder WebP, optional per Max W auf 1600 verkleinern.
Export Image klicken. Die neue Datei enthält nur noch die Pixel — Kameradaten, Datum und GPS-Standort sind weg.

Beispiel 8: Logo mit Rand auf eine quadratische Fläche setzen

Ein breites Logo soll als quadratisches Profilbild dienen, ohne dass etwas abgeschnitten wird.

Logo in den Image Editor laden.
In der Toolbar den Schalter Keep selection inside image ausschalten — jetzt darf die Auswahl über das Bild hinausragen.
Unter Size Presets Common → Square Large (600×600) klicken — das setzt das Verhältnis 1:1 und die Zielgröße 600×600 Pixel. Zieh die Auswahl so auf, dass das ganze Logo mit etwas Luft darin liegt. Reicht der Platz im Editor nicht, verkleinere das Bild vorher mit Zoom Out.
In Export Settings die Background color aktivieren und eine Farbe für den Rand wählen. Ohne Hintergrundfarbe bleibt der Rand transparent — praktisch für PNG oder WebP.
Preview cropped image klicken und im Result-Dialog als PNG oder WebP speichern.

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.