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.
Dateien werden lokal in Ihrem Browser mit WebAssembly- und HTML5-APIs verarbeitet. Sie verlassen niemals Ihr Gerät. Daher werden keine Dateien auf Server hochgeladen oder von Drittanbietern gespeichert.
Beginnen Sie sofort auf Ihrem eigenen Gerät mit der Konvertierung - ohne Wartezeit beim Upload, ohne Download-Warteschlange und ohne Drosselung durch einen externen Server.
Nutzen Sie jedes verfügbare Tool, ohne ein Konto anzulegen, einen Tarif zu bezahlen oder Dateigrößenbeschränkungen zu unterliegen. Konvertieren Sie so oft, wie es Ihr Browser und Gerät zulassen.
Formatvergleich & technische Spezifikationen
| Ausgabeformat | MIME-Typ | Spezifikation | Typ |
|---|---|---|---|
| PNG Bild | image/png | W3C-PNG | Portable Network Graphics |
| JPG JPEG-Bild | image/jpeg | ITU-T-T81-JPEG | Joint Photographic Experts Group |
| 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 | Vektorformat für erweiterte Metadateien |
| JFIF Bild | image/jpeg | ITU-T-T81-JPEG | JPEG-Dateiaustauschformat |
| TGA Truevision | image/x-tga | TGA-SPEC | Truevision-Targa-Rasterbild |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX-Bitmap |
| PDF Dokument | application/pdf | ISO-32000-2 | Plattformunabhängiges Dokumentenformat |
Technische Spezifikationen und Codec-Übersicht
Die schnelle Entscheidungsregel für Formate
WebP und AVIF können die Dateigröße vieler Webbilder verringern und unterstützen beide Transparenz. Das Ergebnis hängt jedoch vom Bild und den Kodierungseinstellungen ab. Verwenden Sie JPG für Fotos, wenn kleine Kompressionsartefakte akzeptabel sind, PNG für scharfe Screenshots und Grafiken und SVG für skalierbare Logos und Symbole.
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 reine 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 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
JPEG hat keinen Transparenzkanal. Transparente Pixel erhalten beim Speichern als JPEG daher einen einfarbigen Hintergrund. PNG erhält die Alphatransparenz; auch WebP kann Transparenz speichern und eine kleinere Datei erzeugen. Vergleichen Sie das Bild, denn die Größe hängt von Inhalt und Kodierungseinstellungen ab.
0 Bytes an externe Server hochgeladen. Die gesamte Verarbeitung erfolgt lokal in Ihrer Browser-Sandbox.