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

Welches Bildformat ist das Richtige? JPG, PNG, WebP, GIF und SVG im VergleichBilder 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?

TarifCheck24 Kredit Hammer
Werbung

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.

Welches Bildformat ist das Richtige? JPG, PNG, WebP, GIF und SVG im Vergleich
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.

Welches Bildformat ist das Richtige? JPG, PNG, WebP, GIF und SVG im Vergleich
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.

WERBUNG
100 % mehr Besucher für deine Website! SEO Coach und Ex-Google Mitarbeiter Jonas Weber bietet über 15 Jahre SEO Know-how. In seinem Online-Kurs verspricht er 100% mehr Besucher. Spare 50 € mit dem Code SIN50 seo-kurs.de

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.

Kostenloser Newsletter mit Tipps, Beispielen, Einblicken ...

  • Für den Versand unseres Newswletters nutzen wir rapidmail. Mit deiner Anmeldung stimmst du zu, dass die eingegebenen Daten an rapidmail übermittelt werden. Die Anmeldung erfolgt mit Hilfe des sogenannten Double-Opt-Ins. Dabei erhältst du eine Mail, in der du einen Bestätigungslink für den Newsletter findest. Nur wenn du diesen anklickst, wird deine Mail in den Newsletter-Versand aufgenommen.
    Weitere Informationen zum Newsletter-Versand, den Datenschutzmaßnahmen, Statistiken und deinen Rechten findest du in der Datenschutzerklärung.



Business Ideen
Werbung

7 Gedanken zu „Welches Bildformat ist das Richtige? JPG, PNG, WebP, GIF und SVG im Vergleich“

  1. Zur Umsetzung von Webp kann ich die beiden Plugins Optimus und Cache enabler empfehlen. So werden wenn möglich immer diese Bilder ausgespielt. Funktioniert super einfach. Zwei Häkchen setzen in beiden Plugins – fertig.

    Antworten
  2. Hallo David,
    danke für die beiden Vergleiche. Ich wusste nicht, dass es einen Unterschied zwischen Grafiken und Bildern gibt. Es gibt WordPress Plugins die das Format in WebP automatisch um formatieren. Einfach mal nach Webp bei Plugins suchen.

    Bin auf deine nächsten Artikel mit den Online Tools gespannt.

    Antworten
  3. Hallo,
    bei PNG wird ein weißer Hintergrund transparent wiedergegeben. Das kann beim Webdesign / Logo durchaus ein einfaches Einfügen eines Bilder oder Motives erleichtern.

    LG
    Bernd

    Antworten
    • Die Transparenz ist jetzt aber nicht das, was PNG als Datei ausmacht. Außerdem braucht der Alpha-Kanal auch wieder Speicherplatz. In meinen Augen ist es fast immer sinnvoller, auf Transparenz zu verzichten und stattdessen den passenden Hintergrund zu wählen, um die Dateigröße noch weiter zu reduzieren. Oder eben das Logo direkt als SVG zu erstellen, was bei Logos in der Regel problemlos möglich sein sollte.

      Transparenz ist wieder etwas, was toll klingt und einfach ist, aber nicht zwangsläufig besser. Klar, in manchen Bereichen ist das nützlich und sinnvoll, aber per se würde ich jetzt nicht alle PNGs transparent speichern, nur weil es möglich ist und im ersten Moment clever klingt.

      Antworten
  4. Hallo David,
    ein interessanter Artikel. Ich hätte jetzt nicht gedacht, dass die Unterschiede so groß sind und habe immer nur auf die Größe der Dateien gedachtet. Man lernt wohl nie aus.

    Viele Grüße
    Timo

    Antworten

Schreibe einen Kommentar