Welches Bildformat ist das Richtige? JPG, PNG, WebP, GIF und SVG im Vergleich

Bilder im Internet sind nicht nur völlig normal, sie sind auch zwingend notwendig, um Texte aufzulockern und mit bestimmten Abbildungen oder Grafiken sinnvoll zu ergänzen. Bilder sind also recht wertvoll für die eigene Website, zumindest wenn sie keine allzu langen Ladezeiten mitbringen.

Auch aus SEO-Sicht macht es Sinn, seine Website mit ansprechenden Bildern zu gestalten, optimierte Alt-Tags zu verwenden und alles bestmöglich anzupassen. Doch welches Bild, sollte in welchem Bildformat gespeichert werden? Und überhaupt, gibt es ein Bildformat, welches alle anderen schlägt und per se besser ist?

Genau darüber möchte ich heute etwas schreiben und euch die besten Bildformate ein wenig genauer vorstellen bzw. aufzeigen, für was selbige eigentlich gut sind.

JPG, PNG, WebP, GIF, SVG – Welches Bildformat ist das Richtige?

Allgemein gibt es aktuell vier große Bildformate. Standard für Fotos aller Art, ist meist das JPG-Format. Dann gibt es noch das PNG, oft scheint die Dateigröße aber umfangreicher auszufallen, weshalb die meisten dann doch wieder als JPG speichern. WebP wird im Grunde nur von Google so richtig verwendet. Ein tolles Format, welches aber lange nicht in allen Browsern unterstützt wurde. Und dann wäre da noch GIF, was immer dann zum Einsatz kommt, wenn das Bild animiert sein soll. Bei Memes zum Beispiel.

Achso und SVG gibt es dann auch noch. Bei SVG-Dateien handelt es sich um Vektor-basierte Bilder, die geometrische Formen nutzen, um etwas darzustellen. Bei Logos sind diese sehr sinnvoll, weil sie zoombar sind und keine Qualitätsverluste aufweisen.

Theoretisch gibt es dann noch ein sechstes Format, nämlich das APNG, also das Animated Portable Network Graphics. Im Grunde ein PNG, welches wie ein GIF animiert werden kann. Die Verbreitung ist aber eher gering und auch wenn ich das Format persönlich sehr gerne mag, weil es sehr flexibel und hochwertiger ist als ein GIF, so ist es aufgrund der wenigen Tools, die APNG überhaupt unterstützen, ein Problem damit zu arbeiten.

Hier im direkten Vergleich: JPG, PNG und WebP sehen (in höchster Qualitätsstufe) ungefähr gleich aus, benötigen gleichzeitig aber vollkommen unterschiedlichen Speicherplatz. GIF kann nur 256 Farben, sieht dementsprechend miserabel aus. Alle Bilder im Test sind unkomprimiert.

Unterscheide zwischen Foto und Grafik

Natürlich könnte ich jetzt komplex in die Mechanik der verschiedenen Bildtypen und Dateien einsteigen. Möchte ich aber nicht. Der Artikel soll Anfängern helfen, das richtige Format auszuwählen, nicht komplizierte Erklärungen abgeben. Also machen wir es ganz einfach und unterscheiden zwischen Foto und Grafik.

Habt ihr ein Foto, welches eine Szene oder eine Ausschnitt zeigt, nutzt am besten immer JPEG. Habt ihr eine Grafik, die Objekte, Formen oder Text beinhaltet, verwendet das PNG-Format. Das ist die einfache Grundregel, an die sich jeder halten sollte. Icons, Logos oder alles was mit festen geometrischen Formen machbar ist, sollte als SVG gespeichert werden, sofern möglich, weil sonst die Qualität unnötig leidet.

Grundsätzlich gilt es immer nur zu unterscheiden, ob Grafik oder Foto vorliegt. Denn auch wenn SVG eine nette Sache ist, im Alltag und im Grafikprogramm deiner Wahl, fällt die Entscheidung meist zwischen PNG und JPG.

Bei Formen und Linien, siegt das PNG-Format. JPG wird bei Kompression unscharf und WebP komprimiert nicht genug. Das PNG hingegen kann ich mit weniger Farben speichern und auch das GIF wäre okay. Unterschiede gibt es bei dieser simplen Darstellung nur in Sachen Dateigröße.

Bildformat WebP als interessanter Exot

Tja, jetzt muss ich aber doch noch einmal auf WebP eingehen. WebP ist ein Format von Google, weshalb es bei der Einführung in Chrome auf viel Ablehnung bei den anderen Browserherstellern stieß. Weder Apple, noch Mozilla oder Microsoft, wollten WebP also in ihren Browser integrieren. Mit der Zeit (um genau zu sein, dauerte es Jahre) verflog dieser Aspekt dann allerdings.

Inzwischen sieht die Sache also anders aus. Fast alle wichtigen Browser, außer Apples Safari, unterstützen das Format. Aus gutem Grund, denn ohne erwähnenswerten Qualitätsverlust, ist das WebP-Format noch einmal deutlich kleiner als alle anderen.

Wer technisch versiert ist, kann und sollte also unbedingt eine WebP-Version bereitstellen, die immer dann ausgeliefert wird, wenn der Browser dies unterstützt. Das mag für einen Blog lächerlich klingen, kann bei einem Shop, mit vielen Produktbildern, dann aber den Unterschied in Sachen Ladezeit ausmachen.

Bilder optimieren

Beim Thema der Ladezeit gibt es sehr viel zu beachten. Die meisten Formate können dezent bis massiv komprimiert und verkleinert werden. Das ist allerdings ein Thema für sich und die WordPress Plugins und Online-Tools dafür inzwischen vielfältig verfügbar.

In meinem nächsten Artikel möchte ich deshalb darauf eingehen und werde euch aufzeigen, wie ihr die Bildoptimierung bestmöglich erledigen könnt. Dafür stelle ich euch verschiedene Online-Tools ein wenig genauer vor.

Fazit zum Bildformat

Wie im Artikel schon aufgezeigt, eignet sich das JPG-Format am besten für alles, was einem Foto ähnelt. Wenn Text oder Objekte sichtbar werden, kann sich das PNG-Format lohnen, es braucht bei normalen Fotos aber viel zu viel Speicherplatz, eignet sich daher wirklich nur für grafische Darstellungen, wo es dann wiederum sehr sparsam ist.

WebP ist super, kann nach wie vor aber nur genutzt werden, wenn ein Fallback zur Verfügung steht, da es nicht von jedem Browser unterstützt wird. GIF hingegen zeigt nur 256 Farben an und eignet sich ausschließlich für kurze Animationen. APNG wäre für Animationen zwar die bessere Wahl, auch hier gibt es aber unter Umständen Probleme, auch deshalb, weil nur wenige Tools das Format überhaupt unterstützen und es sich allgemein nicht durchgesetzt hat.

Wer bereits von Anfang an das richtige Format wählt, spart also Speicherplatz und somit Ladezeit. Außerdem werden Texte nicht unscharf und Fotos bleiben hochauflösend, je nachdem wie sehr ihr die Bilder am Ende dann noch komprimiert. Doch darüber verrate ich euch in einem anderen Artikel noch ein wenig mehr.