Webseiten optimieren für Retina-Displays bei Apple-Geräten
Seite 2: So macht es Apple
Nach der Veröffentlichung des iPad 3 hat Apple umgehend seine Internetpräsenz für die Retina-Bildschirme umgebaut. Dabei wählte die Firma eine einfache Lösung, die jedoch recht verschwenderisch mit den Ressourcen umgeht und die Leitungsqualität nicht berücksichtigt: Es werden erst die Standard-Bilder geladen und angezeigt. Ein JavaScript prüft dann, ob ein hochaufgelöstes Display verwendet wird. Ist das der Fall, lädt es die größeren Bilder zusätzlich nach. Retina-Anwender laden so immer beide Bild-Varianten. Am Beispiel der Startseite von www.apple.de bedeutet das: Allein für das Aufmacher-Bild lädt man über 700 KByte, fast das Fünffache der Datenmenge ohne Retina-Display (150 KByte).
Einige frei verwendbare JavaScript-Frameworks wollen das besser machen und berücksichtigen neben der Bildschirmauflösung auch die Leitungsqualität. Dazu zählen Foresight.js, Responsive Images und HiSRC (siehe Webcode). Alle drei sind allerdings recht umfangreich und eignen sich daher als Anschauungsmaterial nicht besonders. Für diejenigen, die die grundsätzliche Vorgehensweise im Script lieber selber durchblicken und auf ihre Bedürfnisse anpassen wollen, dient eine kompakte, selbst entwickelte Javascript-Lösung als Grundlage.
