Bildformate im Vergleich: WebP, PNG, JPG & SVG
Die Wahl des falschen Bildformats kann die Ladezeiten von Websites verlängern oder Grafiken unscharf machen. Hier erfahren Sie, wie sich moderne Webformate bei Komprimierung, Transparenz und Schärfe unterscheiden.
Ihre Dateien werden vollständig in Ihrem Webbrowser mit HTML5 Canvas und WebAssembly verarbeitet. Es verlassen niemals Daten Ihr Gerät.
Überspringen Sie Upload- und Download-Warteschlangen. Konvertierungen erfolgen lokal mit voller Maschinen-Hardware-Geschwindigkeit ohne Server-Limits.
Konform mit offiziellen ISO-, W3C- und IETF-Spezifikationen, um die Ausgabekompatibilität über moderne Betriebssysteme hinweg zu garantieren.
Formatvergleich & Technische Spezifikationen
| Ausgabeformat | MIME-Typ | Spezifikation | Typ |
|---|---|---|---|
| PNG Bild | image/png | W3C-PNG | Rastergrafik mit verlustfreier Komprimierung |
| JPG JPEG-Bild | image/jpeg | ITU-T-T81-JPEG | Komprimiertes fotografisches Rasterbild |
| WebP Bild | image/webp | RFC-6386-VP8 | Modernes WebP-Bildformat von Google |
| SVG Vektorgrafik | image/svg+xml | W3C-SVG | Skalierbare vektorbasierte Grafik |
| HEIC Foto | image/heic | ISO-IEC-23008-12-HEIF | Hocheffizienter Bildcontainer |
| AVIF Bild | image/avif | AOMEDIA-AV1-AVIF | AV1-Bilddateiformat |
| PSD Photoshop-Dokument | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop-Dokument |
| PSB Photoshop Großformat-Dokument | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Großformat-Dokument |
| WMF Windows-Metadatei | image/x-wmf | MS-WMF-SPEC | Windows Metafile Vektorformat |
| EMF Erweiterte Metadatei | image/x-emf | MS-EMF-SPEC | Erweitertes Metadatei-Vektorformat |
| JFIF Bild | image/jpeg | ITU-T-T81-JPEG | JPEG-Dateiaustauschformat |
| TGA Truevision | image/x-tga | TGA-SPEC | Truevision Advanced Raster |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX-Bitmap |
Technische Spezifikationen & Codec-Übersicht
Die schnelle Entscheidungsregel für Formate
Verwenden Sie WebP oder AVIF für moderne Websites (30 % kleiner als JPEG mit Unterstützung für Transparenz). Nutzen Sie JPG für Fotos, bei denen winzige, unmerkliche Komprimierungsartefakte keine Rolle spielen. Verwenden Sie PNG für Screenshots, Benutzeroberflächen-Grafiken und Illustrationen, die gestochen scharfen Text erfordern. Nutzen Sie SVG für Logos und Icons, die unendlich skaliert werden müssen.
Raster- vs. Vektorgrafiken: Warum SVGs nie unscharf werden
Rasterbilder (JPG, PNG, WebP) sind Raster aus festen Farbpixeln - wenn man zu weit heranzoomt, werden sie verschwommen oder pixelig. SVG ist pure Mathematik: Es speichert mathematische Linien, Kurven und Farben, sodass Icons und Illustrationen auf allem - vom Mobiltelefon-Display bis zum 8K-Bildschirm - bei winzigen Dateigrößen razor-sharp (gestochen scharf) dargestellt werden.
Mythos: „Höhere DPI bedeutet bessere Web-Bildqualität"
DPI (dots per inch) sind rein physikalische Druckanweisungen und werden von Webbrowsern komplett ignoriert. Auf Smartphones und Computerbildschirmen wird die Bildschärfe ausschließlich durch die Pixelabmessungen (z. B. 1920x1080) und die Anzeigedichte bestimmt, nicht durch die eingebetteten DPI-Metadaten.
Alpha-Transparenz: PNG im Vergleich zu WebP
Traditionelles JPG bietet keinerlei Unterstützung für Transparenz - transparente Hintergründe werden einheitlich weiß oder schwarz. PNG hat die saubere 8-Bit-Alpha-Transparenz pionierhaft eingeführt, aber WebP liefert heute eine identische Transparenzqualität bei bis zu 40 % kleineren Dateigrößen.
0 Bytes an externe Server hochgeladen. Die gesamte Verarbeitung erfolgt lokal in Ihrer Browser-Sandbox.