Es gibt bisher 2 Grafikformate, die in Betracht kommen. Diese 2 Formate werden von allen Browsern unterstützt: GIF und JPEG.
Wenn Du im Browser ein Bild siehst, kannst Du beim Internet Explorer mit der rechten Maustaste auf das Bild klicken. Du erhältst dann ein Menü - der letzte Punkt "Eigenschaften" zeigt den Namen, die Datei-Größe und die Abmessung des Bildes. Jedes Bild kann mit der rechten Maustaste auch auf die eigene Festplatte kopiert werden (beachte unbedingt das Copyright!). In dem Menü, das Du durch die rechte Maustaste erhältst, gibt es den Punkt "speichern unter..". Jetzt kannst Du das Bild auf Deiner Festplatte speichern. Mache dies mit dem folgenden Bild "GkInf11" und speichere das Bild in dem Dateiordner (sollte images heißen), in dem Du bisher Deine Bild-Dateien gespeichert hast.
Dieses Bild integrieren wir als Beispiel auf die Startseite (index.htm).
Die Grundstruktur des HTML-TAGs dafür lautet:
<img src="images/logo_inf11.jpg" >
(img = engl. image = Bild)
<html>
<head>
</head>
<body>
<img src="images/logo_inf11.jpg">
</body>
</html>
Dabei gibt es für Bilder weitere Attribute, die aus verschiedenen Gründen sehr wichtig sind.
| Attribut | Bedeutung |
| width="X" | Die Breite X des Bildes - sollte angegeben werden, damit der Browser den Platzhalter in entsprechender Größe vorsehen kann, solange das Bild noch nicht komplett übertragen ist! |
| height="Y" | Die Höhe des Bildes - sollte angegeben werden, damit der Browser den Platzhalter in entsprechender Größe vorsehen kann, solange das Bild noch nicht komplett übertragen ist! |
| border="0" | Ob ein Rahmen gezeichnet werden soll (wenn nicht, dann 0) und wenn er gezeichnet wird, mit welcher Stärke |
| alt="ERKLÄRUNG ZUM BILD" | Der ALTernativtext - dieser ist aus verschiedenen
Gründen sehr wichtig:
|
Erstelle eine Internetseite mit Bild, fahre mit der Maustaste auf das Bild und warte kurz. Jetzt erscheint der Alternativtext als Tooltip. Der komplette Code sieht also wie folgt aus:
<html>
<head>
</head>
<body>
<img src="images/logo_inf11.jpg" width="143"
height="100" border="0" alt="Logo" >
</body>
</html>
Welches Format soll ich verwenden?
Die Unterschiede der Formate sind in folgender Tabelle dargestellt. Wenn Du Dich nicht entscheiden kannst, dann speichere das gewünschte Bild über eiN Bildbearbeitungsprogramm sowohl als GIF als auch als JPG ab und schau Dir die Dateigröße an.
| Unterschiede der Formate: | GIF | JPG |
| Anzahl der Farben: | 256 | 16,7 Mio |
| Möglichkeiten zur Animation: | Ja | Nein |
| Möglichkeiten zur Kompression: | automatisch | Kompressions-Grad einstellbar |
| Eignung: | kleine Grafiken, Buttons, animierte Grafiken | Bilder mit vielen Farben (Photos) |
Übertragungszeiten sind abhängig von der Leitungsgeschwindigkeit. Besonders bei Grafiken ist auf die Dateigröße zu achten. Werden die Dateien zu groß, was je nach Geschmack schon bei 100kb beginnt, entwickelt sich das WWW für langsame Zugänge (z. B. Modem) zum World Wide Wait.
Dateiformat GIF
Das Dateiformat GIF (Graphics Interchange Format, Graphikaustauschformat) war das erste Format im Internet und wurde von der Firma CompuServe entwickelt. Es setzte sich durch, da es, zusätzlich zu seinen Vorteilen und Möglichkeiten, erstmals lizenzfrei zu bekommen war. Die GIF-Datei hat eine Palette von 256 Farben und wird zusätzlich komprimiert. Das Format GIF hat den Vorteil, dass es sich beim Ladevorgang abgestuft aufbauen lässt (genannt interlaced), was zur Folge hat, dass dem Betrachter bei längeren Ladezeiten das Warten nicht so lange erscheint, da das Bild sich zwar unscharf, aber schon erkennbar aufbaut. Eine weitere Eigenschaft von GIF ist, dass man animierte Sequenzen darstellen kann, die aus einer Bildfolge von GIFs bestehen. So kann man in einer einzigen Bilddatei kleinere Animationen abspeichern, die dann selbstständig ablaufen (s. Bsp. Verkehrsschild). Mit GIFs kann zudem eine Farbe transparent dargestellt werden, was den Vorteil hat, dass man sie im Browser nicht sieht und man somit mit den Hintergründen spielen kann, ohne die Position der Grafik berücksichtigen zu müssen. So können Grafiken im Vordergrund harmonisch integriert werden, ohne dass der Hintergrund störend zum Tragen kommt. Als Beispiel kann als Hintergrund eine Gesteinsstruktur gewählt werden und als Vordergrundgrafik das Firmenlogo, das sich durch die transparente Farbe nahtlos einfügt.
Dateiformat JPG
Im JPEG-Format (Joint Photographic Experts Group, Vereinigte Photoexperten-Gruppe) sind bis zu 1,6 Millionen Farben speicherbar. Daher ist es auch am gebräuchlichsten für die Darstellung von Photos und anderen Halbtonbildern in Dateien im Internet. Der große Vorzug von JPEG ist, dass ein Komprimierungsgrad eingestellt werden kann. Somit kann eine Datei auf ein Minimum reduziert werden.
Dateiformat PNG
Auch sollte das PNG - Format erwähnt werden. Es ist zwar noch nicht eingeführt, da es auf Internet-Browsern noch nicht integriert ist, hat aber den großen Vorteil, dass es mit einem frei skalierbaren Bild arbeitet, das auf Vektoren basiert. Dieses Format wird wahrscheinlich in Zukunft noch eine große Rolle im Internet spielen.
Animation von Bildern
Die Animation von GIF-Grafiken erfolgt durch Einzelbilder wie bei folgendem Verkehrszeichen, das von der Bürgerinitiative für animierte Verkehrszeichen BFAZ uns zur Verfügung gestellt wurde.
Nun die Einzelbilder:
Solche Animationen sind natürlich aufwendiger, da Sie nicht nur 1 Bild benötigen, sondern zahlreiche und damit die Grafik dann von der Dateigröße sehr groß wird.
Zum erstellen solcher Animationen gibt es zahlreiche Programme. Wir arbeiten mit Fireworks.
Übertragungsdauer allgemein
Diese Angaben sind nur ein Anhaltspunkt. Die Zeiten können je nach Netz- und Serverbelastung stark variieren.
| Übertragungsgeschwindigkeit | Übertragungszeit |
| 14.4k | 62.39 Sekunden |
| 28.8k | 32.20 Sekunden |
| 56k | 17.36 Sekunden |
| ISDN (128k) | 8.79 Sekunden |
| T1 (1.44 MB) | 2.60 Sekunden |
Als Richtgrösse für gute Internetseiten gilt: nicht mehr als 60 KB für Text, Hintergrundbild, Logos und sonstige Bilder überschreiten! Ansonsten werden die Übertragungszeiten zu lang und ungeduldige Surfer sind schon weitergesurft.
Copyright von Bildern
I. d. R. unterliegen Bilder und Grafiken (auch Bereiche davon) einem Copyright - also jemand hat die Rechte an dem Werk. Daher solltest Du um rechtliche Probleme zu vermeiden, entweder nur eigene Werke verwenden oder den Copyright-Besitzer fragen, ob er einer Verwendung auf Deiner Homepage zustimmt. Am Beispiel des oben verwendeten Tyrannosaurus war das eine zum freien Download angebotene Grafik.
Tipp: Links mit Grafiken
(Dieses Beispiel setzt einen funktionierenden Internetzugang voraus)
HTML-TAG: Link
<a href="DATEINAMEN.HTM">BESCHREIBUNG</a>
HTML-TAG: Grafik
<img src="images/trex.gif" width="100" height="80" border="0" alt=""
>
Und als Kombination sieht das ganze dann wie folgt aus:
<html>
<head>
</head>
<body>
<a href="http://www.igfsek2.de" target="_blank">
<img src="http://www.igfsek2.de/abiturienten/images/trexwalk.gif" width="100"
height="80" border="0" alt="" >
</a>
</body>
</html>
Das Bild wird also umschlossen von dem Link, und somit kommt der Surfer nach Anklicken des Bildes auf die Seite, die in dem Link angegeben wurde.