Sie sind hier: Verschiedenes Bilder präsentieren Bilder im Web (Internet) Bilder im Web (Internet): Bildgröße

Bilder im Web (Internet)

Bilder im Web (Internet): Bildgröße

Große Bilder wirken meist besser als kleine. Ich skaliere die Bilder meiner Galerien möglichst groß unter folgenden Voraussetzungen:

Kurze Ladezeit

Wir haben nur begrenzt Zeit und wollen diese nicht vergeuden durch langes Warten auf ein Bild. Wie lange es dauert, bis ein Bild im Webbrowser erscheint, hängt von vielen Umständen ab. Hier die wichtigsten:

  1. Wieviele Bytes hat das Bild?
  2. Wie schnell kann der Webserver Daten übertragen?
  3. Wie schnell können Internetanbindung und Rechner des Betrachters Daten empfangen?
  4. Wie lange benötigt der Webbrowser zum Darstellen eines Bilds?

Jeder dieser Umstände hängt wieder von mehreren anderen ab und alle schwanken von Zeit zu Zeit. Werden zum Beispiel beim Webserver gleichzeitig viele Seiten aufgerufen, ist er langsamer, als wenn er nur wenig Daten ausliefert. Laufen auf dem Rechner des Betrachters weitere rechenintensive Programme, braucht der Webbrowser länger zum Anzeigen und so weiter. Das einzige, das wir sicher steuern können, ist die Bytegröße unserer Bilder (außer wir benutzen einen schnelleren Webserver).

Dazu speichern wir unsere Bilder in einem Dateiformat, das bei geringer Bytegröße eine möglichst gute Bildqualität ermöglicht und von allen Webbrowsern dargestellt werden kann. Zurzeit sind das JPEG und PNG. Durch Verringern der Qualitätsstufe wird die Dateigröße kleiner und wir sollten diese so lange verringern, wie das Bild noch gefällig erscheint.

Welche Größe akzeptabel ist, hängt ab vom dritten Punkt: Wie schnell kann der Betrachter Daten empfangen? Heute haben viele DSL und werden vielleicht Bilder bis zu 300 Kilobyte tolerieren. Für alle, die mit dem Modem Daten empfangen über ISDN oder das analoge Telefonnetz, sind 300 Kilobyte zu viel. Ein Einzelbild sollte höchstens 100 Kilobyte groß sein.

Das ganze Bild soll zu sehen sein

Das Bild wird im Darstellungsfenster des Webbrowsers angezeigt. Leider wissen wir nicht, wieviele Pixel hoch und breit es ist bei allen verschiedenen Besuchern unserer Bildgalerie. Wir können das nur schätzen, ausgehend von der vermutlich häufigsten Bildschirmauflösung zu einer bestimmten Zeit. Im Laufe der letzten Jahre wurden die Bildschirme und deren Auflösungen größer, Empfehlungen gelten nur für eine bestimmte Zeitperiode. Sollte der Browser den gesamten Bildschirm einnehmen – was eher unüblich ist – oft belegen "Taskleisten" am (unteren) Bildschirmrand einen Teil davon und das Browserfenster ist nicht maximiert — ist das noch nicht die Größe des Darstellungsfensters. Es ist um einiges kleiner, wie die Abbildung unten zeigt. Einen Teil nehmen auch die Navigationslinks auf unseren Bildseiten ein, sodass der Platz noch geringer ist.

Abbildung: Darstellungsfenster eines Webbrowsers. Eine Webseite wird nur im Darstellungsfenster angezeigt. Oberhalb des rot eingerahmten und rot hinterlegten Darstellungsfensters sind: Titelleiste, Menüleiste, Navigationsleiste, Bookmarkleiste, Tableiste. Nicht im Bild ist eine Toolbar – manche Browser-Erweiterungen bringen eine weitere Toolbar mit sich, die noch mehr Platz belegt. Unterhalb des Darstellungsfensters ist die Statuszeile. Nicht beschriftet ist der Scrollbalken rechts. Wächst der Seiteninhalt nach rechts, ist ein weiterer Scrollbalken oberhalb der Statuszeile, der das Darstellungsfenster weiter beschneidet. Manchmal haben Browser auf einer Seite ein weiteres Fenster ("Sidebar") mit zum Beispiel Bookmarks, das ebenfalls das Darstellungsfenster verkleinert.

Lösungsvorschläge

Folgende widersprüchliche Anforderungen müssen angeglichen werden:

  1. Das Bild soll groß sein, damit es beeindruckt
  2. Das Bild soll schnell angezeigt werden
  3. Das Bild soll nicht größer sein als das Darstellungsfenster des Webbrowsers

Maximallängen der Bildseiten anhand Schätzung

Ich schätze, wie groß im Durchschnitt das Darstellungsfenster der Webbrowser sein wird und skaliere meine Bilder so, dass eine Maximalbreite und Maximalhöhe nicht überschritten werden. Aktuell sind meine Bilder höchstens 800 Pixel breit und nicht höher als 700 Pixel. In Zukunft wird sich das vermutlich ändern.

Diese Variante erfüllt am besten Punkt 2: Das Bild soll schnell angezeigt werden. In der Regel wird Punkt 3 erfüllt, bei kleinen Bildschirmen und Browserfenstern kann jedoch das Bild teilweise beschnitten sein. Bezüglich Punkt 1 – beeindruckende Größe – gehe ich einen Kompromiss zugunsten der anderen Punkte ein.

Formatierung mit Maximalausdehnungen

Ich kann meine Bilder mit großen Abmessungen auf dem Webserver speichern und mittels CSS so formatieren, dass sie ins Fenster passen.

Ob die Bilder in beeindruckender Größe erscheinen, hängt ab von der unbekannten Größe des Browser-Darstellungsfensters. Die Ladezeit ist in den meisten Fällen die schlechtmöglichste, es werden die Daten des großen Bilds übertragen, auch wenn es nur klein angezeigt wird. Lediglich Punkt 3 wird hundertprozentig erfüllt: Das Bild wird nicht größer als das Browser-Darstellungsfenster.

Programmsteuerung

Einiges spricht für eine Programmsteuerung: Ich öffne ein Fenster, das den ganzen Bildschirm einnimmt, liefere ein Bild, das dieses ausfüllt und nicht mehr Bytes hat als notwendig. Punkt 1 und 3 sind zu 100 Prozent erfüllt, Punkt 2 in Abhängigkeit von Punkt 1 bestmöglich.

Nachteile: Ich kann nicht sicher sein, dass jeder meine Bilder betrachten kann. Ich würde JavaScript einsetzen, mit dem ich die Bildschirmauflösung abfragen und Bilder in der entsprechenden Auflösung laden und anzeigen kann. Wie im vorherigen Artikel beschrieben, ist bei etlichen Webbrowsern JavaScript deaktiviert. Außerdem lässt sich nicht jeder gerne vorschreiben, wie er etwas anschauen soll. Gleiches gilt für andere Programme (Flash, Java, Quicktime, ...).

Große Version

Wegen der Nachteile der Programmsteuerung und der Formatierung mit Maximalausdehnungen benutze ich die erste Lösung: Meine Bilder überschreiten nicht 800 × 700 Pixel. Ich könnte für größere Bildschirme das gleiche Bild größer skaliert anbieten. Auf den Einzelbildseiten wäre ein Link mit dem Bild einer Lupe oder dem Text "Vergrößern", der auf eine weitere Einzelbildseite verweist mit dem gleichen Foto in größerer Auflösung.

Abbildung: Große Bildversion. Über einen Link wird eine neue Seite mit größerem Bild geladen.

Elmar Baumann, 25.01.2007.

Letzte Bearbeitung: 21.12.2008.