# Graphic Editor — Tipps & Tricks > Kniffe für den Graphic Editor: WebP vs. AVIF vs. PNG/JPEG, Qualität und Dateigröße, Privacy clientseitig und die Kombination mit anderen JPKCom-Tools. Source: https://www.jpkc.com/db/tools/graphic/tips/ 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, die [Beispiele](https://www.jpkc.com/db/tools/graphic/examples/) zeigen die Arbeitsabläufe. Hier geht es um das Drumherum: welches Format wann das richtige ist, wie du Qualität gegen Dateigröße abwägst, was clientseitige Verarbeitung für deinen Datenschutz bedeutet und wie der Graphic Editor mit den anderen JPKCom-Tools zusammenspielt. Die Oberfläche ist auf Englisch — echte Button-Namen stehen im Original. ## Das richtige Format wählen Vier Ausgabeformate, vier Zwecke. Eine grobe Entscheidungshilfe: - **AVIF** — die **stärkste Kompression**, die kleinsten Dateien. Erste Wahl für Fotos und Hero-Bilder im Web, wo jedes Kilobyte zählt. Im Tool reicht oft **80 % (Recommended)** für sehr gute Optik. Haken: Nicht jeder Browser exportiert AVIF über das Canvas — steht der **AVIF**-Button grau, schalte im Result-Dialog **Use WASM Codecs** ein, dann kodiert das Tool AVIF lokal selbst. - **WebP** — der **pragmatische Standard**: fast überall unterstützt, deutlich kleiner als JPEG/PNG, mit Lossless-Option für Grafiken. **85 % (Recommended)** ist der Sweet Spot. Wenn du dich nicht entscheiden willst, ist WebP selten falsch. - **JPEG** — die **kompatible Wahl für Fotos**, wenn maximale Verträglichkeit mit alten Systemen zählt. **85 %** liefert gute Qualität bei kleiner Datei; kennt keine Transparenz. - **PNG** — **verlustfrei**, für Grafiken mit harten Kanten, Text, Logos und überall, wo Transparenz nötig ist. Dateien sind groß; willst du verlustfrei und trotzdem kleiner, nimm stattdessen **WebP Lossless**. Merksatz: **Foto fürs Web → AVIF oder WebP. Grafik/Transparenz → PNG oder WebP Lossless. Maximale Kompatibilität → JPEG.** ## Qualität gegen Dateigröße abwägen - **Die „Recommended"-Stufen sind gute Startpunkte**, kein Gesetz. JPEG/WebP **85 %** und AVIF **80 %** sehen in den meisten Fällen tadellos aus. Geh tiefer (70 %, 60 %), wenn das Bild klein angezeigt wird oder die Datei kritisch ist — und prüf das Ergebnis im **Result**-Dialog mit dem Auge. - **Erst skalieren, dann komprimieren.** Die größte Ersparnis ist meist die richtige **Pixelgröße**, nicht die letzte Qualitätsstufe. Schneide und skaliere über **Max Width** / **Save Resized** auf die Größe, in der das Bild wirklich angezeigt wird, bevor du an der Qualität drehst. Pica liefert dabei ein sauberes, leicht nachgeschärftes Ergebnis (siehe [Beispiel 1](https://www.jpkc.com/db/tools/graphic/examples/#beispiel-1-hero-bild-fuer-webp-und-avif-optimieren)). - **Im Converter hilft die Live-Schätzung.** Der **Image Converter** zeigt **Estimated Size** und **Savings** schon vor dem Export — gut, um Format und Qualität gegeneinander abzuschätzen. Die Zahl ist eine grobe Schätzung; im WASM-Modus bekommst du nach dem Kodieren die **Actual Size** als harten Wert. - **WASM-Codecs holen oft noch etwas raus.** MozJPEG, OxiPNG, libwebp und libavif komprimieren bei gleicher sichtbarer Qualität häufig schärfer als die Browser-Standardkodierung. Bei OxiPNG steuert der **Optimization Level**, bei WebP die **Method** und bei AVIF die **Speed** den Aufwand: höhere Stufen brauchen länger, drücken die Datei aber weiter. ## Stolperfallen aus der Praxis - **JPEG hat keine Transparenz.** Exportierst du ein transparentes PNG als JPEG, ohne eine Hintergrundfarbe zu setzen, werden die durchsichtigen Bereiche gefüllt — meist nicht so, wie du willst. Aktiviere vorher die **Background color** (siehe [Beispiel 6](https://www.jpkc.com/db/tools/graphic/examples/#beispiel-6-transparentes-png-als-jpeg-mit-hintergrundfarbe)). WebP und PNG behalten Transparenz. - **Der Editor skaliert breitengetrieben.** In **Export Settings** ist die **Max Width** das maßgebliche Feld; die Höhe folgt dem Seitenverhältnis. Willst du eine exakte Höhe oder ein festes Maß in beide Richtungen, nutz eine **Size Preset** oder **Fixed Crop Size** — die setzen Breite *und* Höhe. - **Der Converter skaliert nur herunter.** **Max W / Max H** im Image Converter verkleinern, vergrößern aber nie über das Original hinaus. Aus einem kleinen Bild macht das Tool kein großes scharfes — Hochskalieren bringt keine Details zurück. - **Metadaten gehen verloren.** Weil der Export ein frisch gerendertes Bild ist, bleiben EXIF-/IPTC-Daten (Kamera, GPS, Copyright-Felder) **nicht** erhalten. Für den Datenschutz ist das ein Plus; brauchst du die Metadaten, sichere das Original separat. - **Sehr große Bilder kosten Speicher.** Es gibt kein hartes Datei-Limit, aber die Verarbeitung läuft im Browser-RAM. Riesige Vorlagen (viele Megapixel) können den Editor träge machen — dann erst grob verkleinern und danach feinarbeiten. - **AVIF-Button grau?** Das liegt am Browser, nicht an deinem Bild. **Use WASM Codecs** einschalten, und der AVIF-Export funktioniert lokal. ## Privacy: warum „im Browser" hier wirklich zählt Der Graphic Editor lädt, bearbeitet und kodiert alles **lokal in deinem Browser** — kein Upload, kein Server, kein API, auch die WASM-Codecs rechnen auf deinem Gerät. Das ist mehr als ein technisches Detail: Du kannst **vertrauliche Screenshots, Kundenmaterial, Verträge oder private Fotos** zuschneiden und konvertieren, ohne sie aus der Hand zu geben. Bei Online-Bildkonvertern lädst du dein Material dagegen auf einen fremden Server. Wenn Vertraulichkeit zählt, ist die clientseitige Verarbeitung das entscheidende Argument — und der wegfallende EXIF-Datensatz (siehe oben) sorgt nebenbei dafür, dass keine GPS- oder Kamera-Infos im exportierten Bild zurückbleiben. ## Mit anderen JPKCom-Tools kombinieren - **Hintergrund- oder Markenfarbe brauchen?** Hol sie dir aus **[Colors](https://www.jpkc.com/db/tools/colors/)** — dort kannst du eine Palette aus einem Bild extrahieren oder einen exakten Farbwert wählen — und setz genau diesen Wert im Graphic Editor als **Background color** für den Export. - **Platzhalterbilder zum Üben oder als Layout-Füller?** Der **[Placeholder Service](https://www.jpkc.com/db/tools/ph/)** erzeugt schnell Dummy-Bilder mit beliebigen Maßen und Farben, an denen du Zuschnitt- und Konvertierungs-Workflows durchspielen kannst. - **Bild fürs Social Sharing fertig?** Mit dem **[Meta Tags Generator](https://www.jpkc.com/db/tools/meta-tags/)** erzeugst du die passenden `og:image`-Tags inklusive Maße zu der Grafik, die du hier auf Social-Größe geschnitten hast. --- Noch mehr Kontext: 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 und die [Beispiele](https://www.jpkc.com/db/tools/graphic/examples/) für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/graphic/).