Kunst statt Katastrophe: Bilder im Web
Kommentare

Bilder haben das Web erst so richtig aufblühen lassen. Als Tim Berners-Lee vor über 20 Jahren das erste Bild ins Word Wide hochgeladen hat (es handelte sich damals, 1992, um eine Fotografie der „Les

Bilder haben das Web erst so richtig aufblühen lassen. Als Tim Berners-Lee vor über 20 Jahren das erste Bild ins Word Wide hochgeladen hat (es handelte sich damals, 1992, um eine Fotografie der „Les Horribles Cernettes“, einer Band des CERN-Instituts) stellte er damit die Weichen für ein Web, dass nicht mehr nur dem reinen (wissenschaftlichen) Informationsaustausch diente, sondern auch Potenzial für Unterhaltung hatte und von nun an eine breite Masse ansprechen sollte. Jeder kleine Blogger setzt heute auf die Aussagekraft von Bildern, von den großen Medienhäusern ganz zu schweigen. Ist doch alles nur Deko, mag jetzt so mancher denken, doch weit gefehlt. Hinter all den vielen hübschen, bunten Bildern verbirgt sich nicht nur Ästhetik, sondern auch Usability. Und deswegen sollte man zwei Dinge dringend im Hinterkopf behalten:

  1. Nicht für das Web optimierte Bilder legen eure Website eher lahm, statt sie attraktiver zu machen.
  2. Bilder, die gar nicht erst laden oder nicht so wie vorhergesehen, können unterschiedliche Ausmaße haben: Waren es reine „Schmuckbilder“, dann geht „nur“ die Ästhetik eurer Seite flöten. Schlimmer wird’s, wenn die Bilder einen semantischen Wert haben, wie etwa ein Button – denn dann ist eure Usability dahin und eure User höchstwahrscheinlich auch.

Die Schreiber von wpbeginner raten in Bezug auf eure Website-Performance, sowohl auf das Bildformat als auch auf die Kompression von Bildern zu achten. Für die Kompression stellen sie einige Tools vor und es gibt zusätzliche hilfreiche Tipps zur Bildoptimierung. Auch wenn die Bildqualität hier ein klein wenig leiden wird: Eure User werden dies weniger zur Kenntnis nehmen, als Verzögerungen beim Laden. Und dass sich Verzögerungen schon ab einer Sekunde massiv auswirken können, zeigt folgende Grafik von Strangeloop:

Screenshot:http://www.strangeloopnetworks.com/resources/infographics/web-performanc…

Wenn Bilder sich verweigern

Einen interessanten Blog-Artikel zum zweiten Punkt hat Christian Heilmann geschrieben. Bilder, so schreibt er, seien eine gefährdete Spezies des Webs.

1993, also ein Jahr nach dem ersten Bild im WWW, kam das IMG-Tag – und die ersten Probleme. Platzhalter ohne Aussagekraft traten an die Stelle von nicht ladbaren oder nicht angezeigten Bildern. Images und Applets waren nicht auf künftige Medientypen ausgelegt und zeigten Probleme was die Zugänglichkeit betrifft. Gleichzeitig jedoch bietet das IMG-Tag Attribute, wie alt, titel oder longdesc, die euch in vielen Fällen weiterhelfen können, wenn etwas mal nicht so angezeigt wird, wie es eigentlich sollte.

Desto mehr Bilder man in einem Dokument benutzt, desto mehr http-Anfragen finden statt, desto mehr Bilder müssen geladen, dekodiert und angezeigt werden, womit wir wieder bei der Frage nach der Performance sind. Klar, auch hier wird schon seit längerem an Lösungen gearbeitet. Image Sprites zum Beispiel sind ein Ansatz: Dabei werden alle Bilder in eines gepackt – ergo muss nur ein Bild geladen werden. Dann jedoch muss man wiederum Image-Replacement-Techniken anwenden sofern das und somit die Bilder nicht angezeigt werden. Viele verlassen sich heute auch ganz und gar auf CSS – doch auch hier ist man ohne die IMG-Attribute auf sich allein gestellt. Und weiter noch: CSS-Malereien sind unter Umständen nicht auf jedem Browser gleich und sie sind nicht rückwärtskompatibel.

Christian Heilmann ist der Ansicht, dass alles Bildmaterial, das für eine Website von semantischer Bedeutung ist, sprich nicht nur „Screen Furniture“, als IMG geladen werden sollte, damit man im Fall eines Fehlers mittels Load und Error Handler reagieren kann und außerdem nicht alles gleich aussieht wie Kraut und Rüben, da man ja mit den Attributen ein gewisses Sicherheitsnetz spannen kann. 

An image is more than a visual construct – it also gives meaning and you should provide a way to make that meaning obvious when the image can not be seen or is displayed wrongly.

Dann gibt es da auch noch die Variante, das Skalieren von Bilder mit HTML zu bewerkstelligen… aber davon wollen wir gar nicht erst anfangen. Heilmann plädiert daher dafür, Bilder human zu behandeln. Schließlich gibt es dazu mehr als genug Techniken, die man nur gewissenhaft einsetzen muss. Auf seinem Blog könnt ihr seine Ratschläge noch einmal im Detail nachlesen.

Aufmacherbild: blank frames in the gallery, 3d rendering von Shutterstock / Urheberrecht:Kutlayev Dmitry

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -