Was ist das beste Bildformat für eine Website?

Die Frage nach dem „besten Format“ ist falsch, solange du nicht weißt, um welche Art von Bild es geht. Eine Website enthält einige sehr unterschiedliche Bildtypen, und für jeden gibt es einen klaren Gewinner:

• Fotos (Produkte, Menschen, Orte): ein verlustbehaftetes Format. AVIF erzeugt die kleinsten Dateien, WebP ist die sichere moderne Standardwahl und JPG ist das Fallback, das jeder Browser anzeigen kann.
• Logos, Symbole und Illustrationen: SVG. Es handelt sich um Vektorgrafiken, die auf jedem Bildschirm bei jeder Größe scharf bleiben, während die Datei meist winzig ist. Weiche nur dann auf ein Pixelformat aus, wenn eine Plattform SVG ablehnt.
• Screenshots, UI-Grafiken und alles mit Transparenz: PNG oder verlustfreies WebP. Gleichmäßige Farben und scharfe Kanten lassen sich mit verlustfreien Formaten besonders gut komprimieren.
• Kurze Animationen: animiertes WebP oder AVIF anstelle von GIF, das auf eine kleine Farbpalette beschränkt ist und deutlich größere Dateien erzeugt.
• Das Favicon: eine ICO-Datei, idealerweise zusammen mit einer SVG- oder PNG-Version – siehe Favicon aus einem Bild erstellen.

Der klassische Fehler ist ein als PNG gespeichertes Foto. PNG speichert jedes Pixel verlustfrei, was für ein Logo perfekt und für ein Foto verheerend ist: Die Datei wird ohne sichtbaren Vorteil um ein Vielfaches größer als ein JPG.

Bei Fotos hängt die Wahl davon ab, wie stark du dich auf neuere Browser verlassen kannst:

• AVIF komprimiert am besten: Bei üblicher Webqualität ist es etwa 50% kleiner als JPEG und 20–30% kleiner als WebP und unterstützt bei Bedarf HDR sowie einen großen Farbraum. Chrome, Firefox und Safari können es alle anzeigen (Safari seit Version 16.4, im Jahr 2023). Die Nachteile sind die langsame Kodierung, besonders bei großen Bildern, sowie die geringe Unterstützung durch Desktop-Software und ältere Geräte.
• WebP ist die pragmatische Standardwahl: bei gleicher sichtbarer Qualität 25–35% kleiner als JPEG, mit Transparenz und seit 2020 von jedem gängigen Browser unterstützt. Einige Desktop-Anwendungen und ältere Werkzeuge können es noch immer nicht öffnen; das ist für die Datei relevant, die du an einen Designer weitergibst, nicht für diejenige, die du Besuchern bereitstellst.
• JPG ist das universelle Fallback. Es ist das ineffizienteste der drei Formate, doch ein mit einer Qualität von etwa 75–82 gespeichertes JPG ist auf dem Bildschirm normalerweise nicht vom Original zu unterscheiden, und alles im Web kann es anzeigen.

Die beste Konfiguration liefert AVIF an Browser aus, die es verstehen, WebP an die übrigen und hält ein JPG für alles Ältere bereit. Wenn du lieber nur ein Format auswählen möchtest, deckt WebP mit einem JPG-Fallback praktisch alle ab. Direkte Vergleiche findest du unter WebP im Vergleich zu AVIF und WebP im Vergleich zu JPG; für Grafiken statt Fotos siehe PNG im Vergleich zu JPG.

Sobald du das Zielformat kennst, ist die Konvertierung schnell erledigt und die Datei verlässt niemals dein Gerät. Der Bildkonverter von EditItAll läuft vollständig in deinem Browser:

1. Öffne den Konverter und lege deine Bilder dort ab – eine einzelne Datei oder den Inhalt eines ganzen Ordners. Stapel werden gemeinsam verarbeitet.
2. Wähle das Ausgabeformat: WebP oder AVIF für Fotos, PNG für Grafiken, die Transparenz benötigen. Für häufige Aufgaben gibt es direkte Wege: JPG zu WebP, PNG zu WebP, JPG zu AVIF und PNG zu AVIF.
3. Lege die Qualität fest. Es gibt kein Feld für eine Zielgröße: Die Größe ist ein Ergebnis. Für jede Datei wird die Größe vorher und nachher angezeigt, sodass du den Regler anpassen kannst, bis sowohl der Wert als auch das Bild stimmen.
4. Lade die Ergebnisse einzeln oder gemeinsam als eine ZIP-Datei herunter.

Nichts wird hochgeladen – nachdem die Seite geladen wurde, kannst du die Internetverbindung trennen und weiter konvertieren. Außerdem werden EXIF- und GPS-Metadaten aus jedem exportierten Bild entfernt, damit ein Produktfoto nicht verrät, wo es aufgenommen wurde. Der Dienst ist kostenlos, erfordert kein Konto und fügt kein Wasserzeichen hinzu. Du hast bereits das richtige Format und musst die Datei nur verkleinern? Gehe direkt zum Bildkompressor. Falls eine Plattform auf einer Pixelversion eines Vektorlogos besteht, rendert SVG zu PNG das Logo in jeder von dir gewählten Größe.

Die Wahl des Formats lohnt sich, doch drei Gewohnheiten sparen mehr Bytes, als der Wechsel von JPG zu AVIF jemals könnte:

• An die tatsächlich angezeigte Größe anpassen. Ein Kamerafoto ist um ein Vielfaches breiter als der Bereich, den es auf einer Seite ausfüllt, und jedes dieser zusätzlichen Pixel wird heruntergeladen und anschließend verworfen. Genau dafür bieten die Bildwerkzeuge von EditItAll eine optionale Begrenzung der maximalen Abmessungen.
• Einmal vom Original aus komprimieren. Bei jedem verlustbehafteten Speichern gehen etwas mehr Details verloren. Bewahre das Original auf, exportiere daraus die Webversion und speichere ein JPG nicht innerhalb einer Verarbeitungskette erneut als WebP und anschließend als AVIF.
• Moderne Formate mit einem Fallback bereitstellen. Biete zuerst AVIF oder WebP an und lasse ältere Browser auf JPG oder PNG zurückgreifen, damit kein Besucher jemals ein defektes Bild sieht.

Wenn ein Geschwindigkeitsbericht dich auffordert, Bilder „effizient zu kodieren“ oder „Bilder in Formaten der nächsten Generation bereitzustellen“, ist genau diese Entscheidung gemeint: Warnung zur effizienten Bildkodierung beheben führt dich durch den Vorgang, und JPEG für das Web komprimieren erklärt den Qualitätsregler ausführlich. Weitere Formatleitfäden findest du im Themenbereich Bilder konvertieren.