bilderundgrafiken

Bilder im Web

Praktisch keine Webseite kommt ohne Bilder aus. Bilder sagen mehr als viele Worte und vermitteln schnell, direkt und sind ein effektives Mittel, um Emotionen zu transportieren.
Illustrationen werden als Icons/Symbole eingesetzt, Fotos für Inhalte oder Hintergründe.

Bilder verwenden
Bilder sind urheberrechtlich geschützt. Ausnahme bilden Bildzitate, das heisst, für wissenschaftliche Arbeiten ist die Verwendung fremder Bilder erlaubt, sofern kein anderes Bild dafür in Frage kommt. Es gibt die Möglichkeit freie Bilder ohne Gegenleistung zu verwenden. Hierfür gibt es im Web einige Portale. Es empfiehlt sich jedoch auch hier den/die Urheber/in zu erwähnen. Das Urheberrecht endet zurzeit 70 Jahre nach dem Tod oder nach Veröffentlichung des Werkes.

Creative-Common
Creative-Common ist ein Lizenzierungsmodell, das sich im Internet durchgesetzt hat. Da das klassische Urheberrecht für das Massenmedium Internet zu starr ist, kann man mit diesem Modell entscheiden, was wie weitergeben werden darf. Nebst dem Bild werden Link zu Originalwerk sowie Linzenzbestimmungen mitgegeben.

>> Infos zu Lizenzen Creative Common

Checkliste Web-Bilder:
- als jpg, gif oder png abspeichern (Unterschiede siehe unten)
- Dateien webkonform benennen (keine Umlaute wie ä,ö,ü, keine Sonderzeichen wie #, keine Leerzeichen und immer mit Suffix wie .jpg => z.B. der-fuenfte-freitag.jpg)
- auf angenehme Seitenverhältnisse achten, gängig ist 9:6 (z.B. kleine Bilder 750:500px oder grössere Bilder 1200:800px)
- Bilder fürs Web speichern („JPEG hoch“ ist gut geeignet, Kompression bis „60“ möglich, dann werden die Bilder leichter)
- Bilddichte: z.Z. reicht 100 DPI bzw. PPI Pixel per Inch-Auflösung für die meisten Bildschirme aus
- je grösser und schwerer (mehr Bilddichte) die Bilder, umso mehr Speicherplatz und Ladezeit brauchen sie


Dateiformate für Bilder/Grafiken

Es gibt drei übliche Bild-/Grafikformate, welche von allen Browsern unterstützt werden - GIF, JPG und PNG. Sie unterscheiden sich in Farbtiefe, Kompression, Transparenz und Animation.

Farbtiefe
Die Farbtiefe bestimmt, wie viele Bits zum Speicher der Farbe eines Pixels verwendet werden. Je grösser die Farbtiefe, umso detailgetreuer und klarer sind die Farben der Grafik.

Kompression
GIF-/PNG-Grafiken können mittels Dateiverarbeitung verlustfrei komprimiert werden. Bei JPG-Bildern muss die anhand der Kompressionsrate eingestellt werden, jedoch ist der Qualitätsunterschied auf Bildschirmen bei mittlerer Kompressionsrate (10-20%) nicht sichtbar.

Dateiformat GIF
GIF (Graphics Interchange Format), das erste Format für Bilder im Internet wurde von der Firma CompuServe lizenzfrei entwickelt. 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.

Dateiformat JPG
Im JPEG-Format (Joint Photographic Experts Group, Vereinigte Photoexperten-Gruppe) sind bis zu 16.7 Millionen Farben speicherbar. Daher ist es auch am gebräuchlichsten für die Darstellung von Fotos 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 Rasterformat. Es können alle Farben dargestellt werden, die Komprimierung ist verlustfrei und es gibt die Möglichkeit, durchsichtige Bereiche zu erstellen. Für diese Transparenzen werden Alphakanäle genutzt. Grafiken können so z.B. auf jeden farbigen Hintergrund eingesetzt werden. Ein kleiner Nachteil ist, das sehr alte Browserversionen ein paar Probleme mit dem PNG-Format haben. Es werden z.B. die transparenten Bereiche dann nicht transparent dargestellt.


Dateigrösse

Digitale Bilder sind auf einzelnen Bildpunkten aufgebaut (Pixel). Die Anzahl Pixel eines Bildes wird absolute Auflösung genannt und wird immer in Breite mal Höhe angegeben. Fotos und Grafiken auf Webseiten benötigen selten mehr Bildhöhe, als der Monitor zulässt. Eine Bildschirmauflösung von 1024x768 Pixel ist immer noch weit verbreitet. Ein Retina-Display (13 Zoll) hat jedoch bereits eine Auflösung von 2560x1600 Pixel. Hinzu kommen noch die Randleisten des Browsers, die das Darstellungsfeld der Webseite zusätzlich einschränken.
Im Normalfall sollte man für ein Bild nicht scrollen müssen. Eine ideale Bildgrösse ergibt sich somit aus der Darstellungshöhe des sichtbaren Bereichs im Browser. Üblich für ein Bild mit Seitenverhältnis von 4:3 ist 640x480 Pixel. Für Bilder, die sich in einem Popup-Fenster öffnen bietet sich eine Bildgröße von 800x600 Pixel an. Für Monitore mit HD-Auflösung können die Bilder eine Größe von 960x640 Pixel aufweisen.

Bildauflösung
Ein Monitor kann zwischen 72 dpi und 96 dpi (dots per inch) darstellen. Bei 96 dpi sind das 96 Bildpunkte in einem Viereck von 2,54 x 2,54 cm Seitenlänge. Ausnahme bilden die neueren Retina-Displays mit 227 dpi (im Vergleich: Eine Tageszeitung verfügt über eine Auflösung von 150 dpi). Die Fotos und Grafiken benötigen somit grundsätzlich für die Bildschirmdarstellung eine wesentlich geringere Auflösung als für den Druck. Eine höhere Bildauflösung ist also nicht gleich besser, sondern teils für die Bildschirmdarstellung sinnlos. Die Dateigröße wird unnötigerweise aufgebläht und verlangt längere Ladezeiten. Allerdings haben Tablets und Smartphones (ca. 300 dpi) eine höhere Bildschirmauflösung als der Computer. Deshalb muss je nach Gewichtung auch die Auflösung angepasst werden.

>> Auflösung von weiteren Ausgabemedien


Dateibearbeitung

Bilder fürs Web werden oft verkleinert und nachgeschärft, um sie dann in der idealen Dateigrösse sowie Dateiformat zu speichern.

Folgende Schritte sind immer zu empfehlen:
-> Bild / Bildgrösse / Auflösung und Grösse anpassen
-> Datei / für Web speichern (JPG Kompressionsgrad einstellen)

Optional sind auch noch diese Bearbeitung möglich:
-> Bild / Anpassungen / Farbkorrektur etc.
-> Filter / Schärfe einstellen


HTML Bilder einfügen

Um Bilder in Webseiten einzubinden, wird in HTML das 'img src'-tag (img image/Bild, src = source/Quelle) benutzt. Es handelt sich um ein Standalone-Tag ohne Elementinhalt und ohne End-Tag. Mit Hilfe von Attributen werden nähere Einzelheiten der Grafikreferenz bestimmt. Das HTML-tag wird mit Grösse und Text (nicht Bildlegende, sondern Info zu Bild) wie folgt eingefügt:

<img src="bild.jpg" width="600" height="400" alt="Bild">

 

Referenzierung
Mit dem Attribut src wird die gewünschte Grafikdatei bestimmt. Wenn sich die Grafikdatei im gleichen Verzeichnis wie die HTML-Datei befindet, genügt die Angabe des Dateinamens der Grafik (relative Pfadangabe):

<img src="bild.jpg" width="600" height="400" alt="Bild">


Falls die Datei sich in einem anderen Ordner/Speicherort befinden, muss der ganze Pfad angegeben werden (absolute Pfadangabe):

<img src="verzeichnis/unterverzeichnis/bild.jpg">


Auch das Referenzieren von einer vollständigen URL von einem Bild, das bereits auf einer Webseite gespeichert ist, ist möglich:

<img src="http://www.webbasics.ch/files/gimgs/animation.gif">


CSS Hintergrundbilder einfügen

Um ein Bild im Hintergrund darzustellen, wird der 'background-image:url'-tag benötigt, welcher mit der Bildbezeichnung im body-Bereich der CSS-Datei platziert und dann somit für alle folgenden Webseiten gilt. Es können natürlich auch in den anderen Bereichen (z.B. table, section, article etc.) Hintergrundbilder platziert werden.

background-image:url(bild.jpg)


Standardmässig wiederholt sich das Bild vertikal und horizontal. Mit der repeat-Eigenschaft kann dies jedoch gesteuert werden:

background-repeat:
no-repeat = Bild einmal in den Hintergrund setzen
repeat-y = ein Bild sich vertikal wiederholend
repeat-x = ein Bild sich horizontal wiederholend


Das Hintergrundbild kann auch mit Positionierungsangaben platziert werden:

background-position:
right, left, top, bottom, center = Platzierung des Hintergrundbild


Ferner kann mit der CSS-Eigenschaft attachment ein Wasserzeicheneffekt erzielt werden:

background-attachment:
scroll = Bild bewegt sich beim Scrollen mit
fixed = bleibt stehen; Wasserzeicheneffekt


Die Angaben können in Kurzform aufgelistet werden, hierfür genügt der background:url-tag und allenfalls die weiteren Eigenschaften. Die Reihenfolge ist Dateiname, Wiederholung, Position und Festsetzen des Hintergrundbildes. Die Werte werden mit einem Leerzeichen getrennt. Beispiel CSS-Syntax eines sich wiederholendes Hintergrundbild über die gesamte Webseite:

body { background:url(bild.jpg); }

Beispiel CSS-Syntax eines sich vertikal in der Mitte wiederholendes Hintergrundbild:

body { background:url(bild.jpg) repeat-y center; }


CSS Bilder bearbeiten
Im HTML-tag (img src="bild.jpg") wird vermerkt, dass ein Bild kommt und wo es gespeichert ist. Um einzelne Bilder zu bearbeiten, können direkt im HTML-tag mit dem style-Attribut (Inline CSS) verschiedene Eigenschaften und Werte ergänzt werden.

Bild platzieren
Anhand eines Division-tag mit der Eigenschaft 'align=center', kann ein Bild mittig platziert werden oder auch auf der rechten Seiten (align=right):

<div align="center"><img src="bild.jpg"></div>

<div align="right"><img src="bild.jpg"></div>

 
Wenn mehrere Bilder bearbeiten werden sollen, können folgende Angaben zum Aussehen per CSS definiert werden:

- Ausrichtung (float left / float right)
- Randabstände (margin / padding)
- Randdarstellung (border)
- Deckkraft (opacity)


Über eine Klasse (mehrmalig) oder ID (einmalig) wird im CSS-Syntax die Bildplatzierung, Randdarstellung etc. definiert, der HTML-tag nimmt Bezug zu diesen Definitionen.

Ein Bild mit ID 'rechts' wird auf Webseite rechts neben dem Text platziert:

#rechts { float:right; width: 70px; margin-left: 10px; border:1px solid red; }

<img id="rechts" src="bild.jpg">


Der Text ist links und das Bild ganz rechts. Text und Bild haben einen Zwischenabstand von 10 Pixeln. Das Bild hat zudem einen roten Rahmen.

>> Weitere Infos zu CSS Bildgestaltung


CSS responsive Bilder
Mit CSS kann man die im HTML festgelegten Breiten überschreiben und die Bilder so flexibel machen. Das Bild passt sich somit immer dem Container an, in dem es sich befindet, wird aber nie grösser als seine eigentliche Originalgröße in Pixel:

img { max-width: 100%; height: auto; }


srcset-Eigenschaft für unterschiedliche Pixeldichte (ppi)
Um Bilder für hochauflösende Displays bereitstellen zu können, wird das „srcset“-Attribut angewandt. Über das Attribut können mehrere Dateiquellen für verschiedene Pixeldichten (ppi) angegeben werden. Die Pixeldichte wird per Leerzeichen getrennt hinter den Dateiverweis notiert (z. B. 2x = doppelte Pixeldichte für Retina-Displays).

Im Beispiel werden per „srcset“ zwei Dateien angegeben, welche in unterschiedlicher Grösser gespeichert wurden. Die erste Datei wird bei Displays mit einfacher Pixeldichte geladen (Wert 1x muss nicht notiert werden). Es folgt eine Datei für Displays mit doppelter Pixeldichte. Für ältere Browser sollte man immer auch das bekannte „src“-Attribut angegeben. Dort wird das „normale“ Bild referenziert.

<img src="bild.jpg" srcset="bild.jpg, bild@2x.jpg 2x" />


JS Slideshow

Mit JavaScript können dynamische Elemente auf einer Webseite platziert werden. So kann beispielsweise eine Slideshow auf einer Webseite anhand eines JavaScripts eingefügt werden.

1. Slideshow-Skript im Head einbinden
Der erste Schritt ist die Einbindung des externen Skripts in die Webseite. Dazu wird es im HEAD-Bereich der Seite verlinkt (im Beispiel liegt das Skript im selben Verzeichnis liegt wie die Webseite, andernfalls ist der Pfad entsprechend anzupassen): <script type="text/javascript" src="slideshow.js"></script>

2. DIV-Container im Body einfügen
Im zweiten Schritt wird im BODY-Bereich der Seite an der gewünschten Stelle ein DIV-Container eingefügt, der die Slideshow enthält. Wichtig dabei ist die ID, in diesem Fall "slideshow" (id="slideshow"). Sie kann frei gewählt werden, im Skript wird die ID im Parameter wieder eingesetzt. Der DIV-Container kann mit den CSS Eigenschaften beliebig positioniert und formatiert werden. Ebenso können dann die Kontrollelemente der Slideshow (Verlinkung) mit CSS gestaltet werden, sofern keine Bilder als Kontrollelemente eingesetzt werden (siehe Skript).
Idealerweise wird bereits ein erstes Bild miteingebunden, damit auch bei Browsern mit deaktiviertem JavaScript zumindest das statische Bild angezeigt wird. Bei Browsern mit aktiviertem JS wird das Bild beim Laden der Seite vom Script ersetzt.

<div id="slideshow" style="margin:25px;">

<img src="bild1.jpg" width="400" height="300">

</div>

3. externes Skript erstellen
Eine externe JavaScript-Datei 'slideshow.js' wird erstellt und die einzelnen Parameter entsprechend der gewünschten Verwendung gesetzt.


Anpassungen des Skripts (Bilder und ID):
-> am Anfang Bilder/Dateinamen evtl. Speicherort einfügen = 'var def_imges=new Array ('bilder/pc1.jpg', 'bilder/pc2.jpg', 'bilder/pc3.jpg', 'bilder/pc4.jpg', 'bilder/pc5.jpg');
-> dann DIV-ID Namen erwähnen = var def_divid="slideshow";
-> individuelle Anpassungen, wie Max-Bildergrösse, Hintergrundfarbe, Zeit, automatischer Start
-> Kontrollelemente anpassen entweder Bilder laden oder Text (z.B. back / start / stop / forward) = var def_contr=new Array ('bwd.png', 'start.png', 'stop.png', 'fwd.png');


JS Random image
Ein beliebter Gestaltungseffekt ist auf der Startseite ein zufälliges Bild aus einer Auswahl (random) einzufügen. Hierfür wird direkt im HTML-Head-Bereich ein Skript eingebunden und im Body-Bereich darauf verwiesen:

<head>

<script type="text/javascript">

// random_dateiordner_array benennen und Dateinamen in Klammer auflisten var random_bilder_array = ['pc1.jpg', 'pc2.jpg', 'pc3.jpg', 'pc4.jpg', 'pc5.jpg']; function getRandomImage(imgAr, path) { path = path || 'bilder/'; // Dateiordner einfügen var num = Math.floor( Math.random() * imgAr.length ); var img = imgAr[ num ]; var imgStr = ''; document.write(imgStr); document.close(); // falls Bildwechsel automatisch erfolgen sollte, diese Funktion noch anfügen function neuladen() { location.reload() } window.setTimeout(neuladen, 5000); // Zeit zwischen Bildwechsel definieren in Sek. }

</script>

</head>

<body>

<!--Entweder Befehl für Verlinkung auf eine weitere Seite

(z.B. von Startseite zu Unterseite) -->

<a href="http://www.webbasics.ch">

<script type="text/javascript">getRandomImage(random_bilder_array)

</script></a>

<!-- Oder Befehl, um die Bilder im Dateiordner anzuzeigen:

<script type="text/javascript">

getRandomImage(random_bilder_array, 'bilder/')

</script> -->

</body>


Favicon

Ein Favicon ist ein kleines Icon (16×16 Pixel), wie es typischerweise in der Adresszeile eines Webbrowsers links von der URL angezeigt wird. Das Favicon dient meist dazu, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen. Es erscheint auch in der Lesezeichenliste (Favoriten). Die Einführung geht auf den Computerkonzern Microsoft zurück, dessen Internet Explorer 5 im Jahr 1999 erstmals Favicons darstellte.

Folgende Formate können verwendet werden:
ICO: image/ico (Container für Bilddaten)
GIF: image/gif (animierte Icons)
JPG: image/jpg
PNG: image/png

Einbinung im HEAD-Bereich des HTML-Dokuments:

<link rel="icon" href="/favicon.ico" type="image/jpg">

Vorherige Seite: JS Nächste Seite: Farben