Case Study zum Thema Performance von Responsive Images
Kommentare

Im  Bereich Web-Design ist in den letzten Jahren ein Thema immer wichtiger geworden: Responsive Design, d.h. Seiten, die sich dynamisch an das Ausgabegerät des Nutzers anpassen. Der Grund ist relativ

Im  Bereich Web-Design ist in den letzten Jahren ein Thema immer wichtiger geworden: Responsive Design, d.h. Seiten, die sich dynamisch an das Ausgabegerät des Nutzers anpassen. Der Grund ist relativ leicht nachvollziehbar: inzwischen nutzen Verbraucher nicht mehr hauptsächlich den Desktop-PC um im Internet zu surfen, sondern auch noch Smartphones, Tablets und eine Vielzahl von weiteren Geräten in allen möglichen Formen und Größen. Für Webdesigner ergibt sich daraus eine ernsthafte Herausforderung: Wie schaffe ich es eine Webseite zu erstellen, die auf einem 50-Zoll Megadisplay gut aussieht, aber auch auf dem Smartphone nicht schwächelt? Genau vor dieser Herausforderung befanden sich auch die beiden Entwickler Anders Andersen und Tobias Järlund. Ihre Aufgabe bestand darin, die Online-Präsenz der größten schwedische Tageszeitung Aftonbladet für mobile Endgeräte anzupassen. Die Ergebnisse präsentieren sie in einer jetzt veröffentlichten Case Study zum Thema Responsive Images.

Ziel der Entwickler war eine möglichst simple Lösung, die einfach zu cachen ist und auf eine serverseitige Geräterkennung verzichtet.  Es sollte nur eine HMTL-Datei geben, die alle Informationen enthält um je nach Endgerät das passende Bild zu einem Text darzustellen. Drei Aspekten kam dabei zentrale Bedeutung zu: Seitenfluß, Ladetechnik und Auswahl des passenden Bilds.

Beim Seitenfluss ging es darum für ein einheitliches Erscheinungsbild der Seite zu erzeugen und die Verzögerung zu verhindern, die entsteht wenn JavaScript das Bild in den Speicher lädt. Deswegen verzichteten die beiden Entwickler auf das häufig verwendete Attribut img { max-width: 100% } und verwendeten stattdessen einen sogenannten „Padding-bottom Hack“ mit dem das entsprechende Seitenverhältnis angegeben wird und sich die Höhe eines Bildes schließlich relativ zu dessen Breite festlegen lässt. Für die richtige Bild-Lade-Technik musste ein passendes JavaScript erstellt werden, das die Größe des Ausgabegeräts checkt, die Bilder und den Punkt, an dem sie eingefügt werden, identifiziert und die Operation schließlich ausführt.

Zuletzt wird in der Studie die Auswahl des passenden Bilds behandelt – ein schwieriger Punkt, da von einer ganzen Reihe von Faktoren abhängig. Die Autoren halfen sich, indem sie das Nutzerverhalten des Aftonbladets analysierten. Demnach verwendet die Mehrheit der Nutzer ihre mobilen Geräte im Porträtmodus, außerdem kämen meist HD-Displays zum Einsatz. Letztlich sei die Auswahl aber immer ein Kompromiss zwischen Qualität und  Zweckmäßigkeit. Große Bilder verbrauchen bekanntlich viel Speicherplatz, deswegen sei genau zu prüfen wann man sie wirklich benötige. Im Zweifelsfall gelte: keine Kompression bei wichtigen Bildern und Bildgalerien die im Mittelpunkt der Aufmerksamkeit stehen.

Die ausführliche Case Study mit dem Titel Adressing The Responsive Images Performance Problem bietet detaillierte Einblicke und fördert zahlreiche spannende Ideen zu Tage. Es lohnt sich also, sich ein wenig Zeit dafür zu nehmen!

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -