Bilder und Grafiken

Bilder sind seit jeher ein essentielles Kommunikationsmittel und ihre Bedeutung hat im Internetzeitalter noch stark zugenommen. Kaum eine Webseite kommt ohne sie aus. Bilder lassen sich klassischerweise auf zwei Arten in Webseiten einbinden, per HTML oder per CSS. Per HTML sollten Bilder eingebunden werden, die inhaltlich relevant sind, weil sie bedeutende Informationen transportieren. Dienen die Bilder vor allem der Ästhetik und Optik, sollten sie per CSS eingebunden werden.

Exkurs: Bildformate

Bilder, die im Web eingesetzt werden, sollten in einem auf möglichst allen Geräten lesbaren Format dargeboten werden. Aktuell sind die drei im Web am häufigsten verwendeten Formate JPEG, PNG und GIF. Man sollte dabei ein Format wählen, bei dem man die beste Qualität bei gleichzeitig möglichst geringer Dateigröße erhält.

JPEG

JPG-Dateien werden in mehreren Arbeitsschritten komprimiert. Hierbei liegt der Schwerpunkt darauf, den Farbumfang zu erhalten. Einige dieser Arbeitschritte sind jedoch verlustbehaftet. Daher verlieren die Bilder bei der Komprimierung an Qualität. Die Darstellung von Transparenz und Animationen sind nicht möglich. Auf Grund der Darstellung bis zu 16,7 Millionen Farben und der Art der Kompression eignet sich das JPEG-Format am besten für Fotos mit vielen Farben ohne transparente Bereiche.

PNG und GIF

Ein Vorteil des PNG-Formates ist die verlustfreie Kompression. Allerdings hat das zur Folge, dass die gespeicherten Dateien größer sind. Das PNG kann Alpha-Transparenzen darstellen. Das heißt, Bereiche des Bildes können nicht nur ganz oder garnicht transparent sein, sondern es können auch halbtransparente Bereiche dargestellt werden. Animationen sind mit PNG nicht möglich. PNG eignet sich besonders für Bilder mit transparenten Bereichen, Text und Logos

Beim GIF erfolgt die Kompression verlustfrei. Wegen dieser effizienten Komprimierung wurde das GIF bekannt, da es deutlich weniger Speicherplatz braucht. Dieses Format kann Transparenz darstellen, doch nur alles oder nichts: Halbtransparenzen sind nicht möglich. Das GIF-Format ermöglicht Animationen. Mehrere Bilder werden gespeichert und von den Browsern zeitverzögert abgespielt, wie bei einem Daumenkino. GIF eignet sich prinzipiell für Grafiken, Buttons, Logos und auch Strichzeichnungen. Doch wegen dem Siegeszug des PNG-Formates kommt es inzwischen vorwiegend für Animationen zum Einsatz

Bilder mit HTML einbinden

Bilder werden in HTML mit dem img-Tag eingefügt. Das einzige zwingende Attribut ist die Quelle(src), die angibt, wo das Bild abgespeichert ist.

Alternativer Text und Bildtitel

Das alt-Attribut sollte ebenfalls immer definiert werden. Der alternative Text ist zu sehen, wenn das Bild nicht geladen wird, beispielsweise bei Serverproblemen oder bei falscher Pfadangabe. In diesen Fällen wird anstatt des Bildes der alt-Text angezeigt. Dieser sollte daher eine kurze Beschreibung des Bildes sein.
Neben dem alt-Attribut kann noch das title-Attribut definiert werden. Fährt man mit der Maus über ein HTML-Element mit title-Attribut, erscheint eine Art tooltip mit dem title-Text.

See the Pen 06ea3dad2709e487691aefa41f1a364d by Bernd Schiller (@Bernie14153) on CodePen.

figure- und figcaption-tag

Häufig will man Bilder (aber auch Tabellen, Grafiken oder Videos) vom restlichen Fließtext absetzen oder gruppieren. Dazu eignen sich die neuen HTML5-Elemente figure und figcaption mit denen diese Elemente mit einer Beschriftung versehen werden können.

See the Pen 9868cd9fca084f81d64aac27103fee3d by Bernd Schiller (@Bernie14153) on CodePen.

Bilder mit width und height anpassen

Über die Angabe von height und/oder width lässt sich die Darstellungsgröße im Browser skalieren. Dieser "Trick" wird gerne verwendet, wenn ein Bild etwas zu groß geraten ist und kleiner skaliert werden soll. Das Skalieren findet allerdings nur im Browser statt. Dateigröße und damit auch die Ladezeit bleiben gleich. Der Vorteil zeigt sich bei älteren Browsern und langsamen Ladezeiten, weil der Browser schon beim Laden des Bildes den Text um das Bild herum einfügt und so ein stabiles Layout garantiert. Auch beim Umgang mit Retina-Displays, die über eine höhere Pixeldichte verfügen, kann diese Vorgehensweise von Vorteil sein.

See the Pen 1491a121cb49a16cc5b7e6b242dd0d74 by Bernd Schiller (@Bernie14153) on CodePen.

Bilder im Textfluss

Bilder erscheinen häufig im Textfluss, d.h. sie werden links oder rechts neben einen Text plaziert oder erscheinen links, rechts oder zentriert zwischen Absätzen. Im folgenden Beispiel sind Skalierung und Positionierung kombiniert:

See the Pen 0ee9aad3a0ba5617e114632ea0b8e3cb by Bernd Schiller (@Bernie14153) on CodePen.

Bilder mit clip beschneiden

Will man eine Grafik auf einen bestimmten Abschnitt reduzieren, kann man dies mit der CSS-Eigenschaft clip realisieren. Damit kann man Bilder als Ausschnitt anzeigen, ohne dass man sie tatsächlich skalieren oder beschneiden muss. Damit dies funktioniert, muss das entsprechende Element mit position:absolute ausgezeichnet sein. Auch wenn das Element beschnitten ist, nimmt es nach wie vor den ursprünglichen Platz ein, den es auch ohne die CSS-Eigenschaft clip verwendet hätte - nur dass eben der abgeschnittene Teil nicht angezeigt wird.

Die CSS-Eigenschaft clip kann wie folgt verwendet werden:
clip: rect(Kante oben, Kante rechts, Kante unten, Kante links);
Alle Werte werden von der linken oberen Ecke gemessen.

See the Pen 60cec2022c68c8b3a1f561546cf5952a by Bernd Schiller (@Bernie14153) on CodePen.

Hintergrundbilder mit CSS einbinden

Bilder und Grafiken, die der Gestaltung oder Verzierung dienen, werden als Hintergrundbilder mittels CSS eingebunden. Dabei kann entweder der body das Hintergrundelement aufnehmen oder jedes beliebige Boxelement. Mit Hilfe von CSS lässt sich die Position, die Wiederholung, die Größe und auch die Stapelung von Hintergrundgrafiken steuern.

Hintergrundbilder positionieren

Mit der CSS-Eigenschaft background-position kann die Hintergrundgrafik im Element positioniert werden. Als Position können top, right, bottom,left und center angegeben werden. Werden zwei Werte verwendet, wird der erste Wert für die horizontale und der zweite für die vertikale Position genommen.
Wird keine spezielle Angabe gemacht, wird die Hintergrundgrafik vertikal und horizontal so oft wiederholt, wie Platz zur Verfügung steht. Diese Kachelung kann entweder unterdrückt (background-repeat: no-repeat) oder in horizontaler Richtung (background-repeat: repeat-x) bzw. vertikaler Richtung (background-repeat: repeat-y) beschränkt werden.
Eine weitere Möglichkeit für Hintergrundgrafiken besteht darin, sie auf dem Anzeigebereich der Seite zu fixieren. Beim Scrollen bleibt die Grafik innerhalb des HTML-Elements dadurch an Ort und Stelle (background-attachment: fixed).
Neu in CSS3 ist die Möglichkeit, mit der Eigenschaft background-size die Größe des Hintergrundbildes festzulegen. Die Angaben können dabei in Pixel oder Prozent gemacht werden. Eine Angabe in Prozent ist dabei relativ zur Höhe und Breite des Elternelements. Mit background-size: 100% 100%; sorgt man Beispielsweise dafür, dass die Grafik das Elternelement immer ganz ausfüllt.

See the Pen e870fed9609eab257e93445b83f13dd3 by Bernd Schiller (@Bernie14153) on CodePen.