HomeKontaktImpressum
Sie sind hier: Home

Qualität und Detailgenauigkeit von Fotos auf Websites

Aufgrund der Unterschiede bei der physikalischen Auflösung von Ausgabegeräten ist es zuweilen angebracht, Rastergraphiken für bestimmte Zwecke vorzugeben. So kann beispielsweise für den Ausdruck ein anderes Raster vorgegeben werden als für die Ausgabe auf dem Bildschirm.

Im Hinblick auf die Detailgenauigkeit als Maß für die Qualität einer Graphik, sollte die Auflösung eines Bildes normalerweise so hoch wie möglich gewählt werden. Auf diese Weise leidet die Ausgabe auf (physikalisch) besonders hochauflösenden Wiedergabegeräten nicht unter unzureichenden Detailinformationen. Schließlich können feine Details in einem Foto auf hochauflösenden Ausgabegeräten nur dann auch dargestellt werden, wenn diese Informationen auch in der Rastergraphik enthalten sind.

Allerdings sollte die Auflösung bei einer Veröffentlichung von Bildmaterial im Internet aufgrund der gegebenen Anwendungsbedingungen – begrenzte Geschwindigkeit der Internetverbindung und Vermeidung unnötiger bzw. für den Benutzer ärgerlicher Wartezeiten – nicht beliebig hoch gewählt werden. Internetseiten werden normalerweise durch zwei verschiedene Arten von Ausgabemedien dargestellt: Nämlich auf Monitoren und Druckern.

Drucker benötigen, soll eine ordentliche Qualität beim Ausdruck gewährleistet sein, Bilder in einer Auflösung von etwa 300 dpi. Eine Rastergraphik kann also, je auf der Ausgabefläche gedrucktem Zoll, 300 einzelne Punkte unterbringen. Soll der Ausdruck möglichst viele Details wiedergeben, so müssen eben auch 300x300 Rasterpunkte für diese Fläche in der Graphik gespeichert sein. Darüber hinaus muss die Ausgabegröße der Rastergraphik im HTML- bzw. CSS-Code korrekt angegeben werden.

Anders als bei Druckern, liegt die typische Auflösung von handelsüblichen Flachbild-Monitoren aber bei 90 bis ca. 140 dpi (Pixel pro Zoll). Oft bringen es ältere Röhrenmonitore sogar auf nur 72 dpi. Im Allgemeinen sollte heute im Falle der Ausgabe auf Computermonitoren von einer durchschnittlichen Auflösung von 100 dpi ausgegangen werden. Genau diese Anzahl an Rasterpunkten je Flächenzoll sollte also eine Graphik oder ein Foto haben, wenn es zur Ausgabe auf Monitoren vorgesehen ist.

Da die auf einer Website dargestellten Bilder und Fotos eben primär am Bildschirm dargestellt werden, sollten Rastergraphiken auch auf die physikalische Auflösung von Monitoren ausgelegt sein. Zur optimalen Darstellung auf beiden Ausgabemedien kann aber auch für jedes der beiden Medien ein separates Bild mit entsprechender Rastergröße verwendet werden. Bei Ausgabe auf dem Drucker wird dann ein anderes Bild verwendet als im Falle einer Darstellung auf einem Bildschirm. Dies kann etwa durch bestimmte Angaben im Cascading-Stylesheet der Internetseite umgesetzt werden.

Zur Verdeutlichung nun folgendes Beispiel: Angenommen es soll eine Rastergraphik, die genau ein Zoll breit und ebenso hoch ist, sowohl auf dem Drucker als auch auf dem Monitor dargestellt werden. Für den Monitor nehmen wir eine durchschnittliche physikalische Auflösung von 100 dpi, für den Drucker dagegen 300 dpi an. Die Rastergraphik für den Monitor hat dann eine Rastergröße von 100x100 Pixeln. Der Drucker benötigt dagegen das gleiche Bild in einer Rastergröße von 300x300 Pixeln, da dieser auf gleicher Fläche genauso viele Pixeldaten unterbringt.

Das Bild für den Drucker enthält mehr Detailinformationen und ist qualitativ hochwertiger. Auf dem Drucker ist die optische Qualität durch den höheren Detailgrad des Bildes entsprechend besser. Würde der Drucker dagegen das Bild in der Monitorauflösung nutzen, so führte dies zu einer Skalierung der Rastergraphik und damit zu einer Vergrößerung der Rasterpunkte. Statt der fehlenden Details werden die einzelnen Rasterpunkte – im einfachsten Falle – mehrfach neben- und untereinander ausgegeben und damit die durch einen Rasterpunkt belegte Fläche vergrößert.

Auf der folgenden Seite geht es um das Zusammenspiel zwischen der Rastergröße von Graphiken und den für die Ausgabe vorgesehenen Bildelementen im HTML-Code der Internetseite. Hier gilt es zur Wahrung der Usability einer Website einiges zu beachten.

  
© 2009-2017 Möglichkeiten zur Steigerung von Geschwindigkeit und Usability Ihrer eigenen Website