Wenn du den Kurs bis hier her durchgearbeitet hast um dir eine HTML-Seite machen zu können, wirst du bestimmt schon auf dieses Thema gewartet haben. Schließlich will man ja erst mal was sehen und zeigen können. Zum Einbauen von Bildern muss ich aber erst noch ein paar wichtige Sachen sagen, bevor ich dir zeige, wie du sie in dein HTML-Dokument bekommst.
Grundsätzlich sind normale Browser nur in der Lage Bilder zu interpretieren, wenn sie als CompuServe-Bitmap oder als JPEG-Bitmap vorliegen. Alle modernen Browser können mittlerweile auch das relativ neue Format "Portable Network Graphic" interpretieren. Die CompuServe-Bitmaps erkennt man an der Dateinamenserweiterung .gif, die JPEG-Bitmaps an der Dateinamenserweiterung .jpg und die Portable Network Graphics an der Dateinamenserweiterung .png. Daher werde ich sie im folgenden auch GIFs, JPGs und PNGs nennen. Gesprochen wird das GIF wie man es schreibt, eben "Gif". Das JPG wird "Dschäipeg" gesprochen. Der englische Buchstabe "J" und dann "peg". Das PNG wird "Ping" gesprochen. Bei allen 3 Formaten handelt es sich um Bitmaps. Ein Bit ist nicht nur ein Bier, sondern außerdem die kleinstmögliche Speichereinheit. Jedes Bit kann entweder gesetzt oder leer sein, bzw. den Wert 1 oder 0 haben. Map ist englisch und heißt Landkarte. Es handelt sich um Dateien in denen für jeden Bildpunkt (Pixel) eine Bitfolge für die Farbe gespeichert ist. Wie bei einer Landkarte, die für jeden Fleck des dargestellten Geländes entsprechende Daten enthält. Außerdem muss die Datei Angaben für die Breite, die Höhe, die Farbtiefe und einige andere Eigenschaften des Bildes enthalten.
|
Dieses Bild ist 16x16 Pixel groß. Die Darstellung entspricht der Orginalgröße. Es hat eine Farbtiefe von 16. Das sind 4 Bit pro Pixel. Die Informationen für die Farbwerte belegen also 16x16x4 Bit = 1024 Bit = 128 Byte (ein Byte entspricht 8 Bit). Das Bild ist insgesamt, mit den Angaben zu Breite, Höhe, Farbtiefe 192 Byte groß. Auf einem Datenträger belegt es dank Komprimierung 148 Byte. |
|
Dieses Bild ist 400x528 Pixel groß. Die Darstellung entspricht der Orginalgröße. Es hat eine Farbtiefe von 24 Bit. Das sind 16 777 216 Farben (Ein Bit kann 2 mögliche Werte haben. Bei 24 Bit gibt es also 224 Möglichkeiten). Die Informationen für die Farbwerte belegen also 400x528x24 Bit = 5 068 800 Bit = 633 600 Byte = 618,75 KB. Auf einem Datenträger belegt es dank Komprimierung 34 672 Byte = 33,86 KB. KB heißt Kilobyte. Da 1 Kilobyte nicht 1000 Byte entspricht, sondern 1024 Byte, kürzt man Kilo in diesem Fall mit großem "K" ab. |
Auf die PNGs werde ich hier nicht eingehen. Sie haben in einem Crashkurs für Anfänger nichts zu suchen. Sie werden recht selten verwendet und viele Grafikprogramme können sie nicht verarbeiten. Zwischen den GIFs und den JPGs gibt es wichtige Unterschiede. Bevor du ein Bildformat auswählst musst du also erst mal wissen, welches für dein Bild geeignet ist. Dazu muss dir klar sein, was es mit der Farbtiefe auf sich hat und welche Möglichkeiten es bei den beiden Formaten gibt.
| ||
| ||
| ||
|
|
Wie du an den Bildern oben sehen kannst, ist für sehr viele Bilder eine Farbtiefe von 256 Farben ausreichend. Bei feinen Farbverläufen und Schattierungen kann es aber zu unschönen Stufen kommen. Das fällt vor allem in Bereichen mit wenig Konturen und klar abgegrenzten Farbwechseln auf, wie beim Hintergrund in den beiden Bildern links. Als Faustregel kann man sagen: Für fast alle Bilder, außer Farbfotos, reichen 256 Farben (8 Bit). Bei Farbfotos ist es von Fall zu Fall unterschiedlich. Bei vielen Seiten machen die Bilder über 99% der Ladezeit aus. Daher sollte man auch dort anfangen zu sparen. Die Ladezeit einer Seite wird hautsächlich durch den Speicherbedarf der Inhalte bestimmt. Diese Seite benötigt fast 200 KB für das Foto in 24 Bit Farbtiefe und nur etwa 9 KB für den Text, die Tabellen, die Formatierungen usw.
Neben der Farbtiefe sind aber auch die speziellen Besonderheiten der beiden Bild(datei)formate wichtig.
Grundsätzlich sind alle Bilder rechteckig. Wenn sie nicht so aussehen, liegt das daran, dass Teile des
Bildes entweder die gleiche Farbe wie der Hintergrund haben, oder dass Teile des Bildes transparent sind.
Transparenz ist nur bei GIFs möglich.
Auch Animationen, wie im Beispiel rechts, sind nur bei GIFs möglich. Allerdings ist bei GIFs nur eine
Farbtiefe von maximal 8 Bit möglich. Die beiden Formate unterscheiden sich außerdem im
Kompressionsverfahren. JPGs brauchen bei Fotos meistens wesentlich weniger Speicherplatz (und damit
Ladezeit) als GIFs. Außerdem kann man bei JPGs den Kompressionsgrad wählen, so dass das Bild gerade noch
gut genug ist. Das Kompressionsverfahren von GIFs hat dagegen den Vorteil, dass es verlustfrei komprimiert.
Das heißt ein Bild kann beliebig oft komprimiert und wieder dekomprimiert werden, ohne dass
Bildinformationen verloren gehen. Die Bildqualität wird durch das Komprimieren nicht schlechter. Bei JPGs
gehen bei der Komprimierung immer Informationen verloren. Mit steigender Kompressionsrate wird das Bild
immer unschärfer. Bei GIFs, die viele Flächen mit gleicher Farbe enthalten ist die Dateigröße kleiner,
als bei GIFs mit Farbübergängen, feinen Strukturen und/oder vielen
verschiedenen Farben.
Weiter geht's im Kapitel Bilder einbinden.
Um einen Link zu setzen, der direkt auf diese Seite führt,
verwende folgende Url:
