Jeder, der schon einmal an responsive Webdesign gearbeitet hat, kennt das Problem mit den Bildern auf der Webseite. Diese passend auszugeben und zu skalieren ist zwar kein Problem, jedoch müssen für jedes Gerät die gleichen Datenmengen geladen werden – egal ob Smartphone oder Desktop-PC mit 27″ Monitor.

Das Problem

Beim Programmieren einer Webseite erstellen der Webdesigner auch gleich die passenden Bilder für die Seite: Bilder im Slider, Headerbilder, Grafiken und sonstige Bilder. Diese werden natürlich so angelegt, dass sie auf den großen Monitoren der Designer noch schön aussehen, aber trotzdem möglichst klein in der Dateigröße sind. Obwohl diese Dateigröße schon recht klein gehalten wird, werden die gleichen Datenmengen auch auf einem Smartphone geladen. Das entsprechende Bild wird dabei nur skaliert, damit es der Ausgabegröße angepasst ist.

Wenn das Bild aber schon skaliert wird, könnte man doch eigentlich auch ein kleineres Bild erstellen und somit Datenmengen sparen!

Responsive Images

Die Problembehebung

WordPress-User können aufatmen. Das Plugin RICG Responsive Images nimmt sich eben diesem Problem an. Es erstellt sogenannte Thumbnails der Bilder, die dann auf den kleineren Geräten anstelle des Bildes in voller Größe geladen werden.

Der Quellcode eines solchen Bildes sieht dann so aus:

Die Größe dieser Thumbnails kann in WordPress bestimmt werden, so dass je nach Gerät auch Bilder in richtiger Größe ausgeliefert werden können. Das Plugin arbeitet dann vollkommen selbstständig und bindet dann immer die richtigen Bilder ein.

Fazit

Um Bandbreite und kostbaren Traffic (vorallem im Mobilfunk-Bereich) zu sparen, ist dieses Plugin die perfekte Lösung für das Problem mit responsiven Bildern.