<img> @ PS-Trainer

Bild-Datei
Bilder sind normalerweise in eigenen Dateien enthalten, z.B. test.png Das hat im Internet einige Auswirkungen, die z.T. wenig bekannt sind: ● Bild-Verweise Bilder sind nicht in Webseiten enthalten ! Diese enthalten lediglich Verweise auf Bilder. Ein derartiger Verweis hat im HTML-Quelltext die Form <img src="test.png" /> Das img-Element kündigt ein Bild an, das src-Attribut bezeichnet den Pfad zur Bild-Datei. Diese kommt meistens vom gleichen PC, oft aus dem gleichen Verzeichnis wie die Webseite (.htm) selbst. ► Eine Bild-Datei kann auch aus dem Internet bezogen werden, z.B. <img src="http://www.provider/test.jpg" /> Textverarbeitungs-Programme verhalten sich genau umgekehrt: Alle dort verwendeten Bilder werden in die Text-Datei (.doc) mit aufgenommen.	● Web-Verzeichnis Wenn Bilder in eine Webseite eingefügt werden, dann müssen diese vorbereitet (↓ Bildgröße) und in das Web-Verzeichnis kopiert werden - Das ist jenes Verzeichnis am eigenen PC, in dem sich alle selbst erstellten Webseiten und die darin verwendeten Bilder befinden müssen. AnfängerInnen verwenden häufig Bilder aus irgendeinem Verzeichnis ihres PC. Das scheint am eigenen PC zu funktionieren. Nach dem Upload werden jedoch keine Bilder mehr angezeigt. Mögliche Ursachen: ▼ Es wurde daruf vergessen, nicht nur die Webseite *.html sondern auch die Grafik-Datei hochzuladen. ▼ Das Bild wurde zwar hochgeladen, befindet sich jedoch beim Provider in einem anders lautenden Pfad.
● Upload Beim Upload einer Webseite müssen sämtliche darin angekündigte Objekte - speziell alle Bilder - ebenfalls auf den Server des Web-Providers geladen werden. ▼ Web-AnfängerInnen laden zwar ihre neu erstellten Webseiten in das Provider-Web, vergessen jedoch oft auf die Bilder. Beim Live-Test wird dann die Webseite zwar angezeigt, jedoch ohne Bilder. ► Abhilfe: Bilder ebenfalls uploaden, und zwar an die gleiche relative Position (!) wie am eigenen PC. - Deshalb dürfen bei der Erstellung der Webseiten nur Bilder aus dem Web-Verzeichnis verwendet werden: Alle anderen Verzeichnisse gibt es nicht am Webserver, daher kann der Browser dort auch keine Bilder finden.	● Lade-Vorgang Wenn sie durch Klick auf einen Link eine Webseite (mit Bildern) anfordern, dann wird vom entfernten Webserver nur der HTML-Quelltext (die *.html Datei) an ihren Browser gesendet - zunächst keine Bilder ! ► Wenn ihr Browser bei der Verarbeitung des empfangenen Codes einen Bild-Verweis <img src="test.png" /> findet, dann sendet er eine neue Anforderung an den Webserver. Wenn die Antwort längere Zeit dauert, dann hat der Browser mittlerweile schon die Webseite aufgebaut - Sie sehen in diesem Fall einen Platzhalter ( "broken image"). Wenn das angeforderte Bild eintrifft, wird der Platzhalter gegen das Bild ausgetauscht. ► Für jedes in eine Webseite eingebettete Objekt wird (nach Empfang der Webseite) eine eigene Anforderung gesendet. Das hat u.a. den Vorteil, dass Bilder aus ganz verschiedenen Quellen angefordert werden können, z.B. von unterschiedlichen Webservern aus allen Teilen der Welt.

Wiederverwendbare Bilder
Webseiten verwenden Bilder besonders sparsam ! Jedes Bild wird vom Browser nur einmal angefordert und dann lokal gespeichert. Jeder Browser verwendet dazu Speicherplatz (Cache-Verzeichnis) auf der Festplatte ihres PC. • Wenn ein Bild öfters verwendet wird (z.B. der blaue Stern), dann wird es nur beim ersten Mal vom Server angefordert - Für jede weitere Verwendung wird es aus dem Cache-Speicher entnommen. Das geht viel schneller und spart Download-Volumen. • Das gilt nicht nur für eine Webseite. - Auch dann, wenn eine andere, später angeforderte Webseite die gleiche Grafik verwendet, entnimmt sie der Browser aus seinem Cache-Speicher. Die Größe des Cache-Speichers ist in den Optionen jedes Browsers einstellbar. Sinnvolle Werte betragen 20..100MB. Der Speicher wird nur auf ihre Anweisung gelöscht, ansonsten bleiben die geladenen Dateien je nach Einstellung einige Tage dort gespeichert.	Dieses sparsame Verhalten gilt nur für Webseiten - Übliche Textverarbeitungs-Programme speichern z.B. jedes verwendete Bild direkt in der Text-Datei (*.doc), und zwar je eine Version für jede einzelne Verwendung. Das kann zu unangenehm großen Dateien führen, wenn sie z.B. den blauen Stern 50mal verwenden... ♣ Tipp: Verwenden sie in der Textverarbeitung nach Möglichkeit keine Grafik-Icons (einige 100...1000 Byte) sondern → Symbol-Zeichen (2 Byte). Beispiele von → Unicode-Zeichen, die sich - wie andere Zeichen, Buchstaben, Ziffen - in jede Farbe und Größe setzen lassen, und die man (auch von hier) kopieren und in jeder Textverarbeitung einsetzen kann: ■ ▲ ● ♦ ► ♥
Tipp: Nutzen sie dieses Verhalten und verwenden sie wenige Bilder (z.B. kleine Icons, Bullets, etc..), diese jedoch mehrfach in vielen verschiedenen Webseiten. Das macht ihre Webseiten besonders schnell, denn der Browser muss (fast) keine Bilder anfordern, sobald sie einmal gespeichert sind.	Das wirkt sich bei größeren Dateien noch stärker aus: Ihr Logo muss natürlich auf jeder Webseite enthalten sein, dafür darf der Browser z.B. eine Datei von 50kB laden. Wenn alle weiteren Webseiten genau die gleiche Logo-Grafik verwenden, dann wird dafür keine weitere Ladezeit aufgewendet.

Pixel-Grafik: GIF, JPEG und PNG
Pixel-Bilder enthalten eigene Daten für jeden einzelnen Bildpunkt. Zur Codierung (Verpackung in eine Datei) sind verschiedene Methoden möglich. ♥ Für Webseiten geeignet sind nur die Grafik-Formate PNG, JPEG, GIF Andere Type wie BMP, TIFF, .. sind ungeeignet.	Die Unterschiede der Grafik-Formate werden mit einer 'Spektralfarben'-Grafik demonstriert (ursprünglich mit → PHP erstellt). Jedes Standard Grafik-Programm kann Bild-Dateien aller gängigen Formate öffnen und speichern.
PNG ● Das Format Portable Network Graphics ist als Offener Standard lizenzfrei verwendbar. PNG ist besonders leistungsfähig und kann GIF in allen Fällen ersetzen. ● PNG kann sowohl indizierte Farben (Farb-Tabellen wie GIF) und die Farbe 'transparent' verwenden, als auch beliebige Farben für jeden einzelnen Bildpunkt (wie JPEG). ● Die Bild-Dateien werden verlustfrei komprimiert. ● PNG speichert für jeden Bildpunkt die 3 Farb-Werte R,G,B (wie JPEG), darüber hinaus einen α-Wert für die Transparenz. Diese Option bietet derzeit nur PNG. ● PNG-Grafik kann durch Programme (Perl, → PHP, ...) vollautomatisch und nach Bedarf erzeugt werden.	● PNG-Grafik bietet 'unendlich' viele Farben und variable (!) Transparenz (α-Kanal) ♣ Tipp: Ziehen sie die PNG-Grafik mit der Maus über diese Seite ! ● PNG kann durch Korrektur-Algorithmen an verschiedene Ausgabe-Medien angepasst werden. ● PNG-Animation (APNG) ist die neueste Errungenschaft von PNG. Derzeit wird PNG-Animation nur von den technisch besten Browsern unterstützt.
JPEG Das Bildformat der Joint Photographic Experts Group ist ein Offener Standard und kann daher lizenzfrei verwendet werden. ● Die Bild-Daten werden komprimiert. Dabei sind unterschiedliche Kompromisse zwischen Dateigröße und Bildqualität wählbar. Die Kompression ist nicht umkehrbar, d.h. die Qualität des Originals kann niemals wieder genau reproduziert werden. ● JPEG-Grafik kann durch Programme (Perl, → PHP, ..) vollautomatisch und nach Bedarf erzeugt werden. ● JPEG-Dateien können Meta-Daten enthalten, das sind beschreibende Daten zusätzlich zum eigentlichen Bild. Digital-Cameras speichern z.B. Datum, Uhrzeit, Belichtung, Blende und andere Einstellungen. Leider speichern auch viele Grafik-Programme ungefragt umfangreiche Daten (z.B. ihre Seriennummer). Der Anteil von Meta-Daten kann bei Bild-Dateien wie im Internet üblich (20-100kB) 20%..75% ausmachen.	JPEG-Grafik: 'unendlich' viele Farben: Faustregel: JPEG dann verwenden, wenn ein Bild 'unendlich' viele Farben enthält (z.B. Portrait, Landschaft, etc.)
GIF Bilder im Graphics Interchange Format sind vor allem für kleine Grafik-Dateien weit verbreitet. Die Lizenz-Rechte (CompuServe) sind mittlerweile abgelaufen. ● Die Bild-Daten sind verlustfrei komprimiert, d.h. es wird Dateigröße gespart, jedoch ohne Einbuße an Bild-Qualität. ● GIF verwendet eine → Farb-Tabelle (color lookup table, CLUT) und kann maximal 256 verschiedene 'indizierte Farben' darstellen, darunter auch 'transparent'. ● GIF bietet die Möglichkeit zu einfachen Animationen in Form eines 'Daumen-Kinos'. ● GIF-Grafik kann durch Programme (z.B. Perl, → PHP) vollautomatisch und nach Bedarf erzeugt werden. Alternativ kann man Büro-Grafik (Säulen, Balken, Linien,...) oder technische Grafik mit einem → Kalkulations-Programm erzeugen und als GIF-Datei speichern.	GIF-Grafik mit 8 verschiedenen Farben: GIF-Grafik mit 16 verschiedenen Farben: Faustregel: GIF dann verwenden, wenn ein Bild abzählbar viele Farben enthält (z.B. Säulen-Grafik, Logo-Bilder, etc.)
BMP Dieses BitMap-Format sollte keinesfalls in Webseiten verwendet werden. BMP ist nicht komprimiert, wird nur auf Windows-Betriebssystemen verwendet, und ist auch dort veraltet. BMP-Dateien sind viel zu groß für den Transport im Internet, und in anderen Betriebssystemen als jenen von M$ nicht oder nur mit Konversions-Programmen verwendbar.	TIFF Das Tagged Image File Format ist speziell für die professionelle Bildverarbeitung geeignet, keinesfalls für das Internet. Die Dateien sind für das Internet viel zu groß und werden von gängigen Browsern nicht unterstützt.

Objekt-Grafik: SVG

Bei Objektgrafik werden Regeln für die Erstellung von Bildern aufgestellt.

Beispiel: Zeichne ein Rechteck mit den Maßen 20x40 px, schwarzer Rand mit 1px Breite, Fläche blau, usw, . .
● In Form der Regeln ist Objektgrafik besonders kompakt (viel kleinere Dateien als Pixel-Grafik) und kann verlustfrei manipuliert werden: vergrößern, verschieben, spiegeln, drehen, usw.
● Damit eine Objekt-Grafik sichtbar wird, muss jedoch im letzten Schritt aus den Regeln eine Pixel-Grafik erstellt werden (rendering).
● Die wichtigste Form von Objektgrafik ist SVG - Scaleable Vector Graphics.
♦ Details zu SVG

SVG-Grafik: Kreis und Schrift in einer einfachen Animation.

Objekt-Grafik kann verlustfrei skaliert (vergrößert) werden.

Moderne Browser (alle außer M$IE) beherrschen ausnahmslos SVG-Grafik. M$IE benötigt dazu ein PlugIn - Hilfsprogramm, z.B. Adobe SVG Viewer.

Bild-Größe und Position, Scrollbox
Bilder sollten nur genau in der verwendeten Größe auf Webseiten eingesetzt werden. Es ist erstaunlich, dass diese einfache Regel so oft missachtet wird. ● Bilder müssen vor ihrer Web-Verwendung mit Grafik-Software auf die gewünschte Größe gebracht werden ! Bilder aus Digital-Kameras sind viel zu groß für Webseiten. ● Leider machen es die meisten Web-Editor Programme sehr leicht, die Anzeige-Maße zu verkleinern. In diesem Fall erscheint das Bild zwar auf der Webseite in der richtigen (kleinen) Größe, die Bild-Datei bleibt jedoch unverändert groß !	Sinnvolle Verkleinerung Beispiel: Ein Portrait (JPEG) hat im Original die Größe 1536x2048 px, auf der Webseite soll es mit 155x205px erscheinen. Das Bild wird mit einem Standard Grafik-Programm vor der Web-Verwendung auf 155x205 px verkleinert. Damit wird die Dateigröße auf ca. 20kB reduziert. Das garantiert eine kurze Ladezeit. Wenn das Original-Bild von ca. 800kB verwendet wird, muss man dafür die 40-fache Ladezeit in Kauf nehmen ! Der Browser verbraucht zusätzliche Zeit für die Verkleinerung, zuletzt wird nur ca. 1% der unnötig geladenen Bild-Daten wirklich angezeigt.
Vergrößerung Auch die Vergrößerung von Pixel-Grafik schafft Probleme: Die Qualität leidet durch die vergrößerten Bildpunkte (Pixel). Rechts der HTML-Quellcode von Original und Vergrößerung.	Original: <img src="smiley.png" style="height:15px; width:15px;" /> Unangebrachte Vergrößerung: <img src="smiley.png" style="height:50px; width:50px;" /> Dieses schlechte Beispiel ist links Live ausgeführt.
Umfließen von Bildern: Damit kann man erreichen, dass ein Bild am linken oder rechten Rand fixiert wird und vom nachfolgenden Text umflossen wird.	Dafür setzen sie am besten die → CSS-Eigenschaft float ein. Mit Eigenschaft margin kann man zusätzlich den Text-Abstand fein einstellen. Die veralteten HTML-Attribute align und hspace sollten nicht mehr eingesetzt werden.
CSS-Eigenschaften float und margin (empfohlen) für Umfließen: <img src="smiley.png" style="height:15px; width:15px; float:left; margin-right:5px;" /> <img src="smiley.png" style="height:15px; width:15px; float:right; margin-left:5px;" />
Position: Mit der → CSS-Eigenschaft position lässt sich die Position von beliebigen Objekten auf einer Webseite einstellen: • Absolut, d.h. bezogen auf den Anfang der Webseite links oben. • Relativ, d.h. bezogen auf die "normale" Position in der Webseite. • Fixiert, d.h. bezogen auf das Fenster - die Webseite kann darunter vorbeigerollt werden.	<img id="posdemo" src="linux.png" alt="Pinguin" style="height:39px; width:33px; position:relative; left:0px; top:0px;" /> Zur Demonstration werden die CSS-Eigenschaften left,top des Bildes durch ein kleines Javascript-Programm geändert. ♦ Details zur Positionierung mit CSS ♦ Details zur Programmierung von Style-Eigenschaften mit Javascript.
ScrollBox: Wenn sie aus einem wichtigen Grund ein 'übergroßes' Bild verwenden müssen, dann wird dadurch meist das Layout der gesamten Webseite empfindlich gestört. ♣ Begrenzen sie große Elemente durch Einschluss in eine Box fixer Größe (hier 350x150 px) und setzen sie die CSS-Eigenschaft overflow:scroll; ♦ Details zu Scroll-Boxen mit CSS.

Bild-Quelle 'src'
Relative Adresse: ● Der Pfad zu einem Bild aus dem eigenen Web wird 'relativ' angegeben, d.h. relativ zur Position der jeweiligen Webseite. Wenn sich Webseite und Bild im gleichen Verzeichnis befinden, dann genügt der Dateiname: src="test.png" Wenn sich das Bild in einem untergeordneten Verzeichnis befindet, dann sieht das so aus: src="img/test.png" ● Gute Web-Editor Programme setzen automatisch die relative Adresse ein - Bedingung ist jedoch, dass sich das Bild im Web-Verzeichnis befindet - Das ist jenes Verzeichnis ihres PC, in dem sich alle selbst erstellten Webseiten und alle darin verwendeten Bilder befinden. ● Beim Upload von Webseiten und Bildern muss man genau die gleiche Verzeichnis-Struktur einhalten wie innerhalb des Web-Verzeichnisses: Nur in diesem Falle stimmt die Adresse auch beim Provider und das Bild wird beim Live-Internet Test angezeigt.	Datei-Namen: ● Verwenden sie für Datei-Namen von Webseiten und Bildern nur folgende Zeichen: Klein-(!)-Buchstaben a..z, Ziffern 0..9 und das underline_Zeichen ! ● Unangenehme Folgen ergeben Großbuchstaben, Sonderzeichen (Umlaute), Leerzeichen oder Interpunktionen (+-.; usw.) in Datei-Namen. Im Internet werden viele verschiedene Betriebssysteme und Programme verwendet, von denen nicht alle Sonderzeichen in Dateinamen unterstützen. ● Das gilt nicht für den Inhalt ihrer Webseiten - Dort können sie nicht nur alle Umlaute und Sonderzeichen verwenden, sondern auch Zeichen aus praktisch allen Sprachen der Welt. Beispiel: äßÜ€ αβγ ИЛЦ אבג ∑∞∫♫ ♠♣♥♦ ■▲●► usw. ♦ Details zu Unicode und HTML-Sonderzeichen.
Web-Adresse: Man kann jedes Bild einsetzen, dessen genaue Web-Adresse (URI) bekannt ist, z.B. src="http://www.provider.com/test.jpg" ● Dafür sollten sie die Genehmigung einholen - das ist rechtlich notwendig und persönlich anständig. Für den privaten Gebrauch wird diese Erlaubnis fast immer erteilt. Auf ihrer Webseite bringen sie zusätzlich einen Hinweis zur Bild-Quelle an, mit einem Hyperlink dorthin. ● Achtung: Wenn das Klauen von Bildern unerwünscht ist (z.B. Wetter-Prognosen einiger kommerzieller Wetterdienste), dann sind die Bilder meist durch wechselnde Namen und Web-Adressen geschützt. ● Ihre eigenen Bilder sollten sie nach Möglichkeit freigeben: Die zahlreichen im Internet angebotenen Scripts gegen Bilder-Klau sind durchwegs leicht zu umgehen und daher parktisch unwirksam.	Absolute Adresse Wenn man irrtümlich ein Bild aus einem Verzeichnis des eigenen PC ausserhalb des Web-Verzeichnisses in eine Webseite einsetzt, dann hat die Adresse die Form src="file://...../test..png" ● Was mit "file" beginnt, garantiert späteren Ärger: Wenn sich die Webseite nach dem Upload am Webserver des Providers befindet, dann gibt es dort kein Verzeichnis dieses Namens, und ihre Bild-Datei befindet sich sicher nicht an der angegeben Adresse. ● Abhilfe: Bild in das Web-Verzeichnis kopieren, erst dann in Webseiten einsetzen.
Änderung der Bild-Adresse: Mit Javascript-DOM Methoden lässt sich die Bild-Quelle (src) Live ändern:	♣ Klicken sie auf den Smiley, um die Bild-Quelle zu ändern.
HTML-Code zum Bild-Austausch: <div onclick="src_demo()"> <img id="smi" src="smiley.png" /> </div>	Javascript-Code zum Bild-Austausch: function src_demo() { n=document.getElementById("smi"); n.src="anderes_bild.png"; }

CSS-Filter

Diese Funktion ist wenig bekannt, aber sehr mächtig: Ohne (!) Änderung der Original-Bild-Datei übernimmt der Browser beliebige Filter-Funktionen für die Anzeige.
Im Sinne der gebotenen ↑ Sparsamkeit wird das Bild nur einmal aus dem Internet geladen - Alle weiteren gezeigten Versionen werden auf ihrem PC erstellt.

Dieses Bild wurde für alle folgenden Filter-Beispiele verwendet.

Einige Beispiele mit 'einfachen' Filtern:

CSS bietet noch eine ganze Reihe weiterer Filter mit spektakulären Effekten.
Sie werden ein interessantes Mittel zur Gestaltung, wenn erst einmal alle gängigen Browser CSS Filter unterstützen.

HTML+CSS Quelltext (vereinfacht):

Leider werden die CSS Filter derzeit nur von M$IE unterstützt.

Dynamische Herstellung von Bildern ('nach Auftrag')

Häufig muss eine Grafik 'nach Auftrag' erstellt werden, z.B. eine typische Geschäftsgrafik auf Grundlage aktueller Zahlen. Manuell werden solche Diagramme am besten mit Kalkulations-Programmen erstellt.

● Auch für Webseiten-Grafik besteht die Möglichkeit der Programmierung.
Die Programmierung mit Javascript ist in Grenzen möglich, jedoch sehr aufwändig.
Gut geeignet sind Programmiersprachen wie → Perl oder → PHP, die mit einem Webserver ideal zusammenarbeiten. Das stellt keine Einschränkung dar, denn bei der Leistung heutiger PC ist es sinnvoll, auf jedem PC einen kleinen privaten Webserver einzurichten - Dieser kann viele Aufgaben übernehmen, z.B. auch die Erstellung aktueller Grafik.

● Zur Demonstration einer Live hergestellten Grafik wird hier ein Säulen-Diagramm erstellt: Die 3 Säulen entsprechen Stunden, Minuten und Sekunden der aktuellen Zeit.
♦ Details zur Erstellung dynmischer Grafik mit PHP, und zur Einrichtung eines Standard-Webservers auf Windows-PC.

Bilder-Liste mit einem BookMarklet
→ Bookmarklets sind kleine Javascript-Programme, die sie in der Lesezeichen-Liste (Favoriten, Bookmarks) ihres Browsers unterbringen können. Der Vorteil liegt darin, dass sich diese Mini-Programme auf jede geladene Webseite anwenden lassen. Das hier vorgestellte Bookmarklet erstellt in einem eigenen Fenster eine Liste aller Bilder, die in der gerade geladenen Webseite enthalten sind. Sie können die Bilder rasch durchmustern, und bei Bedarf und Genehmigung auf den eigenen PC kopieren.	Das Bookmarklet 'Bilderliste': Bilderliste
Anwendung: (1) Klicken sie den Link 'Bilderliste': Das BookMarklet startet und liefert eine Liste aller Bilder dieser Seite auf einer (zugegeben etwas primitiven) Webseite. (2) Speichern sie den Link bei ihren Lesezeichen: Rechtsklick, danach 'zu Favoriten hinzufügen', 'Lesezeichen hinzufügen', 'Add bookmark', ... je nach Browser. (3) Manche Browser warnen vor dem Speichern solcher Links: Das ist korrekt - Da es keine Garantie gegen Manipulation im Internet gibt, ist es möglich, dass das Bookmarklet nicht funktioniert oder sogar Schaden anrichtet. Deshalb sollten sie es unbedingt (Punkt 1) vorher testen. Speichern und Anwenden wie immer auf eigenes Risiko !	(4) Das Bookmarklet sollte sich nun in der Liste ihrer Lesezeichen / Favoriten / Bookmarks befinden. (5) Sie können das Bookmarklet auf jede besuchte Webseite anwenden: Einfach bei geöffneter Seite das Bookmarklet in der Lesezeichen-Liste anklicken. (6) Manche Browser warnen vor der Anwendung von Bookmarklets: Wenn sie das kleine Programm selbst erstellt oder getestet haben, dann besteht kein Grund zu Misstrauen.
● Mehr über → Bookmarklets: ♣ Man kann den Javascript-Quelltext des Bookmarklets auch in eine Text-Datei kopieren und vor der Verwendung genau untersuchen. Setzen sie einen Zeilen-Umbruch nach jedem ; ein, das erleichtert die Lesbarkeit.	● Mit einigen Javascript-Kenntnissen können sie selbst praktische Bookmarklets erstellen. Sie haben sich als Werkzeug gut bewährt, z.B. zur Überwindung verschiedener fauler Tricks ...

Grafik-Software
Anzahl und Qualität der angebotenen Grafik-Software ist unüberschaubar. Allerdings soll es noch immer PC ohne brauchbare Grafik-Software geben.	Hier wirden einige Programme angeführt, die kostenfrei im Internet erhältlich sind, und die sich in der Praxis gut bewährt haben.
IrfanView von Irfan Skiljan ist ein ausgezeichneter kostenfreier Grafik-Viewer für Windows Systeme. Zeigt praktisch jede Grafik sauber an, beherrscht auch einfache Manipulationen, Umwandlung von Grafik-Formaten etc.. Als Zusatz sind zahlreiche PlugIns und Filter erhältlich.	GIMP das GNU Image Manipulation Program bietet erstklassige Funktionen zur Bildverarbeitung auf Profi-Niveau. Im Internet findet man zahlreiche PlugIns, Filter, Anleitungen, Diskussionsgruppen, etc. GIMP gibt es für alle gängigen Betriebssysteme. Die Suche nach 'gimp' liefert ca. 10 Mio Treffer.
Kalkulations-Programme Sind ein häufig verwendetes Werkzeug zur Herstellung von Grafik aus Zahlen. Es ist allerdings nicht immer leicht, die erzeugte Grafik als Datei (.png, .gif) zu speichern. ♣ Tipp: Grafik in OpenOffice-Calc erstellen, kopieren und in ein OpenOffice-Draw Fenster einfügen. Rechtsklicken und Aufbrechen: Die Grafik ist nun in ihre Bestandteile (Objekte) zerlegt, die sich einzeln nachbearbeiten oder ergänzen lassen. Zuletzt alle gewünschten Bestandteile markieren, Rechtsklicken und wieder zu einem einzigen Objekt Gruppieren. Danach wie rechts beschrieben in eine Grafik-Datei exportieren.	OpenOffice-Draw ist ein hervorragendes, jedoch wenig bekanntes Programm zur Herstellung und Bearbeitung von Objekt-Grafik. OpenOffice ist ein kostenfreies Paket von Office-Programmen (und einem Grafik-Programm !) für alle gängigen Betriebssysteme. • Export: Gewünschte Objekte markieren, Menü Datei \| Exportieren, im Export-Fenster die Box 'Selektion' markieren, Dateiformat wählen.

HTML	HyperText Markup Language
Eigene Datei	Bild-Dateien sind nicht in der HTML-Datei enthalten
Recycling	Wiederverwendbare Bilder
Pixel-Grafik	GIF, JPEG und PNG, jedoch nicht BMP, TIFF, . .
Objekt-Grafik	Regeln statt Bildpunkte (Pixel)
Bild-Größe	Einstellung und Änderung von Größe und Position, Scrollbox
Bild-Quelle	Austausch von Bildern auf Webseiten
CSS-Filter	Filter verändern das Aussehen von Bildern
Bilder nach Auftrag	Live-Erstellung von dynamischer Grafik
Bilder-Liste	Bookmarklet erstellt eine Bilder-Liste
Wechselrahmen	Auswechselbare Bilder in variabler Ausrichtung und Größe
Software	Tipps für gute & kostenlose Software
Farben	Farben in der Informatik, Addition, Subtraktion, ...
FavIcon	Mini-Icons in der Browser-Zeile

Bilder auf Webseiten

Das <img>-Element von HTML

Bild-Datei

● Bild-Verweise

● Web-Verzeichnis

● Upload

● Lade-Vorgang

Wiederverwendbare Bilder

Pixel-Grafik: GIF, JPEG und PNG

PNG

JPEG

GIF

Objekt-Grafik: SVG

Bild-Größe und Position, Scrollbox

Sinnvolle Verkleinerung

Vergrößerung

Umfließen von Bildern:

Position:

ScrollBox:

Bild-Quelle 'src'

Relative Adresse:

Datei-Namen:

Web-Adresse:

Absolute Adresse

Änderung der Bild-Adresse:

CSS-Filter

Dynamische Herstellung von Bildern ('nach Auftrag')

Bilder-Liste mit einem BookMarklet

Grafik-Software

IrfanView

GIMP

Kalkulations-Programme

OpenOffice-Draw