Im vorigen Abschnitt haben wir das grobe Grundgerüst von HTML und CSS kennen gelernt. Dabei wurde auch schon der „img“-Befehl vorgestellt, der für die Darstellung von Bildern verantwortlicht ist. Im Teil 5 der Artikelreihe „Wie erstelle ich eine Homepage“ geht es nun um die Dateiformate. Im Internet findet man grundsätzlich folgende Dateiformate für Bilder und Grafiken:

  • .jpg, .jpeg
  • .gif
  • .png

Jpg

Dieses Format findet man auch in digitalen Kameras voreingestellt. Es ist also vorwiegend im Einsatz bei Fotos. Dieses Einsatzgebiet ist auch im Internet vorgesehen und zwar aus folgenden Gründen:

  • hohe Komprimierung (Dateigröße ist klein)
  • trotzdem gute Qualität (je nach gewählter Qualitätsstufe)
  • keine Einschränkung im Farbumfang (ca. 16 Millionen Farben sind möglich)
  • Einbettung eines Farbprofils möglich

Nachteile hat diese Format aber auch:

  • Qualtätseinbußen durch jpg-Artefakte bei geringer Qualitätsstufe
  • keine Transparenz möglich
  • keine Animation/Bildabfolge möglich
  • bei Text oder Zeichnungen erscheinen die Linien nicht ganz klar und wirken verwaschen, nur bei hoher Qualität (und großer Datei) kann man ein gutes Ergebnis erwarten

Genau diese Gründe sprechen für den Einsatz vom jpg-Format für Fotos im Internet

Gif

Im Gegensatz zum jpg, ist das gif überhaupt nicht für Fotos geeignet, weil es

  • nur 256 Farben speichern kann
  • bei Fotos zu sehr großen Dateien kommt (das gif speichert jeden Farbpixel einzeln, während das jpg versucht, die Farben flächenmäßig durch komprimierbare Formeln zu interpretieren)

Dafür hat es seine Vorteile bei Logos und Animationen, weil es

  • Buchstaben und Zeichnungen klar darstellen kann
  • kleine Dateien liefert
  • Bildabfolgen/Animationen und
  • Transparenz unterstützt

Png

Dieses Format hat die identischen Eigenschaften wie das gif. Allerdings gibt es noch eine Sonderform vom png – das png(24). Die 24 steht für 24 bit, was 2 hoch 24 bedeutet und den Farbumfang von 16 Millionen Farben verdeutlichen soll (im Unterschied zum normalen png/gif mit nur 256 Farben). Mit diesem Format kann mal sowohl Fotos als auch Logos und Zeichnungen bei guter Qualität darstellen. Allerdings ist diese Datei recht groß, da es kaum Komprimierung gibt und eine Einbettung des Farbprofils ist auch nicht möglich.

Zu empfehlen ist es bei:

  • Logos mit Transparenz
    • im Gegensatz zum normalen png/gif, kann man 256 Transparenzstufen anlegen; damit ist ein Schattenwurf möglich
    • außerdem ist Transparenz bzw. die freigestellte Kante beim png ausgesprochen gut und nicht pixelig wie beim gif/png
  • Bilddateien mit kleinen Abmessungen (Breite und Höhe)
  • Bilddateien mit Schrift und kleinen Abmessungen

Hier noch der direkte Vergleich

png 8

png mit 256 Farben und 157 kb

png mit 16 Millionen Farben und 455 kb

png mit 16 Millionen Farben und 455 kb

jpg mit nur 24 kb!

 

 

 

 

 

 

 

Weiter zum Teil 6 von „wie erstelle ich eine Homepage“