Inhalt:
|
|
Grafikformate erkennt man wie Dateiformate (*.doc ...) an der Dateiendung z.B *.jpg, *.gif ... Das verbreiteste Grafikformat für Windows ist das BMP- Format (Bitmap). Die Bilder sind wegen ihrer Dateigröße und den langen Ladezeiten ungeeignet für das Internet.
Um die Datenmenge möglichst gering halten zu können, werden die Bilder kompremiert (gepackt). Je kleiner die Datenmenge, desto schneller kann eine Grafik im Internet übertragen werden.
Die verbreitesten Grafikformate im Internet ist das GIF- Format und das JPEG (JPG)- Format. Beide Formate können gut kompremiert werden und werden von allen gängigen Browsern (Internet Explorer, Netscape, Opera) unterstützt. Daneben gibt es noch das recht neue PNG- Format.
Das Grafikformat ist von der Firma Compuserve in den 80er Jahre für den Einsatz im Internet entwickelt worden. Das Format hat den Vorteil, dass die Kompression verlustfrei ist und keine Bildinformationen verloren gehen. Zudem können Animationen erzeugt werden. Dabei werden mehrere Bilder hintereinander gespeichert und anschließend nacheinander angezeigt. Zudem kann man im Gif- Format Bilder schichtweise aufbauen lassen (gut bei sehr großen Dateimengen). Dies kann für schöne Effekte sorgen. Eine Farbe kann auch als durchsichtig definiert werden.
Der Nachteil besteht darin, dass nur 256 Farben gespeichert werden und die Auflösung der Bilder bei 72 dpi (dots per inch = Punkte pro 2,34 cm).
Das Grafikformat ist in den 90er Jahre speziell für das Internet entwickelt worden. Mit dem Jpeg- Format können 16,7 Mio. Farben dargestellt werden. Bei der Kompression werden geringe Unterschiede im Bild, die das Auge nicht wahrnehmen würde, weggelassen. Dabei ist die Stärke der Kompression frei wählbar. Der Wert 0 bedeutet keine Kompression, der Wert 100 ist die stärkste Kompression. Ebenso lässt sich die Auflösung (dpi) einstellen. Zur Darstellung am Bildschirm genügen allerdings 96 dpi. Eine größere Auflösung bewirkt keine Verbesserung der Qualtität, sondern vergrößert nur die Datei.
Dadurch das geringe Unterschiede im Bild bei der Kompression weggelassen werden, erscheinen Jpeg- kompremierte Bilder ein wenig unscharf.
Dieses Format wurde 1995 ins Leben gerufen, um die Vorteile vom Gif- und Jpeg- Format zu vereinen. Im Png- Format sind wie im Jpeg- Format 16,7 Mio. Farben möglich und Auflösung ist ebenfalls einstellbar. Wie beim Gif- Format erfolgt die Kompression verlustfrei und man kann eine Farbe transparent machen.
| Gif- Format | Jpeg- Format | Png- Format | |||
| Farbanzahl: | bis 256 Farben | 16,7 Mio. Farben | 16,7 Mio. Farben | ||
| Auflösung: | 72 dpi | einstellbar | einstellbar | ||
| Kompression: | verlustfrei | verlustbehaftet | verlustfrei | ||
| Transparenz: | eine transparente Farbe wählbar | nein | eine transparente Farbe wählbar | ||
| Animation | animated GIF | nein | nein | ||
| Eignung: | für Grafiken | für Fotos | für Grafiken und Fotos | ||
| Browser- Unterstützung: | alle | alle | die Browser der neusten Generation | ||
| Beispiel Text, 200 % vergrößert, Ladezeit bei einem 28,8 Modem: | 3 KByte, 1 Sekunde | 21 KByte, 11 Sek. | 9 KByte, 4 Sek. | 6 KByte, 3 Sek. | 5 KByte, 2 Sek. |
| Beispiel Bild, 200 % vergrößert, Ladezeit bei einem 28,8 Modem: | 19 KByte, 10 Sek. | 20 KByte, 10 Sek. | 10 KByte, 5 Sek. | 7 KByte, 3 Sek. | 28 KByte, 14 Sek. |
Das Textbeispiel ist als BMP- Datei 119 KByte groß. Die Ladezeit beträgt 63 Sekunden.
Das Bildbeispiel ist als BMP- Datei 132 KByte groß. Die Ladezeit beträgt 70 Sekunden.
| < img src="bild.Dateiformat" > | src = Source, img = Quelle, < img src="Relativer Link.Dateiformat" > |
| border="Zahl" | < img border="Zahl" src="bild.Dateiformat" > Bildrahmen. Angabe in Pixel. |
| alt="Text" | = alternativ. Alternativer Text zum Bild. |
| height, width | < img src="bild.Dateiformat" height="Zahl" width="Zahl"> Höhe und Breite definieren. |
| background | = Hintergrundbild, < body background="bild.Dateiformat" > |
| bgproperties="fixed" | = Hintergrundbild scrollt nicht mit, nur der darüberliegende Text (nur IE) |
| align="top" | Textausrichtung der Beschriftung. Weitere Möglichkeiten: "middel", "bottom" |
| align="left" | Ausrichtung der Grafik auf der Seite. Weitere Möglichkeiten: "center", "left" |
| hspace="Breite" | Abstand zur Grafik |
| Vspace="Höhe" | Abstand zur Grafik |