Welche Bildart (jpg/png/gif) sollte wann benutzt werden

Es gibt drei Dateiarten für Bilder, die in Browsern dargestellt werden können: jpg, png und gif.
Welche Dateiart Sie verwenden, hängt v.a. von der Art des Bildes ab und ob Sie transparente Bereich benötigen.
Achtung, es gibt verschieden Arten von png. Wir sprechen hier von png32.
Qualität und Dateigröße hängen von verschiedenen Faktoren ab, aber im Groben kann man zusammenfassen:

jpg png gif
jpg ist die 1. Wahl bei Fotografien, insbesondere mit großen Seitenlängen. png ist die 1. Wahl bei Fotografien mit transparenten Bereichen gif ist die 1. Wahl bei kleinen Grafiken, bei denen Sie transparente Bereiche benötigen
kleine bis große Dateigrößen große Dateigrößen kleine bis mittlere Dateigrößen
16,8 Mio Farben 16,8 Mio Farben max 256 Farben, daher oft Probleme mit Farbverläufen
ohne Transparenz Transparenz mit verlaufenden Rändern Transparenz aber mit evtl. sichtbaren Rändern
Qualität einstellbar keine Qualität einstellbar keine Qualität einstellbar
wird von allen Browsern dargestellt kann von älteren Browsern eventuell nicht oder nur fehlerhaft dargestellt werden wird von allen Browsern dargestellt
in der Datei können nicht sichtbare Text-Inhalte abgelegt werden in der Datei können keine Text-Inhalte abgelegt werden in der Datei können keine Text-Inhalte abgelegt werden

Nachfolgend einige Beispiele und Vergleiche von jpg, gif und png.


Beispiel 1: Fotografie mit vielen Farben und Verläufen im Hintergrund

verkleinerte Darstellung / Originalbild (680 x 1024px) durch Klick auf eines der Bilder ansehen
jpg png gif
53 kB 850 kB 137 kB
kleinste Dateigröße / gute Qualität größte Dateigröße / gute Qualität mittlere Dateigröße / schlechte Qualität,
besonders im Hintergrund bei den Verläufen

Beispiel 2: Fotografie mit wenigen Farben und transparentem Hintergrund

jpg png gif
6,6 kB 32,4 kB 10,7 kB
kleinste Dateigröße / gute Qualität
keine Transparenz
größte Dateigröße / gute Qualität
Transparenz mit verlaufenden Rändern
um die Blütengrenze
kleine Dateigröße / mittlere Qualität
Transparenz mit sichtbaren Rändern
um die Blütengrenze

Beispiel 3: Grafik mit wenigen Farben und transparentem Hintergrund

jpg png gif
8,0 kB 11,2 kB 5.4 kB
mittlere Dateigröße / gute Qualität
keine Transparenz
größte Dateigröße / gute Qualität
Transparenz mit verlaufenden Rändern
kleinste Dateigröße / gute Qualität
Transparenz mit leicht sichtbaren Rändern
an runden oder schrägen Motiven
© componeo GmbH, 2001 - 2013, made with Love in Berlin and Hamburg