Rasterbilder im Browser
Rasterbilder bestehen aus Pixeln und Metadaten wie Breite, Höhe, Farbkanälen und Containerformat. JPEG, PNG und WebP unterscheiden sich bei Kompression, Farbtreue, Transparenz und Unterstützung. Diese Werkzeugfamilie konvertiert, skaliert, untersucht und analysiert Farben vollständig im Browser: Dateidaten werden nicht an einen Server hochgeladen.
Für ein kleineres WebP aus einem Foto verwenden Sie JPG zu WEBP. Das richtige Zielformat richtet sich nach dem nächsten Verbraucher: CMS, Größenlimit, Designsystem mit Alpha-Kanal oder Performance-Budget.
Formate und Verarbeitung
JPEG ist für Fotos effizient, aber verlustbehaftet und kennt keinen Alpha-Kanal. Eine erneute Kodierung mit geringerer Qualität verliert weitere Details; JPEG nach PNG stellt frühere Details nicht wieder her. PNG speichert verlustfrei und unterstützt Transparenz, ist bei Fotos jedoch oft deutlich größer. WebP bietet verlustbehaftete und verlustfreie Modi und liefert häufig kleinere Dateien bei ähnlicher Qualität.
Der Ablauf lautet: lokale File lesen, Bitmap dekodieren, in der gewünschten Größe auf Canvas zeichnen, mit MIME-Typ und optionaler Qualität exportieren und herunterladen. Qualitätsregler betreffen JPEG und verlustbehaftetes WebP; PNG bleibt für den Canvas-Puffer verlustfrei. Transparente PNG- oder WebP-Bereiche werden bei JPEG meist auf einen festen Hintergrund verrechnet.
Werkzeuge der Familie
- JPG zu WEBP und PNG zu WEBP erzeugen WebP.
- WEBP zu JPG, PNG zu JPG und JPG zu PNG bilden Formatbrücken.
- Nach Breite oder Höhe skalieren, Bildinformationen und Dominante Farben helfen beim Prüfen.
Größe, Metadaten und Grenzen
Geben Sie nur Breite oder Höhe vor, damit das Seitenverhältnis erhalten bleibt. Verkleinern hilft der Ladezeit; Vergrößern erfindet Pixel. Dateigröße und Megapixel messen Verschiedenes: Bildinformationen zeigt beides. Canvas ist eine Pixel-Pipeline, kein vollständiges EXIF-Archiv; Orientierung kann dargestellt werden, umfangreiche GPS- und Kameratags kehren aber selten in Exporte zurück.
Farbanalyse zählt oder gruppiert nach optionalem Downsampling Farben und liefert CSS-taugliche Hex-/RGB-Werte. sRGB-Annahmen und JPEG-Chroma-Subsampling beeinflussen das Ergebnis. Wiederholte verlustbehaftete Ketten wie JPEG → WebP → JPEG vermeiden; Qualität 80 bedeutet bei WebP nicht dasselbe wie bei JPEG. Sehr große Bilder können Tab-Speicher erschöpfen; CMYK-TIFF und animierte Mehrbilddateien gehören nicht zum erwarteten Ablauf. Bewahren Sie ein Master auf und erstellen Sie daraus einen einzelnen Auslieferungsexport.