Bilder @ PS-Trainer

Grafik-Typen für Internet-Seiten
Es gibt zahlreiche (ca. 100 ernst zu nehmende) verschiedene Grafik-Typen, d.h. unterschiedliche Varianten, Bild-Informationen in Dateien zu verpacken. Die meisten Typen wurden für spezielle Anwendungen entwickelt, nur wenige davon eignen sich für Webseiten.	● Gut geeignet für Webseiten sind GIF, JPEG, PNG, SVG ● Ungeeignet sind u.a. BMP, TIFF, EPS, ...
Pixel-Grafik oder Objekt-Grafik ● Die meisten Bilder enthalten Pixel-Grafik, d.h. die Farbe jedes einzelnen Bildpunkts ist in der Bild-Datei festgelegt. Beispiele: GIF, JPEG, PNG ● Typische Pixel-Bilder sind Portraits, Landschaften, alle Bilder von Digital-Cameras, ... ● Pixel-Dateien sind - verglichen mit Webseiten oder Text-Dateien - sehr umfangreich. Auf Webseiten werden daher nur komprimierte Datei-Typen verwendet.	Objekt-Grafik enthält Anweisungen, nach denen der Browser die Bilder herstellt (d.h. die Bildpunkte berechnet). Beispiel: SVG Eine typische ObjektGrafik Anweisung könnte lauten: <circle r="15" fill="blue"/> Objektgrafik wird derzeit noch selten verwendet, da sie der technisch rückständige M$IE Browser nicht anzeigen kann. Alle modernen Browser beherrschen allerdings Objektgrafik mit SVG. ♦ Details und Live-Beispiele zu SVG-Objektgrafik
Abzählbare (Index)-Farben Manche Bilder enthalten nur wenige voneinander unterschiedliche Farben: Man kann diese Farben 'abzählen' (Beispiel: weiss, rot, blau = 3 Farben). ● Typische Beispiele sind Geschäfts-Grafik (Säulen, Balken, Scheiben, ...) sowie die meisten Logos. ● Verwenden sie solche Bilder nur in den Formaten GIF oder PNG	Unendlich viele Farben (TrueColor) Manche Bilder enthalten fein abgestufte Farben, deren Anzahl zwar nicht unendlich aber nicht abzählbar groß ist. ● Typische Beispiele sind Aufnahmen von Digital-Cameras. ● Verwenden sie solche Bilder nur in den Formaten JPEG oder PNG

Bild-Größe

● Es ist technisch möglich, jedes Bild bei der Programmierung einer Webseite zu skalieren (vergrößern oder verkleinern). Davon wird dringend abgeraten !

● Wenn sie ein Bild auf der Webseite verkleinern, dann verwenden sie eine viel zu große Datei. Sie belegt unnötig viel Speicherplatz und benötigt unnötig viel Übertragungszeit. Vor allem die Übertragungszeit ist ein kritischer Faktor.
Beispiel: Ein typisches Bild einer Digital-Camera benötigt für 2048 x 1536 = 3 MegaPixel ca. 700kB Speicherplatz. Wenn sie das Bild auf einer Webseite einfügen, dann müssen sie es auf ca. 500 x 375 Pixel verkleinern. Ein mit einem Grafik-Programm auf diese Größe verkleinertes Bild belegt jedoch nur ca. 60 kB, d.h. <10% der Übertragungszeit !

Verkleinerung kostet unnötig viel Speicherplatz und Übertragungszeit:

● Wenn sie ein Bild vergrößern, dann wird die Bild-Qualität verschlechtert.
Das Beispiel zeigt, dass derartige Bilder schnell unbrauchbar werden.

♣ Lösung: Verwenden sie ein Grafik-Programm, um jedes Bild vor der Web-Verwendung auf die gewünschte Größe zu bringen ! Setzen sie jedes Bild in seiner Original-Größe in die Webseite ein - ohne Vergrößerung oder Verkleinerung !

Vergrößerung verschlechtert die Bild-Qualität:

Mit der raschen Verbreitung von Digital-Cameras werden immer mehr dieser Bilder per Mail versendet und in Webseiten eingesetzt.
Dabei werden die Bilder leider häufig in Original-Größe eingesetzt. Typische Digital-Bilder enthalten mehr Bildpunkte (Pixel) als Monitore. Daher müssen die Bilder zur Verwendung verkleinert werden - Zum Zeitpunkt der Konsumation haben sie allerdings schon viel zuviel Speicherplatz und teure Übertragungszeit verbraucht.

♣ Tipp: Sie sollten ihre Bilder immer schon vor der Verwendung mit einem Grafik-Programm auf die gewünschte Größe bringen:
♣ Die Qualität der meisten Bilder rechtfertigt meist nur das klassische Format 9x13cm: Das entspricht ca. 255x369 Pixel, d.h. ca. 1/30 der Datei-Größe und Ladezeit des Originals.

Wenn sie über kein Grafik-Programm verfügen, dann können sie u.a. das professionelle Programm GIMP (de, portable) aus dem Internet laden.

GIMP ist für alle gängigen Betriebssysteme (auch Windows) kosten- und Lizenz-frei verfügbar. Die portable Version kann auch auf einem USB-Stick installiert werden. Zu diesem Programm kann man zahlreiche PlugIn-Module (u.a. auch jene von Photoshop) verwenden.

Flexible Grafik

In speziellen Fällen werden Bilder eingesetzt, die ausdrücklich zum Skalieren erzeugt wurden. Meist handelt es sich um Bilder mit 1 Pixel Höhe und / oder Breite. Sie werden mit Hilfe der Attribute height, width auf die gewünschte Größe gebracht.
Beispiel:

Die Original-Grafik (1 Pixel Höhe) wird auf die gewünschte Höhe und auf 100% relative Breite skaliert: So wird sie auf jedem Monitor und Browser-Fenster sauber angezeigt:

Jede Zelle dieser Farb-Tabelle enthält eine 1-Pixel Grafik, die auf 10 Pixel Höhe und 100% Breite skaliert (vergrößert) wurde. Mit Rechtsklick lassen sich die 'Grafiken' für eigene Experimente speichern (die Zelle ganz rechts enthält eine transparente 1-Pixel-Grafik).

Wiederholte Muster

Manchmal soll eine Grafik einen bestimmten Bereich füllen. Verwenden sie dazu keinesfalls eine große Grafik - Das führt zu Browser-Problemen bei kleinen Fenstern.

Verwenden sie möglichst kleine, jedoch anreihbare Bilder (tiles) wie dieses Muster.

Wiederholte Tile-Grafik als Hintergrund

Die Grafik wird genau so oft wiederholt wie notwendig. Das ergibt eine saubere Anzeige ohne Browser-Probleme.

Datei-Namen und -Pfade
Sprechende Namen Verwenden sie für Grafik-Dateien sprechende Namen, z.B. montblanc.jpg und nicht berg99.jpg	● Das ist für die Promotion wichtig: Die Namen aller beteiligten Dateien werden von den Suchmaschinen danach bewertet, ob sie zum Thema ihres Webs passen. ● Unabhängig davon sind sprechende Namen bei der Programmierung der Webseiten praktisch.
Keine Sonderzeichen ! ● Verwenden sie für die Namen von Dateien und Verzeichnissen (Ordnern) nur Klein-Buchstaben, Ziffern und das _ underline-Zeichen z.B. gross_glockner.jpg ● Verwenden sie für Datei-Namen keine großen Buchstaben, Leerzeichen, Umlaute oder Sonderzeichen, z.B. nicht Großglockner Gipfel.jpg	♣ Diese Einschränkung ist sinnvoll, da alle Dateien ihres Webs mit zahlreichen Programmen verschiedener Betriebssysteme und Versionen verarbeitet werden. • Unzulässige Datei-Namen können am eigenen PC funktionieren, es ist jedoch unsicher und unwahrscheinlich, dass solche Dateien korrekt im Internet übertragen, bei ihrem Web-Provider gespeichert und von den Browsern aller BesucherInnen angezeigt werden.
Web-Verzeichnis ● Alle verwendeten Bilder müssen innerhalb ihres Web-Verzeichnisses gespeichert werden, z.B. C:\MeinWeb\portrait.jpg	Upload Bilder werden nicht innerhalb von Webseiten gespeichert, sondern in eigenen Bild-Dateien. Daher ist es notwendig, jedes verwendete Bild auf den Webserver ihres Providers hochzuladen !
Es ist ein häufiger Fehler von AnfängerInnen, Bilder aus anderen Pfaden zu verwenden, z.B. C: \ Dokumente und Einstellungen \ Ich \ Eigene Dateien \ Eigene Bilder \ nixgut.gif ● Solche Bilder lassen sich leider problemlos in eigene Webseiten einfügen und werden beim Test am eigenen PC korrekt angezeigt.	● Das Problem entsteht erst beim Upload zum Web-Provider: • Wenn sie vergessen, die Bild-Datei auf den Computer ihres Providers zu laden, dann wird das Bild im Internet nicht angezeigt, weil es dort (am Webserver) nicht existiert. • Wenn sie die Bild-Datei hochladen, dann wird das Bild trotzdem nicht angezeigt, weil es im eingetragenen Pfad nicht gefunden wird: Am Linux-PC ihres Providers gibt es weder das Volume C: noch die übrigen Verzeichnisse ihres PC.

Alternativ-Text für Internet-Grafik
Ein Web-Editor ermöglicht die Eingabe eines "Alternativ-Textes" zu jedem Bild. Diese Option ist manchmal schwer zu finden: Markieren sie ein Bild und versuchen sie mit Rechtsklick die Eigenschaften anzuzeigen. Wenn das nicht funktioniert, suchen sie nach einem Menü-Befehl Eigenschaften (Properties).	Die Anzeige von Bildern auf Webseiten funktioniert auch ohne Alternativ-Text. Dieser sollte verwendet werden, wenn die Anzeige des Bildes nicht funktioniert. Beispiel: <img src="test.gif" alt="Alt-Text">
Der Alternativ-Text hat eine Bedeutung für die Promotion ihres Webs: Suchmaschinen bewerten die alt-Texte !	Wenn sie später normgerechte Webseiten erzeugen wollen (empfehlenswert !), dann sind je nach verwendeter Version alt-Texte zwingend vorgeschrieben !

Bullets - Mini-Grafik zur Mehrfach-Verwendung
Es gibt zahlreiche Sammlungen kleiner Grafik-Objekte (ClipArt) im Internet. Man kann diese Bilder zur Markierung wichtiger Punkte und zur Auflockerung von Webseiten verwenden.
Ladezeit ! Bullets sind zwar klein, verglichen mit anderen Bildern, jedoch immerhin so groß wie einige 100 oder 1000 Buchstaben Text. • Man sollte nur eine begrenzte Anzahl von Bullets verwenden, um die Ladezeit der Webseiten kurz zu halten: • Wenn ein Browser in einer Webseite Bilder findet, dann muss er jede einzelne Grafik-Datei vom Webserver anfordern !	Cache-Speicher: • Wenn man Bullets mehrfach verwendet, dann genügt ein einziger Download vom Webserver: Jeder Browser speichert geladene Bilder in einem eigens dafür reservierten Speicher, dem Cache (in den Vorgaben / Extras einstellbar). • Bei jeder weiteren Verwendung wird die Grafik nicht mehr vom Webserver angefordert, sondern viel rascher aus dem Cache geladen. • Das funktioniert sowohl bei mehrfacher Verwendung auf der gleichen Webseite, als auch verteilt auf mehrere Webseiten.
User Interface Wenn sie an bestimmten Punkten ihrer Webseiten immer die gleichen Bullets einsetzen, dann verbessert das die Lesbarkeit und Übersicht für BesucherInnen. Als angenehmer Neben-Effekt werden diese Bullets immer aus dem Cache (und daher blitzschnell) geladen.	Unicode-Zeichen Die meisten in diesem Web verwendeten Bullets sind keine Bilder sondern einzelne Zeichen des Unicode-Zeichensatzes: ◄ ▲ ▼ ► ■ ♥ ● ● ● ♣ Tipp: Diese Bullet-Zeichen lassen sich (im gegensatz zu Bildern) in jede Farbe setzen sowie kopieren und in die meisten Dokumente einsetzen - wie jeder andere Text. ♦ Details zum Unicode

JPEG-Ballast: EXIF und IPTC Meta-Daten
EXIF und IPTC ● Digital-Cameras speichern nicht nur das eigentliche Bild sondern eine Menge zusätzlicher Meta-Daten, z.B. Belichtungszeit, Blende, Camera-Modell, Datum, Uhrzeit, usw. Das ist zur Archivierung und zur Verarbeitung durchaus sinnvoll.	● Programme zur Bildbearbeitung speichern zusätzlich (ungefragt) eine Menge weiterer Daten. ● Manchmal werden zusätzlich Thumbnail-Bilder gespeichert, das sind verkleinerte Kopien der Original-Bilder.
● Die zusätzlich zum Bild gespeicherten Meta-Daten können einen Umfang von 10..30kB erreichen. ● Bei Original-Bildern von ca. 1MB Größe ist der Anteil der zusätzlich gespeicherten Daten vernachlässigbar. ● Je mehr ein Bild verkleinert wird, umso größer wird der relative Anteil der Meta-Daten. ● Das gilt nur für JPEG-Bilder.	● Wenn man JPEG Bilder auf Webseiten verwendet, dann sollten die Meta-Daten daraus entfernt werden: Sie sind in Webseiten sinnlos und verbrauchen unnötig Speicherplatz und Ladezeit. In kleinen JPEG-Bildern nimmt der Ballast mehr Platz ein als das Bild !
♣ Tipp: Zumindest im Internet werden keine Thumbnails und Meta-Daten benötigt. Wenn sie den für Webseiten sinnlosen Ballast entfernen, dann wird die Größe der Bild-Dateien typisch um 30..60% verringert. Im gleichen Ausmaß verringert sich die Ladezeit ihrer Webseiten !	♣ Im Internet werden zahlreiche Programme angeboten, mit denen sich die Meta-Daten (z.B. EXIF oder IPTC) ändern oder entfernen lassen. • Die besten Ergebnisse liefert jhead das allerdings nur als Konsolen-Programm anwendbar ist. • Es werden jedoch auch viele für AnfängerInnen brauchbare Programme angeboten (Stichwort exif, kombiniert mit edit, remove, ...).
JPEG oder PNG Bilder von Digital-Cameras zeigen stets 'unendlich' viele Farben. Unabhängig vom Typ der Original-Bilder sollten sie nur im Format JPEG oder PNG in Webseiten eingesetzt werden. PNG ist leistungsfähiger und bietet u.a. variable Transparenz.	Kompression Beide Grafik-Typen verwenden irreversible Kompression: Das Ausmaß der Kompression lässt sich zwischen hoher Verdichtung bei geringer Qualität und geringer Verdichtung bei hoher Qualität einstellen.

Geschäfts-Grafik
Diese Art von Grafik wird typisch von Kalkulations-Programmen erzeugt: Säulen, Balken, Scheiben, Linien- u.a. Diagramme. Objekt-Grafik Diese Grafik ist (zumindest bei der Erzeugung) Objekt-Grafik: Sie wird nicht durch einzelne Bild-Punkte sondern durch Anweisungen definiert, ähnlich wie "erzeuge ein Rechteck der Länge... und Breite... und fülle die Fläche in der Farbe...usw. Die ideale Speicherform für Objekt-Grafik wäre SVG: Sie würde in sehr kleine Dateien gespeichert und viel rascher übertragen werden als Pixel-Grafik. OpenOffice kann zwar SVG-Grafik erzeugen, das Verfahren ist jedoch umständlich und die erzeugten Dateien zu groß. M$Office bietet keine Ünterstützung für SVG...	Pixel-Grafik Alle gängigen Kalkulations-Programme können die erzeugte Grafik als Pixel-Datei speichern - immer als GIF, manchmal auch moderner als PNG. Das benötigt zwar um Größenordnungen mehr Speicherplatz als SVG, ist jedoch vorläufig der beste Kompromiss. ♣ Tipp: Weder GIF noch PNG Dateien enthalten Meta-Daten als unnötigen Ballast.
OpenOffice ● Kombination von OpenOfficeCalc und einem Grafik-Programm, z.B. IrfanView: • Erzeugen sie eine Grafik (Säulen, Balken, ...) aus den gewünschten Zahlen. • Grafik markieren, kopieren • Wechseln zu IrfanView • Menü Bearbeiten \| Einfügen • Menü Datei \| Speichern unter \| GIF oder PNG ● Kombination von OpenOffice Calc und OpenOfficeDraw • Menü Datei \| Neu \| Zeichnung - Die zunächst leere Zeichnung dient später zur Grafik-Bearbeitung. • Wechseln zu OpenOfficeCalc • Grafik erzeugen • Grafik markieren, kopieren • Wechseln zu OpenOfficeDraw (Zeichnung) • Grafik einfügen • Grafik markieren • Menü Datei \| Exportieren bietet zahlreiche Optionen, z.B. Export als GIF, PDF, PNG, SVG SVG Objektgrafik wird von OpenOffice funktionsfähig, jedoch viel zu umständlich hergestellt. Man verwendet vorläufig besser Pixel-Grafik (GIF, PNG). Diese Kombination ermöglicht auch eine Nach-Bearbeitung der erzeugten Grafik: • Das Grafik-Objekt in der Zeichnung markieren • Menü Ändern Aufbrechen: Nun ist die Objekt-Grafik in ihre Bestandteile zerlegt, die man einzeln bearbeiten kann. Alle Teile lassen sich ändern oder löschen, neue hinzufügen. • Nach Bearbeitung: Alle Objekte markieren, Menü Ändern \| Gruppieren erzeugt wieder ein einziges komplexes Objekt, das sich exportieren lässt.	M$ Excel ● Kombination von Excel und einem Grafik-Programm, z.B. IrfanView: • Erzeugen sie eine Grafik (Säulen, Balken, ...) aus den gewünschten Zahlen. • Grafik markieren • Shift-(Großbuchstaben)-Taste drücken, Menü Bearbeiten \| Bild kopieren. • Optionen: Darstellung wie angezeigt, Größe wie angezeigt, Format=Bitmap • Wechseln zu IrfanView • Menü Bearbeiten \| Einfügen • Menü Datei \| Speichern unter \| GIF oder PNG ● Programmierung mit Visual Basic (VBA): • VBA (in jeder gängigen Excel-Version enthalten) verfügt über Optionen zum Speichern jeder Excel-Grafik als GIF-Grafik. • Es ist daher unverständlich, warum es in Excel keinen Befehl gibt, um eine markierte Grafik als GIF zu speichern. Man kann selbst VBA-Funktionen dazu erstellen oder aus dem Internet beziehen.
	Professionelle Varianten: ● Mit modernen Programmiersprachen wie Perl, PHP, Python lassen sich Grafik-Dateien aller Typen vollautomatisch aus den betreffenden Zahlen erzeugen. ● Die effizienteste Methode ist es, die Zahlen in Form von XML-Daten zu speichern. In dieser kompakten Form werden die Daten sehr schnell übertragen. Die Herstellung der Grafik wird an den Browser delegiert. Dieser kann mit Hilfe von XSL-Anweisungen beliebige Objekte (z.B. Tabelle und/oder Grafik) selbst erzeugen. ♦ Live-Beispiel: XML+XSL → SVG

Grafik als Hyperlink

Fast jedes Objekt einer Webseite lässt sich als Hyperlink einsetzen, insbesondere auch jede Grafik.
Beispiel: In diesem Web werden die verkleinerten Logos vieler Organisationen und Unternehmen mit Links zum jeweiligen Web versehen.

Beispiele für Bilder mit Hyperlinks zum jeweiligen Web:


Firefox	GIMP	IrfanView	OpenOffice

Grafik als Link

Setzen sie das Bild in die Webseite ein.
Markieren sie das Bild.
Rechtsklicken sie das Bild und versuchen sie, in dessen Eigenschaften einen Hyperlink anzugeben:
Eigene Webseiten als Ziele lassen sich meistens anklicken oder mit der Maus ziehen, z.B. meine_seite.htm
Entfernte Webseiten müssen mit ihrer vollen Adresse angegeben werden , z.B. http://www.google.de

Wenn das mit ihrem Web-Editor nicht funktioniert, sowie zur Kontrolle bereits hergestellter Links wechseln sie zur Quelltext-Ansicht:
Das Objekt (hier ein <img> Grafik-Objekt) wird zwischen Anfang und Ende eines <a></a> Elements eingeschlossen. Die Link-Adresse wird als href-Attribut angegeben, z.B.:

</a>

Animation
Animationen können - richtig eingesetzt - sehr zur Belebung und/oder besseren Erklärung von Webseiten beitragen. Leider ist das nur selten der Fall: Meist müssen sich die BesucherInnen von Webseiten mit zu großen, zu langen und oft unpassenden Animationen herumschlagen. ♣ EntwicklerInnen und BetreiberInnen sind meist die einzigen, die sich über längere Animationen auf Webseiten freuen.	Ladezeit: Animationen benötigen 10..100mal mehr Ladezeit als gleich große statische Grafik. Das muss durch Qualität und Aussagekraft gerechtfertigt werden. ♣ Verwenden sie größere Animationen nur auf ausdrückliche Anforderung. Ein Zähler zeigt ihnen ehrlich, wie oft die Animation freiwillig geladen wird.
Abbruch: Wirklich unangenehm sind zwangsweise Animationen, die man leider oft auf den Startseiten schlechter Webs findet. Man muss die gesamte Animation abwarten, bis man zu den eigentlichen Inhalten kommt. Das lassen sich nur wenige Web-BesucherInnen gefallen.	♣ Tipp: Animation soll den Inhalt ergänzen, nicht ersetzen. Fügen sie zumindest einen Button oder Link ein, mit dem man die Animation abbrechen und sofort zum Inhalt gelangen kann.
Technik: Es gibt viele Möglichkeiten, Animationen in Webseiten einzufügen. GIF-Animation funktioniert wie ein Daumenkino: GIF-Dateien werden genauso wie statische Bilder in eine Webseite eingefügt. Unzählige GIFs sind kostenlos als ClipArt verfügbar. GIF-Animationen lassen sich auch mit Programmen erzeugen. Beispiel: Animation einer berechneten GIF-Animation (4-Takt Motor, 400kB).	• Flash-Animation bietet viele Möglichkeiten zur Gestaltung. Benötigt ein Player-Plugin und wird leider meist als Selbstzweck eingesetzt. • Echte Video-Animation erfordert zur Herstellung einigen Aufwand und Fachkenntnisse: AVI, QuickTime, MPEG, ... • Java-Applets sind kleine in Webseiten eingebettete Java-Programme. Sie eignen sich vorzüglich zur Darstellung komplexer berechneter Animationen.

Web-Start	In 6 Schritten zum eigenen Internet-Auftritt
Grafik-Typ	Für das Internet geeignete Grafik-Typen
Bild-Größe	Vor Verwendung anpassen, dann niemals ändern
Datei-Namen	und Pfade von Bild-Dateien
Alternativ-Text	wenn die Bild-Anzeige nicht klappt
Bullets	Mini--Bilder zur Mehrfach-Verwendung
Ballast	EXIF-Daten in JPEG-Bildern
Geschäfts-Grafik	z.B. aus Kalkulations-Programmen
Bilder-Links	Bilder als Hyperlinks
Animation	Alles bewegt sich...

Grafik & Bilder

<image> auf eigenen Webseiten

Grafik-Typen für Internet-Seiten

Bild-Größe

Datei-Namen und -Pfade

Alternativ-Text für Internet-Grafik

Bullets - Mini-Grafik zur Mehrfach-Verwendung

JPEG-Ballast: EXIF und IPTC Meta-Daten

Geschäfts-Grafik

Grafik als Hyperlink

Animation