JPKCom DB

Graphic Editor — Tipps & Tricks

Kniffe für den Graphic Editor: WebP vs. AVIF vs. PNG/JPEG, Qualität und echte Dateigröße, Metadaten, Privacy und andere JPKCom-Tools.

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

Das Manual erklärt jede Funktion, die Beispiele 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. Im Image Converter wechselt das Tool in diesem Fall von sich aus auf den WASM-Encoder.
  • 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).
  • Im Converter vergleichst du mit echten Zahlen. Der Image Converter kodiert bei jeder Änderung probeweise und zeigt unter File size und Savings die tatsächliche Größe der Ausgabedatei — keine Schätzung. Stell Format, Quality und Encoder nacheinander um und vergleich die Werte, bevor du exportierst. Eine rote Zahl mit Pluszeichen heißt: Die neue Datei wäre größer als das Original — dann lohnt die Umwandlung in dieser Einstellung nicht. Nur bei AVIF über WASM mit mehr als 2 Millionen Pixeln in der Ausgabe (nach Max W/Max H) erscheint die Größe erst nach dem Export, weil die Kodierung zu lange dauert.
  • 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: Ein höherer Level und eine höhere Method brauchen länger, drücken die Datei aber weiter; bei AVIF ist es umgekehrt — eine niedrigere Speed rechnet länger und gründlicher. Diese Regler gibt es nur im Image Converter; der Editor kodiert mit festen Werten (Level 2, Method 4, Speed 6).

Stolperfallen aus der Praxis

  • JPEG hat keine Transparenz. Exportierst du ein transparentes PNG als JPEG, füllt das Tool die durchsichtigen Bereiche automatisch mit Weiß. Willst du eine andere Farbe, aktiviere im Editor die Background color (eine deckende, nicht transparent) bzw. wähle im Converter Background for transparent areas (siehe Beispiel 6). 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. Was eine JPEG- oder PNG-Quelle mitbringt, zeigt dir der Image Converter vorab in der Zeile Metadata der Image Info.
  • 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. Im Converter ist aus demselben Grund die Option Browser gesperrt.
  • Leere Streifen im Export? Standardmäßig hält Keep selection inside image die Auswahl beim Ziehen und Vergrößern im Bild, und nach dem Laden ist das ganze Bild ausgewählt. Verkleinerst oder verschiebst du danach das Bild selbst (Zoom Out, Mausrad, Move mode, Pfeiltasten, Contain), kann die Auswahl trotzdem über den Rand ragen — dann fass sie kurz an, und das Tool schiebt sie zurück ins Bild. Ist der Schalter aus, kann die Auswahl über das Bild hinausragen — der Rand landet dann transparent bzw. in der Hintergrundfarbe im Export. Das ist gewollt, wenn du ein Motiv mit Rand brauchst (Beispiel 8); sonst schalte ihn wieder ein.

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. Bevor du Fotos weitergibst, lohnt der Blick in die Metadata-Zeile des Converters: Steht dort GPS location (farblich hervorgehoben), verrät das Original den Aufnahmeort, die exportierte Datei nicht mehr (Beispiel 7).

Mit anderen JPKCom-Tools kombinieren

  • Hintergrund- oder Markenfarbe brauchen? Hol sie dir aus 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 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 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 zum großen Bild, das Manual für jede Funktion und die Beispiele für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im Tool.