Rheinwerk Computing < openbook >

 
Inhaltsverzeichnis
Vorwort
1 Prinzipien des modernen Webdesigns
2 Projektmanagement
3 Konzeption und Strategie
4 Responsive Webdesign
5 Informationsarchitektur
6 Gestaltungsgrundlagen
7 Screendesign
8 Layout und Raster
9 Farbe im Webdesign
10 Typografie
11 Bilder und Grafiken
12 Navigations- und Interaktionsdesign
13 Webdesign-Stile und -Trends
14 Animationen
15 Website-Typen
16 Tipps, Tricks und Tools
Stichwortverzeichnis

Download:
- Beispieldateien, ca. 3.64 MB

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Webdesign von Martin Hahn
Das Handbuch zur Webgestaltung
Buch: Webdesign

Webdesign
Pfeil 11 Bilder und Grafiken
Pfeil 11.1 Einführung: Die Macht der Bilder
Pfeil 11.1.1 Eigenschaften von Bildern
Pfeil 11.1.2 Konsequenzen für die Auswahl von Bildern
Pfeil 11.1.3 Bilder im Einsatz
Pfeil 11.2 Bilder im Web
Pfeil 11.2.1 Bilder als Layoutelemente
Pfeil 11.2.2 Bilder als Orientierungselemente
Pfeil 11.2.3 Bilder als Inhaltselemente
Pfeil 11.2.4 Bilder als emotionale Elemente
Pfeil 11.3 Bilderquellen
Pfeil 11.3.1 Urheberrecht
Pfeil 11.3.2 Creative-Commons-Bilder
Pfeil 11.3.3 Bilder vom Kunden
Pfeil 11.3.4 Fotos und Grafiken selbst erstellen
Pfeil 11.3.5 Fotoagenturen
Pfeil 11.3.6 Fotografen beauftragen
Pfeil 11.4 Motive & Bildstimmung 
Pfeil 11.4.1 Menschen, Mitarbeiter und das Team
Pfeil 11.4.2 Porträts
Pfeil 11.4.3 Profilbilder
Pfeil 11.4.4 Räumlichkeiten
Pfeil 11.4.5 Inszenierung von Produktfotos
Pfeil 11.4.6 Austauschbare Bilderwelten
Pfeil 11.5 Bildgestaltung
Pfeil 11.5.1 Der Bildausschnitt
Pfeil 11.5.2 »Unrechteckige« Formate und andere geometrische Formen
Pfeil 11.5.3 »Out of the Box«
Pfeil 11.5.4 Graustufen/Duplexfarben
Pfeil 11.5.5 Montagen/Collagen
Pfeil 11.5.6 Großformatige Bilder/Hintergrundbilder
Pfeil 11.6 Icons
Pfeil 11.6.1 Icons bringen Inhalte auf den Punkt
Pfeil 11.6.2 Aufmerksamkeit steuern und Struktur geben
Pfeil 11.7 Icon-Fonts
Pfeil 11.7.1 Vor- und Nachteile von Icon-Fonts
Pfeil 11.8 Illustrationen
Pfeil 11.8.1 Thematische Illustrationen
Pfeil 11.8.2 Dekorative Illustrationen
Pfeil 11.8.3 Illustrativer Text
Pfeil 11.8.4 Informative Illustrationen (Infografiken)
Pfeil 11.9 Bildbearbeitung
Pfeil 11.9.1 Die nicht destruktive Bildbearbeitung
Pfeil 11.10 Bildformate
Pfeil 11.10.1 Die Bildgröße
Pfeil 11.10.2 Die Bildkomprimierung
Pfeil 11.10.3 Die Auswahl des richtigen Bildformats
Pfeil 11.10.4 Für Web speichern
Pfeil 11.10.5 Bildgrößen optimieren
Pfeil 11.11 Bilder in HTML und CSS
Pfeil 11.11.1 Bilder in HTML
Pfeil 11.11.2 Bilder in CSS
Pfeil 11.11.3 Responsive Bilder
Pfeil 11.11.4 Retina-Displays
Pfeil 11.12 Weitere Bilder-Tools
Pfeil 11.13 Fazit
 
Zum Seitenanfang

11.10    Bildformate Zur vorigen ÜberschriftZur nächsten Überschrift

Selbst die schönsten Bilder sind nur halb so viel wert, wenn sie nicht das richtige Dateiformat haben. Hier kommt es vor allem auf die richtige Mischung aus Qualität und Dateigröße an. Denn allen Geschwindigkeitsentwicklungen zum Trotz ist die Ladezeit von Bildern immer ein wesentlicher Faktor, der bei der Webgestaltung beachtet werden muss, gerade in Zeiten boomender mobiler Geräte. Je kleiner der Speicherbedarf der Bilddatei ist, umso schneller wird diese beim Anwender geladen. Nur sehr ungern wartet dieser sekundenlang auf Bildinhalte, um im ungünstigsten Fall festzustellen, dass ihn diese gar nicht interessieren. Viele Untersuchungen haben gezeigt, dass die Ladezeit für User eines der wichtigsten Kriterien beim Besuch einer Website ist – und auch für Suchmaschinen ist die Ladezeit ein Rankingfaktor. Der benötigte Speicherplatz und die damit verbundene Ladezeit haben zur Folge, dass Bilder auf Internetauftritten sehr gezielt eingesetzt und Dateiformate bewusst ausgewählt werden sollten.

Werden Bilder aber lediglich als schmückendes Element eingesetzt, von dem keine tiefere Bedeutung ausgeht, sollte ihr Einsatz gut überlegt sein. Ein Screendesign, das aus vielen (und vielleicht noch großformatigen) Bildern aufgebaut ist, lädt entsprechend länger als ein Screendesign, das nur sehr wenige Bilder beinhaltet, die vor allem der Inhaltsvermittlung dienen.

 
Zum Seitenanfang

11.10.1    Die Bildgröße Zur vorigen ÜberschriftZur nächsten Überschrift

Die Bildgröße sollte nur so groß sein, wie sie auf der Webseite tatsächlich dargestellt werden soll. Auf eine Skalierung der Bilder per HTML sollte verzichtet werden. Eine Bildvergrößerung bedeutet immer auch Qualitätsverlust, und auch auf eine Verkleinerung sollte nach Möglichkeit verzichtet werden, denn der Browser lädt trotzdem die volle Größe herunter. Es wird also weder Speicher noch Ladezeit eingespart.

Daher sollte immer bereits im Vorfeld geschaut und geprüft werden, in welcher tatsächlichen Pixelgröße das Bild benötigt wird. Die verwendeten Bilder sollten dann entsprechend im Bildbearbeitungsprogramm zurechtgeschnitten und abgespeichert werden.

 
Zum Seitenanfang

11.10.2    Die Bildkomprimierung Zur vorigen ÜberschriftZur nächsten Überschrift

Bilddateien werden in ihrer Dateigröße oft reduziert, um weniger Speicherplatz zu benötigen. Diesen Vorgang nennt man Kompression. Die Dateiinformationen werden sozusagen »zusammengepresst«, sodass ein Bild, welches ursprünglich 1 MB (Megabyte) groß war, plötzlich nur noch 300 KB (Kilobyte) Speicherbedarf hat. In Zeiten von Terabyte-Festplatten (1 Terabyte = 1.024 GB) klingt ein Einsparpotenzial wie im oberen Beispiel von 700 KB nicht gerade notwendig, für Webseiten ist es dies aber!

Jedes KB, das der Anwender nicht laden muss, ist gut. Oder anders ausgedrückt: Je weniger Speicherbedarf die Webseite und ihre Inhalte haben, umso besser. Trotz DSL gibt es genug Anwender, die langsamere Internetverbindungen haben. Gerade auch mobile Internetverbindungen sind oft nicht sehr schnell. Und bei Webseiten, die viel Traffic haben (also viele Besucher), entlastet weniger Speicherbedarf die Server enorm.

Verlustfrei & verlustbehaftet | Um Bilder zu komprimieren, muss das Bildmaterial teilweise verändert werden. Meistens werden bestimmte Bildbereiche, die durch Algorithmen berechnet werden, zusammengefasst, sodass Speicherplatz gespart wird. Dies bedeutet aber auch fast immer einen Qualitätsverlust bzw. den Verlust von detailreichen Pixelinformationen. Bei der Komprimierung wird unterschieden zwischen einer verlustbehafteten Komprimierung und einer verlustfreien Komprimierung. Bei der verlustbehafteten werden die Bilddaten optisch verändert, während bei der verlustfreien die Speichermethode angepasst wird und sich dadurch keine optische Veränderung ergibt.

 
Zum Seitenanfang

11.10.3    Die Auswahl des richtigen Bildformats Zur vorigen ÜberschriftZur nächsten Überschrift

Die Wahl des richtigen Dateiformats hängt von unterschiedlichen Faktoren ab. Um Bilder sinnvoll auf Webseiten einzusetzen, sind nicht nur Kenntnisse der entsprechenden HTML-Einbindung wichtig, sondern natürlich auch der wählbaren Bilddateiformate. Es gibt vor allem vier Dateiformate, die für Bilder auf Webseiten interessant sind: die drei Pixelformate JPG, PNG und GIF sowie das Vektorformat SVG. Im Folgenden ein Überblick über deren Vor- und Nachteile und Einsatzgebiete.

JPG | Das JPG, manchmal auch JPEG geschrieben, steht für Joint Photographic Experts Group und wurde speziell zum Speichern von Fotografien entwickelt. Das JPG dürfte das meistverbreitete Bildformat im Web sein.

Dateigröße und -qualität im Vergleich

Das Webstandard-Blog hat die drei Bildformate samt Dateigrößen und Qualität miteinander verglichen: http://webstandard.kulando.de/post/2010/03/08/jpg-gegen-gif-und-png-finde-das-ideale-dateiformat-fuer-bilder.

Die typischen JPG-Artefakte

Abbildung 11.105    Die typischen JPG-Artefakte

Das JPG überzeugt durch seinen geringen Speicherplatzbedarf. Dazu lässt sich der Grad der Komprimierung (die sogenannte Kompressionsrate) beim JPG einstellen. Je stärker die Komprimierung ist, umso kleiner die Bilddatei, umso schlechter aber auch die Bildqualität. Umgekehrt bedeutet dies aber auch eine geringe Komprimierung und einen hohen Speicherbedarf, dafür aber eine gute Bildqualität. Bei der Komprimierung kommt es zu den sogenannten Artefakten, die je nach Kompressionsrate mehr oder weniger sichtbar sind. Zudem ist zu beachten, dass das JPG-Format keine Transparenz unterstützt. Leere (transparente) Bereiche der Datei im Bildbearbeitungsprogramm werden beim Abspeichern somit automatisch mit weißer Farbe gefüllt.

Das JPG-Format ist bestens geeignet, um fotorealistische Bilder in guter Qualität anzuzeigen, ohne dass es zu starken Qualitätseinbußen kommt. Bei Illustrationen oder Bildinhalten mit vielen einfarbigen Flächen wird die Kompression schnell sichtbar, und Transparenz kann das JPG gar nicht darstellen.

GIF | Das GIF (Graphics Interchange Format) gilt als etwas in die Jahre gekommenes Format, das aber nach wie vor seine Vorteile und seine Bedeutung hat. Das GIF-Format tut sich vor allem mit zwei Vorteilen hervor:

  1. Zum einen kann es transparente Bereiche abspeichern.

  2. Zum anderen kann das GIF-Format Animationen wiedergeben, also einzelne Bilder, die hintereinander abgespielt werden. Diese sogenannten GIF-Animationen wurden zur Zeit der Tabellenlayouts gerne eingesetzt. Sich drehende Logos und blinkende Buttons sind typische Beispiele. Auch wenn diese Art der GIF-Animationen eher zurückgegangen ist, spielen GIF-Animationen im Webdesign neuerdings wieder eine größere Rolle (siehe nebenstehenden Kasten).

Animated gif revival

Da dachte man, animated GIFs sind endgültig ausgestorben, und dann kommen sie so zurück: reddit.com/r/cinemagraphs.
Was als Spielerei mit Szenen aus Kinofilmen wieder begann, hat im Webdesign seine Nische als Demonstration von User Interfaces gefunden. Ein auf- und zuklappendes Menü lässt sich mit einem GIF-Format auf einfache und sehr plastische Weise vermitteln. Der Artikel »Gif and Tell – Demonstrate your amazing user interface ideas with a simple animated GIF« zeigt einige Tools, mit denen sich animierte GIFs gut erstellen lassen:
eng.rightscale.com/2014/08/20/gif-and-tell

Obwohl die Kompressionsrate des GIF-Formats sehr gut ist, können Bilder nur mit 8 Bit dargestellt werden. 8 Bit bedeutet, dass maximal 265 Farben abgespeichert werden können, während das JPG meist als 24-Bit-Bild abgespeichert wird und dadurch bis zu 16,7 Millionen Farben darstellen kann. Mit 8 Bit leiden Bilder mit vielen Details und fotorealistische Bilder natürlich unter dieser Einschränkung bzw. werden dadurch teilweise sogar unansehnlich. Das GIF-Format eignet sich deswegen nur für Bilder mit einem geringen Farbspektrum wie z. B. Logos, Illustrationen oder Navigationsbilder.

PNG | Das PNG-Format (Portable Networks Graphics) ist im Vergleich zu den beiden bereits vorgestellten Formaten ein noch relativ junges Bildformat, welches als Alternative zum GIF entwickelt wurde. Das PNG zeichnet sich durch einen geringen Speicherbedarf, gute Qualität und die Möglichkeit der Transparenz aus. Dazu komprimiert das PNG verlustfrei. Dadurch ist die Bildqualität entsprechend gut, allerdings kann die Dateigröße auch nicht ganz so stark reduziert werden wie beim JPG. Das PNG bietet die Möglichkeit, ein Bild nicht nur mit 24 Bit (PNG-24), sondern auch als 8-Bit-Variante (PNG-8) abzuspeichern. Bei 8 Bit sind wie beim GIF lediglich 256 Farben möglich. Dazu ist die Komprimierung des PNGs besser als die des GIFs.

Das PNG wird vor allem bei Transparenzen eingesetzt, wenn die Bildqualität entsprechend gut sein soll bzw. fotorealistische Motive vorhanden sind.

SVG | Das SVG-Format (Scalable Vector Graphics) ist das einzige Vektorformat in dieser Reihe und erst seit einer kurzen Zeit vermehrt bei Webseiten im Einsatz. Vektorgrafiken haben einige Vorteile gegenüber Pixelgrafiken: Da sie aus mathematisch exakt beschriebenen Punkten, Linien und Kurven bestehen, sind sie auflösungsunabhängig und daher beliebig skalierbar. Im Vergleich zu Pixelgrafiken, die jedes einzelne Farbpixel abspeichern müssen, werden hier nur Parameter gespeichert, sodass sie meistens einen sehr geringen Speicherbedarf haben.

Während Pixelgrafiken beim Skalieren »verpixeln« (oben), bleiben Vektorgrafiken gestochen scharf (unten).

Abbildung 11.106    Während Pixelgrafiken beim Skalieren »verpixeln« (oben), bleiben Vektorgrafiken gestochen scharf (unten).

SVG im Einsatz

Bei der Erstellung und dem Einsatz von SVG-Grafiken sind ein paar Dinge zu beachten. Im folgenden Blogartikel sind diese Aspekte schön beschrieben: blog.kulturbanause.de/2014/02/svg-grafiken-erstellen-und-einbinden.

Seit HTML5 können SVG-Grafiken auch ohne Plug-in in Webseiten eingebunden werden. Alle modernen Browser (auch ab IE9) können mit ihnen umgehen. Überall da, wo Motive mit einfachen grafischen Inhalten vorkommen, ist das SVG-Format geeignet, z. B. bei Logos, Diagrammen oder (einfachen) Illustrationen.

 
Zum Seitenanfang

11.10.4    Für Web speichern Zur vorigen ÜberschriftZur nächsten Überschrift

Die Wahl des richtigen Bildformats sollte von Fall zu Fall entschieden werden, und die Einsatzzwecke sind nicht in Stein gemeißelt. Möchte man ein Bild abspeichern, sollte in Bildbearbeitungsprogrammen die Für Web speichern-Funktion und nicht die klassische Speichern unter-Funktion genommen werden. Dieser Einstellungsdialog bietet mehr Kontrolle über beispielsweise Qualität, Transparenz und Farben an:

Der umfangreiche Für Web speichern-Einstellungsdialog

Abbildung 11.107    Der umfangreiche Für Web speichern-Einstellungsdialog

Für Web speichern

Schon etwas älter, aber immer noch okay: Eine umfangreiche Erklärung zum Für Web speichern-Dialog findet sich bei Dr. Web: http://www.drweb.de/magazin/bilder-mit-photoshop-fur-den-export-ins-web-optimal-aufbereiten/.

Mit der 4-fach-Vorschau lassen sich verschiedene Einstellmöglichkeiten miteinander vergleichen. So lassen sich Qualität und Dateigröße recht schnell optimieren. Sogar die Download-Geschwindigkeit lässt sich auswählen, um so die geschätzte Ladezeit zu berechnen.

 
Zum Seitenanfang

11.10.5    Bildgrößen optimieren Zur vorigen ÜberschriftZur nächsten Überschrift

Je kleiner die Dateigrößen, umso besser – solange die Qualität stimmt. Photoshop liefert an sich schon gute Ergebnisse, die vorhandenen Bilddateien lassen sich aber immer noch weiter optimieren, z. B. mit folgenden Tools:

  • ImageOptim: kostenfreies Programm für den Mac, das sowohl JPG, PNG und GIF komprimiert: http://imageoptim.com

  • Radical Image Optimization Tool (RIOT): das Gegenstück zu ImageOptim für Windows-Rechner. Kostenfrei downloaden, installieren, los geht’s! http://luci.criosweb.ro/riot

  • JPEGmini: speziell für JPG-Bilder, kostenfrei für Mac und Windows erhältlich: http://jpegmini.com

 


Ihre Meinung?

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Webdesign Webdesign
Jetzt Buch bestellen

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Praxisbuch Usability und UX
Praxisbuch Usability und UX


Zum Rheinwerk-Shop: Responsive Webdesign
Responsive Webdesign


Zum Rheinwerk-Shop: Website-Konzeption und Relaunch
Website-Konzeption und Relaunch


Zum Rheinwerk-Shop: UX Writing und Microcopy
UX Writing und Microcopy


Zum Rheinwerk-Shop: WordPress 5
WordPress 5


Zum Rheinwerk-Shop: Stile & Looks
Stile & Looks


Zum Rheinwerk-Shop: Digitale Illustration
Digitale Illustration


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und in die Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2020
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern