Resposive Images auf Clientseite

Rimg
Kommentare

Responsive Webdesign, die Anpassung von Webseiten an das jeweilige Endgerät des Nutzers, bleibt ein großes Thema im Bereich Webdesign. Eine Universallösung gibt es hier nicht, dafür aber viele kleine

Responsive Webdesign, die Anpassung von Webseiten an das jeweilige Endgerät des Nutzers, bleibt ein großes Thema im Bereich Webdesign. Eine Universallösung gibt es hier nicht, dafür aber viele kleine Bausteine und Lösungsvorschläge, die dem Webdesigner das Leben erleichtern. Die JavaScript-Bibliothek Rimg gesellt sich dieser Schatzkiste nun hinzu.

Rimg steht für Responsive Image und bietet eine bequeme Methode, die richtigen Bilder für das jeweilige Ausgabegerät auszuliefern, gesetzt, sie liegen auf Eurem Server nach einem festgelegten Namensschema vor. Das Praktische dabei: Rimg ist in reinem JavaScript geschrieben, beinhaltet keinen serverseitigen Code und ist recht unkompliziert zu benutzen, da der Code aus gerade mal zwei Zeilen besteht: der Bibliothek und der Breakpoint-Definition.

Das Prinzip auf dem Rimg basiert ist relativ einfach: Nachdem die DOM-Schnittstelle geladen wurde, durchsucht Rimg das DOM nach Knoten und ändert das Attribut je nach Größe des Viewports. Wer Rimg verwenden will muss lediglich sicherstellen, dass der Browser HTML5 und Mediaqueries unterstützt. In Aktion beobachten und herunterladen könnt Ihr euch die Bibliothek unter diesem Link, eine genauere Anleitung für die ersten Schritte mit Rimg findet Ihr hier.

Aufmacherbild: set of modern computer monitor, laptop, digital tablet and mobile phone von Shutterstock / Urheberrecht: bloomua

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -