Warum sind im Web die Dateigrößen der Bilder so wichtig?

Da die Übertragungsgeschwindigkeiten vor wenigen Jahren noch sehr beschränkt waren, galt – um die Geduld der User nicht unnötig zu strapazieren – ein genereller Richtwert von ca. 15KB pro Bild.

Heutzutage kann keine allgemeine Einschränkung mehr getroffen werden, da diese von Anzahl der Bilder, deren Verwendungszweck, Zielgruppe etc. abhängt.

Eine klar definierte Aussage lässt sich allerdings über die drei mittlerweile standardisierten Bildformate tätigen.
Um Ihnen die Auswahl des richtigen Formates zu erleichtern, möchten wir hier im Detail auf JPEG, GIF und PNG eingehen.

Hier eine kurze Übersicht der drei im Web etablierten Bildformate:
GIF (Graphics Interchange Format)

Vorteile:

  • geringe Dateigröße
  • Animationen möglich
  • eine Transparenzstufe darstellbar
  • Interlacing (Ladezeit des Bildes)
  • verlustfreies komprimieren / speichern

Nachteil:
GIF ist nicht für Fotos und Verläufe geeignet, da es nur einen Farbraum von 256 Farben darstellen kann.

Verwendung:
GIF sollte nur für Grafiken verwendet werden, die mit einem sehr kleinen Farbspektrum (256) auskommen. Häufig verwendet bei Logos und Websiteelementen.

Aufzeigen von 256 GIF-Farben

JPEG (Joint Photographic Experts Group)

Vorteile:

  • 16,7 Millionen Farben
  • Datenreduktion möglich
  • geringe Datengröße

Nachteil:
Jeder Speichervorgang ist mit Qualitätsverlusten behaftet (Artefakte – siehe Bild)

Verwendung:
Ideal für Fotos mit großem Farbspektrum

Beispiel für Artefakte in einem Bild

PNG (Portable Network Graphics)

Vorteile:

  • 48-Bit-Farbraum
  • verlustfreies Komprimieren / Speichern
  • eigener Alphakanal (8 Bit bzw. 16 Bit), der stufenlose Tranparanz darstellen kann

Nachteil:
Nur Browser ab der vierten Generation können die PNGs fehlerlos darstellen

Verwendung:
PNG wird hauptsächlich dort eingesetzt, wo Transparenzen Verwendung finden.

 

JPG – GIF – PNG
grafischer Vergleich zwischen JPG, GIF und PNG
Praktisch:

Grafiker die mit Photoshop arbeiten, können unter dem Punkt “Datei > Für Web speichern” ihr gewünschtes Bildformat auswählen und mit den anderen Formaten unter diversen Komprimierungseinstellungen vergleichen.

 

Ähnliche Beiträge.

Tags: , , , , , , , , ,