11.11    Bilder in HTML und CSS 

Bilder lassen sich klassischerweise auf zwei Arten in Webseiten einbinden, per HTML und per CSS. Die bekannte Trennung durch diese beiden Websprachen in Inhalte/Struktur und Design lässt sich so allgemein auch erst einmal auf Bilder übertragen. Bilder, die inhaltlich relevant sind, weil sie bedeutende Informationen transportieren, sollten per HTML eingebunden werden. Bilder, die vor allem der Ästhetik und Optik dienen, sollten per CSS eingebunden werden. Im Einzelfall kann dies natürlich überprüft werden.

Die Formel
CSS = Layout
HTML = Inhalt & Struktur
gilt auch bei Bildern!

 

11.11.1    Bilder in HTML 

Das img-Tag wird bekannt sein. Ein zwingendes und einziges Attribut ist die Quelle (src), die angibt, wo sich das Bild befindet.

<img src="images/logo.jpg">

Listing 11.4    Das img-Element in HTML

Pfad- und Dateiname sind interessante Faktoren für die Suchmaschinenoptimierung, speziell für die Bildersuche (wie z. B. Google Images). Eine eindeutige Benennung ist also sowohl für den Webdesigner, der an der Seite arbeitet, als auch für die Suchmaschinen hilfreich.

Weite & Höhe | Neben der Bildquelle sollten auch die Weite (width) und die Höhe (height) des Bildes gesetzt werden. Kennt der Browser die Ausmaße des Bildes, kann der Seitenaufbau schneller und für den Anwender angenehmer vonstattengehen. Sind die Abmessungen angegeben, hält der Browser sozusagen den entsprechenden Platz frei. Ist das Bild dann vollständig geladen, kennt der Browser schon die Werte und muss diese nicht erst ermitteln.

<img src="images/logo.jpg" width="220" height="80">

Listing 11.5    Die Weiten- und Höhenangabe eines Bildes

Auffällig wird es erst, wenn die Werte nicht gesetzt sind – und zwar negativ: Die Seite ist fast fertig geladen, man fängt gerade mit dem Lesen an, da »springen« die Inhalte noch einmal um, weil die Bilder nun geladen wurden und entsprechend Platz brauchen, der vorher nicht frei gehalten wurde. Eine schlechte User Experience ist die Folge.

Bildtitel | Neben dem alt-Attribut kann noch das title-Attribut definiert werden.

<img src="images/logo.jpg" width="220" height="80" alt="Logo Unternehmen XYZ" title="">

Listing 11.6    Bildtitel

Fährt man mit dem Cursor über ein HTML-Element mit title-Attribut, erscheint eine Art Tooltip mit dem title-Text. Das title-Attribut ist eine zusätzliche Information und keine alternative. Gerade bei den Bildern, die keine Bildunterschrift im Browser anzeigen, kann das title-Attribut sehr hilfreich sein.

Das alt- und das title-Attribut können auch durchaus identisch sein. Das eine wird angezeigt, wenn das Bild nicht zu sehen ist, das andere ergänzt das Bild.

Abbildung 11.108    Die Anzeige des Bildtitels beim Überfahren mit der Maus

Alternativer Text | Das alt-Attribut sollte auch immer definiert werden. Der alternative Text ist zu sehen, wenn das Bild nicht geladen wird. Dies kann völlig unterschiedliche Gründe haben, die der Webdesigner zum Teil gar nicht beeinflussen kann: Serverprobleme, falsche Pfadangabe, Bilder per Browser deaktiviert oder Benutzung eines Screenreaders. In diesen Fällen wird anstatt des Bildes der alt-Text angezeigt (oder vorgelesen). Dieser sollte daher eine kurze Beschreibung des Bildes sein, wie z. B. Logo Unternehmen XYZ.

<img src="images/logo.jpg" width="220" height="80" alt="Logo Unternehmen XYZ">

Listing 11.7    Alternativer Text, der das Bild beschreibt

Der alt-Text hat auch wieder eine Suchmaschinenrelevanz. Eine sinnige Benennung hilft also wieder allen.

Abbildung 11.109    Wenn das Bild nicht gefunden wird, wird der alternative Text angezeigt.

 

11.11.2    Bilder in CSS 

Bilder per CSS werden mit der Eigenschaft background oder background-image eingebunden.

#logo { 
  background: url(images/logo.jpg) center top no-repeat;
}

Listing 11.8    Bild per CSS eingebunden

Neben dem Bildpfad lässt sich noch angeben, ob das Bild (horizontal oder vertikal) gekachelt oder nur einmal dargestellt werden soll, und die Position des Bildes im entsprechenden HTML-Element.

Mehrere Hintergrundbilder | Seit CSS3 ist es möglich, mehrere Hintergrundbilder zu definieren. Diese werden dazu einfach hintereinander als kommagetrennte Liste angegeben genau wie die weiteren Informationen wie Wiederholung und Position.

background:
url(images/logo.jpg) left top no-repeat,
url(images/header.jpg) center bottom no-repeat;

Listing 11.9    Mehrere Bilder per CSS einbinden

Multiple Hintergründe finden sich noch nicht allzu häufig in Webdesigns, obwohl diese selbst der Internet Explorer seit Version 9 darstellen kann.

CSS-Sprites | Kommen auf der Webseite mehrere einzelne Bilder zum Einsatz, die per CSS eingebunden werden, lohnt es sich, sich über CSS-Sprites Gedanken zu machen. CSS-Sprites bezeichnet eine Technik, die mehrere Grafiken in einer großen zusammenfasst. Mittels background-Eigenschaft wird anschließend den HTML-Elementen dieselbe Grafik zugewiesen, der entsprechende Ausschnitt erfolgt dann über background-position. Dadurch kann die Performance einer Webseite verbessert werden, da nicht mehr viele einzelne Bilder geladen werden müssen, sondern stattdessen nur ein einziges.

Abbildung 11.110    Viele kleine Grafiken in einem großen Bild, das sind die CSS-Sprites.

Allerdings ist es erst einmal Aufwand, alle Hintergrundbilder in eine einzelne Bilddatei zu packen und dann die entsprechenden Ausschnitte (Breite, Höhe und Position) zu bestimmen. Hilfreich sind da Tools (siehe Kasten auf dieser Seite), die einem einige Arbeit abnehmen.

Ein einfacher Einsatzzweck von CSS-Sprites sind Mouseover-Bilder, z. B. bei Buttons. Um ein hover-Bild zu realisieren, wird der Button per CSS-background definiert und das Mouseover-Bild mit dem Pseudoelement :hover. Wird für den hover-Zustand ein zweites Bild definiert, dann nimmt der User selbst bei schnellen Internetverbindungen eine kurze Verzögerung, ein kurzes Flackern wahr, da das neue Bild erst geladen werden muss. Mit der Sprites-Technik dagegen ist das zweite Bild bereits Teil einer größeren Gesamtgrafik, die schon geladen wurde. Nur deren Position wird dann noch angepasst.

Die Bedeutung von CSS-Sprites nimmt mit dem größer werdenden Spektrum der unterschiedlichen Endgeräte und Auflösungen ab. Unterschiedliche Sprites würden benötigt, was den Aufwand nicht rentabel macht. Und Techniken wie die Icon-Fonts oder die Möglichkeiten von CSS3 machen viele Grafiken überflüssig.

 

11.11.3    Responsive Bilder 

Webseiten an unterschiedliche Bildschirmgrößen anzupassen ist kein Problem mehr, eigentlich ist es inzwischen fast Standard. Beim Responsive Webdesign geht es auch darum, Ressourcen zu sparen bzw. sinnvoll einzusetzen. Ein großformatiges Bild hat auf einem 15-Zoll-Retina-Display andere Anforderungen als auf einem kleinen Smartphone-Display. Mit der Konsequenz, dass Bilddaten für mobile Browser oftmals unnötig groß sind.

Abbildung 11.111    Die durchschnittliche Datenmenge von Webseiten nach Inhaltsart. Bilddaten beanspruchen dabei fast zwei Drittel des Speicherplatzes. httparchive.org/interesting.php

Bilddaten passen sich also (noch) nicht dynamisch an die unterschiedlichen Auflösungen an, sondern eine Bilddatei wird im Normalfall mit einer festen Auflösung generiert. Es gibt zwar die Möglichkeit, Bilder verkleinert darzustellen, es werden dann aber unnötige Datenmengen geladen. Das HTML-Tag img ist für responsive Bilder nicht ausgelegt, ein responsives Bildformat gibt es aber aktuell nicht.

Es gibt also (noch) keinen Standard für Responsive Images, auf den man zurückgreifen kann, um Bilder für verschiedene Endgeräte zu optimieren, aber einige unterschiedliche Vorgehensweisen.

Flexible Bilder | Die einfachste Methode, um Bilder zumindest an die Auflösungsbreite anzupassen, ist per simplen CSS-Befehl:

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

Listing 11.10    Flexible Bilder per CSS

Das Bild, auch wie hier alle Bilder, bekommt die Eigenschaft der maximalen Breite von 100 %. Dadurch werden die Bilder nicht größer, als ihre eigentliche Pixelbreite ist. Und bei kleineren Auflösungen passen sie sich der Browserbreite an und werden entsprechend proportional verkleinert. Zusammen mit Fluid Grids (siehe Kapitel 8, »Layout und Raster«) wird diese Methode häufig eingesetzt, um Bilder responsiv zu machen. Die obere Methode setzt dabei voraus, dass das Bild über die volle Breite des umgebenden Containers (Spalte) geht.

Es gibt aber auch Fälle, in denen das Bild kleiner in einer Spalte angezeigt werden soll und von Text umflossen wird. In diesem Fall wird einfach der Wert für max-width auf den gewünschten Teilbereich des umschließenden Containers gesetzt:

.textbild {
float: left;
max-width: 50%;
padding: 0 5% 3% 0;
}

Listing 11.11    Eine maximale Breite für das Bild definieren

Bei kleineren Webseiten bzw. Webseiten mit wenigen nicht allzu großen Bildern und überschaubarem Traffic ist diese Methode sicherlich völlig in Ordnung, solange es noch keine sinnige HTML- oder CSS-Lösung gibt.

Hintergrundbilder | Für responsive Hintergrundbilder kann man auf den Einsatz von Media Queries zurückgreifen. Folgende Methode erweist sich dabei als nützlich, da sie noch von fast allen mobilen Browsern unterstützt wird:

<div class="test5"></div> 

Listing 11.12    Definition eines DIV-Containers als Platzhalter für ein Bild

Und der CSS-Code:

@media all and (min-width: 601px) {
.test5 {
background-image: url("img/test5-desktop.png");
}
}
@media all and (max-width: 600px) {
.test5 {
background-image: url("img/test5-mobile.png");
}
}

Listing 11.13    CSS-Anweisung für unterschiedliche Hintergrundbilder je nach Viewport

Je nach Auflösung werden hier unterschiedliche Bilder geladen. Was natürlich auch bedeutet, dass zuvor unterschiedliche Bilder erstellt werden müssen.

Neben diesen beiden oberen im doppelten Sinne »einfachen« Lösungen gibt es noch jede Menge »kreativer« Methoden, die alle bestimmte Probleme lösen, aber keine ist die ideale Lösung für alle Fälle.

Adaptive Images | Eine beliebte Methode sind Adaptive Images, die mithilfe von PHP und JavaScript automatisch kleinere Bildformate erstellen, also Bildauflösung und Dateigröße anpassen.

Abbildung 11.112    Die unterschiedlichen Dateigrößen der reduzierten Bilder von adaptive-images.com

Um mit Adaptive Images zu arbeiten, muss eine JavaScript-Datei eingebunden und müssen die ».htacces« und eine PHP-Datei angepasst werden. Dies setzt also zumindest Grundkenntnisse in diesen Sprachen voraus, ist dann aber schnell eingerichtet.

Fazit | Die Möglichkeiten und deren Vorteile unterscheiden sich stark, und ihr Einsatz hängt vom jeweiligen Ziel ab. Eine Entscheidungshilfe findet sich bei CSS Tricks: css-tricks.com/responsive-images-css.

Auch in den kommenden Jahren wird das Thema Responsive Images ein spannendes bleiben. Denn neben der Bildauflösung und Dateigröße gibt es auch Optimierungsbedarf bei vielen Bildausschnitten.

 

11.11.4    Retina-Displays 

Apple war auch hier Vorreiter und hat die sogenannten Retina-Displays vor einigen Jahren auf den Markt gebracht – hochauflösende Bildschirme, die Bilder und Texte gestochen scharf darstellen können. Retina-Displays haben eine viel höhere Pixeldichte als gewöhnliche Monitore. Das einzelne Pixel ist nun so klein, dass das menschliche Auge es nicht mehr wahrnimmt, ähnlich dem einzelnen Druckpunkt bei hochwertigen Printpublikationen. Besonders Schriften und Vektorgrafiken (z. B. SVG, CSS-Grafiken, Icon-Fonts) profitieren durch Retina-Displays, da diese ja auflösungsunabhängig sind. Das Problem sind auch hier die Pixelbilder.

Retina-Displays können auf der gleichen Fläche die vierfache Menge von Pixeln darstellen wie gewöhnliche Monitore. Damit Pixelbilder aber nicht nur ein Viertel des Platzes auf einem Retina-Display einnehmen, werden die Bilder ähnlich groß dargestellt wie auf anderen Monitoren, nur dass dadurch eben Qualität verloren geht. Denn im Grunde werden die Bilder hochskaliert, Unschärfe ist die Folge.

Ähnlich wie bei den Responsive Images kann man hier mit Media Queries arbeiten, um für unterschiedliche Auflösungen unterschiedliche Bilder anzubieten. Dazu braucht es zwei Varianten eines Bildes, eines in normaler Auflösung und eines optimiert für Retina-Displays. Der Aufwand lohnt sich daher vor allem für inhaltlich wichtige Bilder und nicht unbedingt für jedes Bild, was aber im Einzelfall entschieden werden sollte.

SCHRITT FÜR SCHRITT

Layoutgrafiken für Retina-Displays anzeigen

Um Bilder auch in Retina-Qualität anzubieten, müssen von dem gewünschten Bild zwei Versionen erstellt werden, ein »normales« und eines in vierfacher Größe (doppelte Seitenlänge). Als Beispiel soll die Einbindung eines Logos als Hintergrundbild eines Containers dienen.

Abbildung 11.113    Das »normale« Logo und das retina-optimierte Logo in vierfacher Größe

1 Zwei Bilddateien vorbereiten

In Photoshop wird das Logo als Retina-Version angelegt, also in der Größe der doppelten Seitenlänge. Das spätere Logo ist 250 × 55 Pixel groß, also braucht es als Retina-Version 500 × 110 Pixel.
Das Bild wird dann zweimal abgespeichert, einmal in den angelegten Seitenmaßen, und einmal wird die Bildgröße beim Speichern-Dialog angepasst. Anders herum funktioniert es nicht. Das Bild in der kleineren Version anzulegen und beim Abspeichern größer zu skalieren ist zwar möglich, erzeugt aber durch das Skalieren einen Qualitätsverlust.

Abbildung 11.114    Das Logobild wird zweimal in unterschiedlichen Größen abgespeichert.

2 Logo-Container in HTML definieren

Zuerst wird ein DIV-Container in HTML angelegt, der keinen weiteren Inhalt bekommt.

<div id="logo"></div>

Listing 11.14    Definition eines DIV-Containers als Platzhalter

3 Per CSS das Logo zuweisen

Mithilfe von CSS bekommt der Container das Logo als Hintergrundbild zugewiesen. Da der Container in HTML keinen Inhalt bekommen hat, weiß er nicht, wie groß er sein soll, bzw. wäre in diesem Fall 0 Pixel hoch und breit. Daher müssen die Höhe und die Weite noch definiert werden:

#logo {
background:url(logo.png) no-repeat;
width: 250px;
height: 55px;
}

Listing 11.15    Hintergrundbild per CSS

4 Das Retina-Logo einbinden

Das retina-optimierte Logo wird unter einem eindeutigen Namen abgespeichert (z. B. »logo@2x.png«). Mithilfe von Media Queries erfolgt dann die Zuweisung:

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-devicepixel-ratio: 1.5),
only screen and (min-devicepixel-ratio: 1.5),
only screen and (min-resolution: 144dpi),
only screen and (min-resolution: 1.5dppx) {
   #logo{
      background: url(logo@2x.png) no-repeat;
      background-size: 500px 110px;
   }
}

Listing 11.16    Retina-Hintergrundbild-Definition in CSS

Die vielen Media-Queries-Abfragen berücksichtigen die unterschiedlichen Browserbedürfnisse und die unterschiedlichen Pixeldichten. Mithilfe von background-size wird das Logo auf die gewünschte Darstellungsgröße herunterskaliert. So nimmt es den gleichen Raum wie das »normale« Logo in Anspruch, hat aber eine viel größere Auflösung, ist dadurch also schärfer.

Mit entsprechendem Aufwand kann man also einzelne Layoutgrafiken für Retina-Displays optimieren. Schwieriger wird es bei Bildern im Inhaltsbereich, die per HTML eingebunden sind. Die Problematik haben wir schon bei den Responsive Images gesehen. Aktuell gibt es ohne Skripte (PHP, JavaScript etc.) oder Plug-ins keine Möglichkeit, Bilder abhängig von der Auflösung einzubinden.