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
| 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 |