HTML lernen - Elementare Infos - Grafiktypen

Im Web werden nahezu überall Grafiken verwendet, jedoch ist den meisten Surfern nicht bekannt, dass hier nur drei verschiedene Grafiktypen verwendet werden und welche Vor- und Nachteile diese haben.

JPG bzw. JPEG

Dieser Grafiktyp hat die Dateiendung .jpg oder .jpeg und wird überwiegend für Fotos oder hochauflösende Webseitenelemente verwendet. Allerdings können JPGs keine durchsichte (=transparente) Stellen enthalten und benötigen in der Regel mehr Speicherplatz als die anderen beiden Grafiktypen.

GIF

GIF (mit der Dateiendung .gif) ist momentan der am meisten verwendete Dateityp im Web. GIFs können transparente Stellen enthalten, animiert sein (z.B. Banner) und benötigen weniger Speicherplatz aufgrund eines Speicherverfahrens, das einer GIF-Datei nur die nötigsten Farben zuweist. Nachteil dieses Dateityps ist, dass Fotos keine gute Qualität haben.

PNG

PNG (mit der Dateiendung .png) ist der neuste Grafiktyp und soll die Vorteile von JPG und GIF vereinen. Dieser Grafiktyp speichert Fotos in guter Qualität und kann transparente Stellen darstellen. Nachteile sind, dass die transparenten Stellen in älteren Browsern grau dargestellt werde und dass PNGs mehr Speicherplatz benötigen als GIFs.

Achtung! Es gibt noch einige andere Grafiktypen, die auch ab und an einmal im Web verwendet werden. Diese sind jedoch äußerst selten.

Speicherplatz

Im Web sollte immer darauf geachtet werden, dass Grafiken so wenig Speicherplatz wie möglich benötigen, da nicht jeder Internetnutzer einen schnellen DSL-Anschluss hat und sonst beispielsweise bei einem 5MB großen Photo bis zu 10 Minuten warten muss, bis dieses in seinem Browser vollständig geladen ist.

Hinweis! Viele Grafikprogramme haben deshalb eine Funktion, um weboptimierte Grafiken auszugeben, die dann weniger Speicherplatz benötigen.

Achtung! Wenn bei einer Grafikdatei der benötigte Speicherplatz reduziert wird, so leidet die Qualität der Grafik darunter. Dies ist bis zu einem gewissen Maße nicht sichtbar. Wird der Speicherplatz einer Grafik jedoch extrem verkleinert, so verliert diese Datei sehr stark an Schärfe und es werden weniger unterschiedliche Farben verwendet.