AppTestsss

News, Berichte und Videos rund um Apple, iPhone, iPad und Mac

AppTestsss -

Retinajs passt Website-Bilder an hochaufgelöste Displays an

Mit Präsentation des iPad mit Retina-Display hat Apple im mobilen Markt einen enormen Schritt nach vorne gemacht. Für Webentwickler, die diese neue Technik sinnvoll auf Websiten nutzen wollen, bedeutet die Anpassung aller Bilder an das Retina-Display jedoch eine Menge Arbeit. Mit einem kleinen Javascript ist diesem Mehraufwand zumindest im Sinne des Codens Einhalt geboten: Retinajs ist dieses kleine, sehr nützliche Tool. Um es zu verwenden ladet ihr es einfach von der Betreiberwebsite herunter, ladet es auf euren Server hoch und baut es in die Website ein. Dann müssen alle Bilder nur noch in der doppelten Auflösung erstellt bzw. hochgeladen werden, und schon sieht die Website auch auf dem neuen iPad bzw. dem iPhone 4/ 4S super aus. Damit das Skript eure Bilder erkennt, die als Retina-Version genutzt werden sollen, gebt ihr ihnen den normalen Dateinamen mit einem @2x am Enden. Beispiel: Das Bild „Header.jpg“ liegt in normaler Auflösung vor, die Retina-Version nennt ihr „Header@2x.jpg“ und speichert sie im selben Ordern, wo auch die normale Version des Bildes liegt.

Um die Funktionalität des Skripts zu demonstrieren habe ich eine sehr übersichtliche Beispielseite geschrieben, die euch, je nach Gerät, ein unterschiedliches Bild ausliefert. Solltet ihr die Seite über ein Retina-Gerät aufrufen, dürft ihr euch jedoch nicht wundern, wenn ihr kurz das „Nicht – Retina“-Bild bekommt, das Skript tauscht das Bild erst nach dem vollständigen Laden der Seite aus.

 

Kategorie: News

Deine E-Mail-Adresse wird nicht veröffentlicht. Pflichtfelder sind markiert *

*