Ihr habt das eine oder andere Projekt unter Berücksichtigung von Responsive Webdesign umgesetzt und freut euch nun, dass die Seiten auf allen Displaygrößen gut aussehen. Doch die Bilder werden noch mittels CSS Media Queries im Browser skaliert, was euch stört, weil die Rechenpower der mobilen Geräte eben nicht darauf ausgelegt ist, massig Bilder runterzuladen die für Desktop-Rechner gedacht waren/sind. Dann könnt ihr an dieser Stelle weiterlesen, denn wir haben ein Tool entdeckt, welches das Problem aufgreift und eine Lösung sein kann.
Mit jQuery Picture gibt es ein jQuery Plugin, welches die gewünschten Bilder für die passenden Auflösungen bereitstellt. So muss der mobile User in der U-Bahn keine 60 Sekunden auf eine fertig geladene Seite warten, weil noch diverse Bilder runtergeladen werden müssen. Denn ihr könnt ihm gleich mit Hilfe des Plugins die kleineren Bilder anbieten. Das schont die Power des Smartphones und die Seiten sind inkl. der Bilder schneller ausgeliefert.
Das Plugin wird wie folgt benutzt:
<picture alt="A Half Brained Idea">
<source src="assets/images/small.png">
<source src="assets/images/medium.png" media="(min-width:440px)">
<source src="assets/images/large.png" media="(min-width:600px)">
<noscript>
<img src="assets/images/large.png" alt="A Half Brained Idea">
</noscript>
</picture>Das Script interpretiert das Markup und sorgt für die gewünschte Bilderauslieferung. Der HTML-Code ist übrigens im Augenblick in der Diskussion. Evtl. integrieren Google, Mozilla und Co. das Verhalten in ihre Browser. Dann wäre die JavaScript-Lösung überflüssig.
Eine Demo ist auf der Projektseite zu sehen. Einfach mal das Fenster kleiner machen und sehen, wie sich das Beispielbild verändert. Viel Spaß beim Testen.