gif und jpg
Eine Homepage ist keine Homepage, wenn nicht irgendwo eine kleine Grafik oder ein Bild auftaucht. (Und sei es nur ein Foto des Besitzers.) ;-)
Im Zusammenhang mit Grafiken wirst du auf zwei gebräuchliche Formate stossen:
- gif
- jpg (auch: jpeg)
gifs werden normalerweise vor allem für Buttons und kleine sowie animierte Grafiken verwendet.
jpg sind grössere Bilder, oft Fotos, die auch mehr Farben haben als gifs.
Im Quellcode werden beide gleich eingesetzt.
Das wollen wir erreichen:
Folgendes gif soll eingesetzt werden: Name: gif-grafik.gif
Folgendes jpg soll eingesetzt werden: Name: jpg-grafik.jpg
Tag:
<IMG SRC="gif-grafik.gif">
<IMG SRC="jpg-grafik.jpg">
So sieht es aus:
Um sicher zu gehen, dass eine Grafik nicht verzogen wird, machen wir noch zusätzliche Angaben im <IMG>: WIDTH und HEIGHT (= Breite und Höhe).
Die Breite und Höhe eines Bildes nachsehen kann man in jedem Grafikprogramm. Sie werden normalerweise in Pixel angegeben.
Die Grössenangabe erlaubt dem Browser auch, die Seite schneller zu laden. Er weiss schon, wie viel Platz er für die Grafiken reservieren muss und kann so den Rest zuerst laden, damit die BesucherInnen schon mal was zu sehen bekommen.
Das Beispiel-gif hat eine Breite von 100 Pixel und eine Höhe von 68 Pixel.
Tag:
<IMG SRC="gif-grafik.gif" WIDTH="100" HEIGHT="68">
So sieht es aus:
Ohne oder falsche Grössenangabe:
|
Mit korrekter Grössenangabe:
|
|
|