HomeKontaktImpressum
Sie sind hier: Home

Internetgerechte Maße für Bildmaterial

Die auf einer Website eingebundenen Fotos und Graphiken sollten stets optimal zur Ausgabefläche passen. Stimmt das Raster der Bilddateien mit dem vorgesehenen Ausgabebereich überein, so erspart man sich unschöne Effekte bei Seitendarstellung. Aber auch die Ladezeit kann in manchen Fällen gesenkt werden.

Bei der Erstellung von Internetseiten kann die Größe der eingebundenen Fotos und Graphiken per CSS-Formatierung oder Angaben im HTML-Tag zum Einbinden von Bildern (IMG-Tag) angegeben werden. Dabei ist darauf zu achten, dass ein auf diese Art eingebundenes Bild von den Abmessungen der Rastergraphik her genau zur Breite und Höhe des im HTML-Code oder dem zugrunde liegenden Stylesheet dafür vorgesehenen Bereichs passt. Gleiches gilt freilich auch für in eine Internetseite eingebettete Bildelemente.

Diese Vorgehensweise hat grundsätzlich zwei entscheidende Vorteile: Zum Einen muss der Browser das Bild nicht erst auf ein bestimmtes Maß skalieren. Liegt also das Bild nicht in der im HTML-Dokument vorgegebenen Rastergröße vor, so muss es vor dessen Darstellung hoch- oder aber herunterskaliert werden. Wird ein Bild hochskaliert, so wird die Fläche des Bildes durch berechnete Zwischenwerte vergrößert. Allerdings kann dieses Verfahren keine fehlenden Details ersetzen.

Letzlich sind die resultierenden Bilder qualitativ schlechter und können im extremfall aussehen, wie ein gefliestes Badezimmer. Im umgekehrten Fall – also dem herunterskalieren – gehen dagegen in der Rastergraphik enthaltene Details verloren, da einzelne Bildblöcke zusammengefasst werden. Obwohl die Details in der Rastergraphik enthalten sind, kommen diese nicht zur Ausgabe.

Der zweite Vorteil besteht darin, dass die in der Rastergraphik enthaltenen Details optimal ausgenutzt werden. Im Falle eines zu groß bemessenen Rasterbildes wirken sich unnötigerweise enthaltene Datails im Bild negativ auf die Dateigröße der Rastergraphik aus, was sich in einer längeren Wartezeit für den Download des Bildes niederschlägt – letztlich äußert sich dies in einer höheren Latenzzeit. Da ein Teil der übertragenen Bildinformationen für die Darstellung überflüssig ist, sollte dieser auch nicht an den Client übertragen werden.

Auch im Hinblick auf die Usibility sollte stets darauf geachtet werden, dass die Maße von Bildern im IMG-Tag des HTML-Codes oder etwa im Stylesheet in Form von Hintergrundgraphiken angegeben werden. Schließlich verhindert ein derartiges Vorgehen ungewollte „Spezialeffekte” während des Ladevorgangs einer Internetseite. Diese Effekte, die sich in einem hektischen herumspringen von Seitenelementen – insbesondere im Falle der Darstellung von Grafiken – äußern, treten recht häufig auf Websites auf. Der Besucher wird beim Aufruf einer solchen Internetseite von einem Zucken und Rucklen begrüßt, was sicher kein guter Anfang für einen entspannten Seitenbesuch ist.

Verstärkt wird der negative Eindruck oft noch von extrem langen Wartezeiten. Betreiber einer Website sollten grundsätzlich daran interessiert sein die Ladezeit ihrer Homepage möglichst gering zu halten. Nun verlängern aber zahlreich eingebundende externe Bilder in – unnötiger Weise – zu hoch bemessener Qualität eben auch die Ladezeit einer Internetseite. Viele Seitenbesucher brechen den Ladevorgang von Internetseiten bereits nach wenigen Sekunden von sich aus ab, da sie eine Fehlfunktion vermuten und nicht bereit sind länger zu warten. Eine Wartezeit von mehreren Sekunden sollte also auf keinen Fall erreicht werden.

Durch Anpassung der Rastergröße eingebundener Bilder mittels Bildbearbeitungsprogramm sollten also alle Bilder speziell auf die Darstellung im Internet angepasst werden. Am Ende dieses Vorgangs steht ein für die Website optimiertes Bild, welches bei minimaler Dateigröße optimal in die Internetseite integriert ist.








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