MooRetina – hochauflösende Bilder nur wenn nötig

flattr this!

Wieder eine neue Extension von mir für MooTools und dieses Mal etwas iPhone orientiert.
Seit dem iPhone 4, und jetzt auch dem iPod Touch in der vierten Generation, haben Webentwickler ein klitzekleines Problem mit ihren Webapps:

Das iPhone 4 und der neueste iPod Touch haben ein Retina Display verpasst bekommen, welches eine viel höhere Pixel-Dichte aufweist (324 Pixel pro inch).
Das Problem welches sich dadurch ergibt ist, dass viele Bilder und Grafiken einfach zu wenig dpi haben  und somit auf den neuen Geräten etwas verpixelt aussehen.

Mit meinem kleinen Plugin biete ich eine Lösung, ohne das auch auf den “alten” Geräten auch die hochaufgelösten Bilder geladen werden müssen.
MooRetina sucht nach img-Tags im HTML Code und versucht eine hochaufgelöste Version des dort angegebenen Bildes zu laden, wenn der Besucher der Seite mit einem Gerät mit Retina Display surft.
Wenn das normale Bild vergangenerSommer.jpg heißt, versucht MooRetina das Bild vergangenerSommer-2x.jpg zu laden (der Suffix lässt sich in den Optionen von MooRetina umstellen).

Inspiriert hierzu wurde ich von Troy Mcilvena, der diese Lösung für jQuery bereit gestellt hat.

Eine Demo findet ihr HIER. Beachte: Funktioniert nur mit dem iPhone 4 oder dem neuen iPod Touch (der mit der Kamera).
Den Download findet ihr wie immer in der MooTools Forge.

Schlagwörter: ,

21. Oktober 2010 Programmieren