Responsive Images: Fallstudie liefert wichtige Hinweise zum Thema Performance

Responsive Images - Ein spannendes Thema wurde im Bereich Webdesign in den letzten Jahren immer wichtiger: Responsive Design.

Darunter versteht man Internetseiten, die sich dynamisch an das Ausgabegerät des Anwenders anpassen. Der Grund für diese Funktion ist leicht erklärbar. Verbraucher verwenden nicht mehr nur ihren eigenen PC zu Hause um im Internet zu surfen. Viele benutzen inzwischen Smartphones, Tablets und viele weitere Geräten in allen möglichen Größen und Formen. Webdesigner müssen sich darauf immer mehr einstellen, doch es ist eine schwierige Herausforderung. Wie kann eine Internetseite erstellt werden, die auf einem 30-Zoll Display gut aussieht, auf einem kleinen Smartphone jedoch immer noch ansprechend wirkt? Die schwedischen Entwickler Anders Andersen und Tobias Järlund standen vor diesem Problem. Sie wurden beauftragt, die Webseite der größten schwedischen Tageszeitung Aftonbladet für mobile Ausgabegeräte anzupassen. Ihre Ergebnisses stellten sie in einer Fallstudie zum Thema Responsive Images vor.

Responsive Images

Responsive Images

Die Entwickler wollten ihre Aufgabe möglichst einfach umsetzten. Ihr Plan war eine einzige HTML-Datei, die alle erforderlichen Informationen enthält, um je nach Ausgabegerät das richtige Bild zu einem Text darzustellen. Dabei hatten drei wichtige Aspekte eine entscheidende Bedeutung: Ladetechnik, Seitenfluss und die Auswahl des passenden Bilds.

Für die richtige Ladetechnik der Bilder musste ein passendes JavaScript erstellt werden. Dieses checkt die Größe des Endgeräts, identifiziert die Bilder und den Punkt, an dem sie eingefügt werden und führt die Operation schließlich aus.

Beim Seitenfluss sollte ein einheitliches Erscheinungsbild der Seite erzeugt werden. Auch die Verzögerung, wenn JavaScript das Bild in den Speicher lädt, sollte verhindert werden. Aus diesem Grund entschieden sich die beiden schwedischen Entwickler gegen das oft verwendete Attribut img { max-width: 100% }. Stattdessen verwendeten sie einen sogenannten “Padding-bottom Hack”. Hiermit kann das entsprechende Seitenverhältnis angegeben werden. Die Höhe eines Bildes lässt sich dann relativ zu dessen Breite festlegen.

Vielzahl von Faktoren

Der letzte Teil der Studie behandelt die schwierige Auswahl des passenden Bilds. Die Auswahl ist von einer Vielzahl von Faktoren abhängig. Die Entwickler lösten das Problem, indem sie das Nutzerverhalten der Tageszeitung Aftonbladet analysierten. Bei dieser Analyse kam heraus, dass die Mehrzahl der Anwender ihre Endgeräte im sogenannten Porträtmodus verwenden. Außerdem werden in den meisten Fällen HD-Displays benutzt.

Wie es scheint, ist die Bildauswahl immer ein Kompromiss zwischen Zweckmäßigkeit und Qualität. Große Bilder verbrauchen viel Speicherplatz, deswegen sollte genau überprüft werden, wann man sie wirklich benötigt. Im Zweifelsfall gilt: keine Kompression bei Bildgalerien die im Mittelpunkt der Aufmerksamkeit stehen und anderen wichtigen Bildern.

Die veröffentlichte und ausführliche Fallstudie mit dem Titel „Adressing The Responsive Images Performance Problem“ bietet detaillierte Einblicke in das Thema und zeigt viele interessante Ideen.

author avatar
Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur / WordPress Agentur Wolkenhart und freier Dozent an der Dualen Hochschule Baden-Württemberg.

10 thoughts on “Responsive Images: Fallstudie liefert wichtige Hinweise zum Thema Performance

  1. Dennis

    Hallo,

    danke für den Artikel zu der Fallstudie. Ich habe mal ein Tutorial gesehen indem Bilder mithilfe von Javascript auf Endgeräten wie Smartphones komprimiert wurden. Umso kleiner das Display, umso kleiner die Grafik. Ich glaube nur auf Computern und Tablets wurde gar nicht komprimiert. Einen Geschwindigkeitsverlust habe ich nicht groß gemerkt. War auf jeden fall schneller wie wenn die Bilder nicht komprimiert waren.

    1. Mika Gustavson Post author

      Hi Dennis,

      eine richtig coole Website hast du :) fehlt nur noch Responsive :)

      Gruß Mika

  2. Jan

    Grad Bildgalerien sind meines Erachtens in Responisve Webdesigns noch nicht gut umgesetzte. Zumindest laufen bei mit auf dem Gerät die meisten Sachen nicht flüssig. Klar brech ich da ab.

    1. Mika Gustavson Post author

      Hi Jan,

      ja das mit den Bildergalerien ist meist nicht so gut gelöst, da gebe ich dir recht.

      Gruß Mika

  3. Dominik

    In WordPress oder anderen Content Management Systemen werden Bilder in den meisten Themes sowieso responsive dargestellt, ansonsten finde ich, dass Responsive Design oft überbewertet wird. Man muss sich eben immer ansehen, welche Zielgruppe man anvisiert und dank Google Analytics weiß man ja ungefähr, wie viele Besucher mobile Endgeräte nutzen. Also einfach mal abwägen :)

    1. Mika Gustavson Post author

      Hi Dominik,

      ja auf jeden Fall sollte man vorher eine Analyse machen und nicht auf Teufel komm raus auf Responsive Design umstellen. Was man aber bedenken sollte ist das wenn man auf SEO achtet Responsive Design auch ein Google-Rankingfaktor ist.

      Gruß Mika

  4. Tobias

    …oder einfach Templates auf Themeforest kaufen. Die meisten Designs mit >100 Sales sind responsive und gut durchdacht.

    1. Mika Gustavson Post author

      Hi Tobias,

      so einfach ist es doch nicht. Bei den meisten Kunden oder die meisten Unternehmen können nicht einfache ein Template kaufen da es nicht auf ihre Bedürfnisse etc. angepasst ist.

      LG Mika

  5. Gianni

    Wir stehen in unserer Agentur ebenfalls immer wieder vor der Herausforderung große Bilder mit den verschiedenen Endgeräten einer Website, und deren Performance in Einklang zu bringen.

    Da wir keine fertigen Themes benutzen, sondern individuelle Typo3-Instanzen entwickeln, können wir die Bilder individuell einbinden. Von automatischer Komprimierung halte ich persönlich nicht sonderlich viel. Oft ist es zudem sinnvoll auf einem beispielsweise kleineren Gerät einen anderen Bildausschnitt zu wählen.

    Wir nutzen hierbei den Weg, die Bilder je nach einigen Größen geordnet auszugeben. So binden wir je nach Anforderung des Endgerätes ein anderes Bild ein. Dabei beschränken wir uns vor allem auf die Größen für Smartphone, Tablet und Desktop. Für Retina-Grafiken kann man ebenfalls Sonderlösungen einbauen.

    So erhält man die bestmögliche Performance, bei hoher Bildqualität.

    1. Mika Gustavson Post author

      Hi Gianni,

      danke für die Informationen eurer Vorgehensweise.

      Gruß Mika

Comments are closed.