imedo Development Blog

Wir wollen, dass die Ladezeit von imedo.de so gering wie möglich ist, damit unsere Besucher nicht ewig auf den Aufbau der Seite warten müssen und gefrustet auf den “Zurück”-Button einhämmern.

Welche Bildformate gibt es für Webseiten?

GIF:
verlustfreies Format, bis zu 256 Farben, eine transparente Farbe möglich, unterstützt Animation

Wann verwenden?
Eigentlich nur bei sehr kleinen Grafiken mit wenig Farben oder wenn eine Animation sein muss. Ansonsten sollte man PNG-8 verwenden.

Daumenregel:
Wenn eine Grafik (keine Fotos) kleiner als 20×20 Pixel ist, keine Verläufe hat und mit weniger als 16 Farben auskommt, ist Gif eine gute Wahl. Kleinere Animationen sind ausser mit Flash nur mit Gif möglich. Je weniger Farben, desto kleiner wird die Datei.

PNG-8:
verlustfreies Format, bis zu 256 Farben, unterstützt echte Alphatransparenz, also Übergänge von transparent nach nicht transparent sind in unterschiedlichen Stufen möglich, keine Animationen

Wann verwenden?
Eigentlich genau wie Gif, aber PNG-8 ist zu bevorzugen wenn man gröere Grafiken mit mehr als 16 Farben hat und echte Alphatransparenz verwenden will. Vorsicht ist geboten bei Internet Explorerer und einigen anderen Browsern, weil die Transparenz manchmal falsch interpretiert werden und das Resultat nicht besonders schön aussieht. Ist dies der Fall, sollte man auf Gif ausweichen.

Daumenregel:
Bevorzugtes Format für Grafiken mit bis zu 256 Farben, wenn Transparenz benötigt wird. Fallback auf Gif falls es Probleme gibt. Je weniger Farben, desto kleiner wird die Datei.

JPG/JPEG
verlustreiches Format für Fotos mit sehr starker Kompression, mehr als 256 Farben, keine Transparenz, keine Animationen

Wann verwenden?
Bei Fotos.

Daumenregel:
Alles was keine Grafik ist (z.B. ein Chart mit wenigen Farben) ist ein Kandidat für JPG. Alle Fotos die ihr mit einer Digicam aufnehmt haben normalerweise dieses Format.
Beim abspeichern kann man normalerweise die Qualitätsstufe von 0 – 100 einstellen. Normalerweise sollten 75 reichen, aber wenn es ein Portrait einer Person ist kann man auch mal bis 90 hochgehen.
Umso geringer die Qualität ist, desto kleiner wird die Datei.

Und jetzt? Was nehm ich nun?
Grafiken: PNG-8 oder GIF
Fotos: JPG

Dateigrößen:
PNG-8 und Gif: je weniger Farben, desto kleiner die Dateigröße
JPG: je geringer die Qualität, desto kleiner die Dateigröße

Gibts noch was zu beachten?
Ja! Die Ausmaße der Bilder (Höhe, Breite) die ihr verwendet haben eine enorme Auswirkung auf die Dateigröße. Deswegen Überlegt Euch wie groß das Bild sein soll, bevor ihr es hochladet. Skalierung von Bildern in Browsern verschwendet Bandbreite und sieht unter Umständen (IE *hust*) schrecklich aus.

Und noch was
Die Auflösung im Internet beträgt 72dpi (Dots per Inch, also wieviel Pixel pro Fläche). Alles was darüber hinaus geht ist Verschwendung. Wenn ihr also irgendwo Bilder findet die eine höhere Auflöung haben als 72dpi dann rechnet diese um auf 72dpi.

Popularity: 1% [?]