Sie sind Hier:
Startseite
Sonstiges
HTML & CSS
Grafiken
|
HTML Grundkurs
- Grafiken |
Es gibt mittlerweile 3 Grafikformate, die
von allen Browsern unterstützt. GIF, JPEG (auch
jpg) und PNG sind die Grafikformate, die
heute im Internet verwendet werden.
Unterschiede
GIF und JPEG?
|
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 (Fotos) |
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.
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:
PNG (Portable Network Graphics
ist ein Grafikformat für Rastergrafiken.
Es wurde als freier Ersatz für
das ältere proprietäre Format
GIF entworfen und ist weniger
komplex als TIFF. Die Daten
werden verlustfrei komprimiert
abgespeichert (im Gegensatz
zum verlustbehafteten JPEG-Dateiformat).
Vorteile:
-
ist lizenzkostenfrei.
-
komprimiert verlustfrei,
und dabei meist kompakter
als vergleichbare Formate.
-
unterstützt wie das JPEG-Format
Echtfarben.
-
unterstützt „echte“ Transparenz
(Alpha-Transparenz).
-
unterstützt Farbkorrekturmechanismen,
die sicherstellen, dass
ein Bild auf verschiedenen
Systemen annähernd gleich
aussieht.
-
unterliegt einem festen
Standard und ist erweiterbar,
sodass theoretisch jedes
Programm bestimmte Mindestanforderungen
erfüllen muss. Außerdem
ermöglicht PNG sowohl Aufwärts-
als auch Abwärtskompatibilität,
was Inkompatibilitäten zwischen
verschiedenen Versionen
reduziert.
-
ermöglicht außerdem das
Abspeichern zusätzlicher
Information in der Grafikdatei,
zum Beispiel Autoren- und
Urheberhinweise.
-
ermöglicht (durch integrierte
Prüfsummen), Fehler in der
Datei frühzeitig zu erkennen.
-
ist streamable, d.
h. zur Interpretation des
Dateiinhalts ist kein wahlfreier
Zugriff wie etwa bei vielen
TIFF-Dateien notwendig.
-
verfügt über ein optionales
7-Pass-Interlacing nach
Adam M. Costello ("Adam7"),
also den allmählichen Bildaufbau
bei der Übertragung über
langsame Datenleitungen
wie etwa im Internet. Dabei
treten weniger Bildverzerrungen
auf als bei GIF. Schon bei
sehr geringer Übertragung
ist bereits eine relativ
brauchbare Darstellung möglich.
Nachteile:
-
bietet keine Möglichkeit
zur Animation wie das GIF-Format.
Hierzu wurde das MNG-Format
geschaffen, welches jedoch
bislang keine nennenswerte
Verbreitung erreicht hat.
Desweiteren gibt es mit
APNG ein Format, das Animation
ermöglicht, gleichzeitig
aber insofern zum PNG-Format
abwärtskompatibel ist, als
PNG-Dekoder das erste Bild
der Animation anzeigen.
-
wird von einigen Browsern
nur teilweise unterstützt;
einige zeigen PNG-Dateien,
insbesondere mit Alphakanalinformationen,
fehlerhaft an. Auch der
verbreitete Internet Explorer
für Windows wird voraussichtlich
erst ab der Anfang 2007
erscheinenden Version 7
den vollen Alphakanal unterstützen.
Wie bei GIF sind jedoch
auch hier Ja-Nein-Transparenzen
möglich, sodass im Vergleich
zu GIF in dieser Hinsicht
auch bisher kein echter
Nachteil entstand.
-
wird von vielen Bildbearbeitungsprogrammen
nicht optimal abgespeichert,
was oft zu erheblich größeren
Dateien als nötig führt.
-
ermöglicht nicht das einfache
Laden von Bildteilen. Wer
nur einen Ausschnitt des
Bildes laden möchte, muss
alle Bildzeilen davor mitladen.
Im Falle von PNG-Dateien,
die nicht sequentiell, sondern
interlaced gespeichert
wurden, muss sogar noch
mehr geladen werden.
-
unterstützt zwar eingebettete
Metainformationen, die aber
weder dem EXIF- noch dem
IPTC-Standard entsprechen.
-
erreicht bei bestimmten
Bildarten wie Fotos naturgemäß
nicht die Kompressionsraten
verlustbehafteter Algorithmen
wie etwa JPEG. Auch im Vergleich
zu auf bestimmte Klassen
von Bilddaten spezialisierten
Algorithmen, etwa nur für
gescannte Dokumente, kann
PNG meist nicht mithalten.
-
verwendet eine Komprimierungsmethode,
die vergleichsweise mehr
Rechenzeit als einfachere
Verfahren wie Lauflängenkodierung
benötigt.
Bilder kopieren:
Bilder, die
im Internet veröffentlicht werden, können meistens
kopiert und auf die eigene Festplatte gespeichert
werden. Hierzu klickt man mit der rechten Maustaste
auf das jeweilige Bild. Es öffnet sich ein so
genanntes Kontextmenü. Je nach Browser kann
das Bild mit "Bild speichern unter" oder "Grafik
speichern unter"
 |

Bild
oben: Das Kontextmenü des Firefox-Browsers.
Mit "Grafik speichern unter" kann das
Bild gespeichert werden.
Bild links: das Kontextmenü des
Internet-Explorers von Microsoft.
|
Klicken Sie
hier auf den Button
, um ein Beispiel zu sehen.
Bilder in Webseiten
einbinden:
Ein Bild in
ein Html-Dokument erfolgt über den Tag <img
src="Bild">. Mit "width" und "height" (so genannte
Attribute) können Breite und Höhe des Bildes
angegeben werden. Beispiel:

Die Ausgabe im Browser:

Bewegt man die Maus auf das Bild, so wird der Alternativtext angezeigt
Attribute für
Grafiken:
|
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="Text zum Bild" |
Der ALTernativtext - dieser ist
aus verschiedenen Gründen sehr wichtig:
-
für Sehbehinderte (die ihn von speziellen
Browsern vorgelesen bekommen)
-
für Suchmaschinen, da diese auch
diesen Text indizieren
-
zur Information für den Surfer
|
Animation
von Bildern:
Die Animation
von GIF-Grafiken erfolgt durch mehrere Einzelbilder.
Hier ein Beispiel:

Solche Animationen
sind natürlich aufwendiger, da Sie nicht nur
zahlreiche Bilder benötigen. Wenn man nicht
aufpasst, kann die Grafik von der Dateigröße
sehr groß werden.
Eigenes Verzeichnis
für Bilder und Grafiken:
Generell sollten
man Bilder, Grafiken und Animationen in ein
separates Verzeichnis speichern und diese, bei
Bedarf, aufrufen und in die Seite einbinden.
Dieses dient der allgemeinen Übersicht. Das
Verzeichnis heißt in der Regel bilder
oder images. Ein Beispiel: Das
Bild grafik1.gif soll in die Seite
index.htm eingebunden werden:
Bilder
index.htm
Der Befehl
zur Einbindung der Grafik in der Datei
index.htm lautet:
<body background="Bilder/grafik1.gif">
Befindet sich
das Bild grafik1.gif in einem Unterverzeichnis
des Verzeichnisses Bilder, zum Beispiel Bilder1,
lautet der Befehl:
Bilder
Bilder1
index.htm
<body background="../Bilder/grafik1.gif">
|