Frisch notiert!
Die neusten Artikel aus unserem Blog.

JPG, PNG, GIF – Bildformate im Web: Unterschiede, Vorteile, Eigenheiten

von Gino Cremer / Zuletzt aktualisiert am 19/08/2016 / Webdesign / 10
Was Bilder im weltweiten Datennetz Internet anbelangt, so ist man auch hier einigen Bedingungen unterworfen. Lediglich drei Bildformate sollten im Web verwendet werden (auch wenn Bilder auch als SVG oder SWF eingebunden werden könnten, spielen doch aktuell nur drei Vertreter eine namhafte Rolle): JPG, GIF und PNG. Alle anderen Formate werden nicht angezeigt und sind auch nicht wie die oben genannten Formate explizit auf Web ausgerichtet. Daher Finger weg von BMP oder ähnlichen Formaten! In einer kleinen visuellen Darstellung vergleichen wir nun die verschiedenen Formate untereinander.

Das JPG-Verfahren

JPG Kompression in drei Stufen visuell erläutert
JPG Kompression in drei Stufen visuell erläutert

Das so genannte JPG Verfahren wird fast ausschließlich für Fotos oder komplexe Bilddateien verwendet. Es kann bis zu 16 Millionen Farben darstellen und beherrscht eine Kompressionsskala von 0% bis 100%. Wie man mit Hilfe des obigen Vergleichs feststellen kann, gibt es je nach Stärke der Kompression erhebliche Qualitätsverluste. Doch die Dateigröße spricht für sich und es liegt an dem Ersteller der Website den „goldenen Mittelweg“ zwischen Kompression und Qualität zu finden.
Erhebliche Schwächen weist dieses Bildformat bei uniformen Farbflächen auf. Außerdem ist es nicht fähig transparente Hintergründe darzustellen, was oftmals für Schaltflächen oder Grafiken im Web benötigt wird.

Das GIF-Verfahren

GIF Kompression und ihre direkten Auswirkungen
GIF Kompression und ihre direkten Auswirkungen (Vergleich GIF/JPEG)

Das so genannte GIF Verfahren kann im Gegensatz zum JPG Verfahren lediglich 256 Farben darstellen, ist jedoch wie man anhand des Beispiels unschwer erkennen kann, wesentlich leistungsstärker in der Darstellung einfacher Farbflächen. Das JPG Verfahren erstellt unschöne „Artefakte“ und ist darüber hinaus dreimal schwerer, was die Dateigröße anbelangt.
Dass das Gif Verfahren für Fotos vollkommen ungeeignet ist, beweist das dritte Bild. Grobkörnig und für diese Qualität viel zu schwer in punkto Dateigröße heißt es bei Fotografien Finger weg vom GIF Format.

Das PNG-Verfahren

Die PNG Kompression und ihre Auswirkungen
Die PNG Kompression und ihre Auswirkungen

Das so genannte PNG Verfahren ist ein „Mischling“ zwischen dem GIF und dem JPG Verfahren. Im Prinzip besitzt es alle Stärken der beiden Formate ohne ihre Schwächen (mal abgesehen von einer überhöhten Dateigröße bei der Nutzung von PNG-24 und einem etwas blasseren Erscheinungsbild beim Einsatz von PNG-8 – Fotos sollten daher zum Beispiel immer als JPG und nicht als PNG dargestellt werden, es sei denn eine transparente Darstellung ist unerlässlich).
Man unterscheidet zwischen dem PNG-8 Verfahren, welches dem GIF Format ähnelt, und dem PNG-24 Verfahren, welches sich eher an JPG anlehnt.
Der einzige Haken an der Geschichte: Der Internet Explorer aus dem Hause Microsoft stellt PNGs in seinen Versionen bis 6.0 lediglich fehlerhaft oder gar nicht erst dar und da ein kleiner Teil der Internetgemeinde stets mit diesem Browser unterwegs ist, sollte man bei der Webentwicklung stets „Ausnahmen“ entwerfen für die entsprechenden Browser.

Fazit

Primärziel sollte stets der „goldene Mittelweg“ sein zwischen Qualität und Kompression. Es macht keinen Sinn sich für ein Format zu entscheiden und dieses Format für jedwelche Art von Bilddatei innerhalb der Website einzusetzen. Vielmehr geht es darum, für jedes Bild das passende Format zu ermitteln.

  • Ist das Bild ein Foto? -> JPG oder PNG-24
  • Gibt es komplexe Farbverläufe? -> JPG oder PNG-24
  • Ist das Bild ein Clipart? -> GIF oder PNG-8
  • Hat das Bild einen transparenten Hintergrund? -> GIF oder PNG
  • Ist das Bild ein Knopf/Schaltfläche? -> Idem
  • Ist das Bild eine Zeichnung? -> Idem
  • Ist das Bild ein Logo? -> Idem

Gino Cremer

Ich bin Geschäftsführer der auf Weblösungen spezialisierten Agentur Pixelbar aus dem belgischen Eupen.

Ich habe langjährige Erfahrung mit CMS-basierten Kundenprojekten, vornehmlich auf WordPress-Basis und bin ein Webdesigner der ersten Stunde.

Daneben arbeite ich auch als Dozent und Berater am WIFI Wien im Bereich Social Media und Webdesign.

Weitere Beiträge von gino anzeigen

10 Kommentare

  1. Gottschalk

    Hallo,

    ich hätte mal eine Frage.
    Ich möchte gerne eine Zeichnung abspeichern.
    Jedoch nur die Zeichnung und nicht den weißen Hintergrund. In welchem Format muss ich das Speicher?
    Die Zeichnung wurde mit AerRage auf dem Mac erstellt.

    Vielen Dank und schöne Grüße

    Markus

    • Hallo, danke für deine Rückmeldung. Artrage selber habe ich nie genutzt. Wenn du ein Foto mit weißem Hintergrund hast und einen transparenten Hintergrund wünschst, solltest du im Web auf ein PNG mit 24 Bit Farbtiefe setzen. Das ist nahezu die einzige vernünftige Wahl. Bedenke jedoch, dass transparente PNG Dateien in der Regel bedeutend schwerer sind als JPG Dateien. Versuche also die Anzahl möglichst gering zu halten. Ich hoffe ich konnte dir behilflich sein.

  2. Hallo Gino Cremer, vielen Dank für deine anschauliche Erläuterung. Was würdest du sagen, welche kb-Größe sollte ein Bild nicht überschreiten. Mein Bild (wahrscheinlich dann am besten JPEG) soll nämlich den gesamten Hintergrund ausfüllen und wird deshalb recht groß.
    Viele Grüße
    Max

    • Hallo Max. Das ist schwer zu beantworten. Ganz banal: So schwer wie nötig und so leicht wie möglich. Eine Faustregel gibt es nicht. Ich würde wenn es schon super gross ausfällt auf jeden Fall maximalst komprimieren (JPG Kompression). Ist auch die Frage ob die Seite viel mobil ufgerufen wird, da ist jeder KB kostbar

  3. LeXiKaN

    Bei der Darstellung der einzelnen Bildvergleiche, gibt es ein Problem mit der Darstellung. An was kann das liegen? Browser: Chrome, Firefox, Explorer wurden getestet. MFG

Hinterlasse eine Antwort

Contact us!