Grafiken
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).
Grafiken einbinden
| 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:
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:
|
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">
