Ratgeber: "HTML, CSS, Javascript & PHP"

Mobil in HD mit Retina Switch

Wie viele Benutzer des neuen iPads feststellen mussten, schluckt die höhere Auflösung deutlich mehr Bandbreite, wenn das Gerät tatsächlich hochaufgelöste Bilder empfängt. Ein neuer Dienst namens Retina Switch will hier Abhilfe schaffen.

Mobil in HD mit Retina Switch

© Archiv

Mobil in HD mit Retina Switch

Apple debütierte mit dem hochaufgelösten Retinadisplay im iPhone 4. Da die Schärfe des Displays bei den Benutzern extrem gut ankam, hat es Apple nun auch dem neuen iPad verliehen. Zahlreichen Analysten zufolge sollen in Kürze andere Hersteller nachziehen und ihren Geräten ebenfalls ein hochaufgelöstes Display in Retinaqualität spendieren. Nun sind aber heutige Mobilfunknetze kaum dafür vorbereitet, das scharfe Display stets mit hochaufgelösten Daten zu beliefern. Der Dienst Retina Switch bietet Website- Betreibern ein winziges Skript, mit dem sich das Herunterladen von Bildern in Retina-Qualität beim Zugriff auf Websites mit Unterstützung für diese Lösung durch den Besucher selbst deaktivieren lässt.Das benötigte Skript können Sie von der folgenden Adresse kostenlos herunterladen: retinaswitch.com. Damit das Skript Ihr Stylesheet findet, müssen Sie nach dem Auspacken des Download-Archivs noch die zugehörige Variable anpassen:

pathToRetinaStyles="css/retina.css";

Danach gilt es, das Skript in die Websites einzubinden. Hierzu fügen Sie in den betreffenden Dokumenten als letztes Element direkt vor dem schließenden </body>-Tag die Folgende Zeile hinzu:

<script src="js/retina.js"></script>

Nach dem Einbinden in Ihre Website benötigen Sie nur noch ein optimiertes Retina-Stylesheet. Diese Aufgabe erfüllt etwa dieser Code:

@media only screen and (-webkit-min-device-pixel-ratio:
2) {
.test-image { background:url(test@2x.png) no-repeat top
left; -webkit-background-size: 100px 100px; }
.retina { font-size:1px; }
}

Nennen Sie das Stylesheet retina.css. Zu guter Letzt müssen sich die CSS-Selektoren im Quelltext der Website abbilden, damit das Skript die betreffenden Inhalte korrekt erkennen kann.

image.jpg

© Internet Magazin

Der Regler aktiviert und deaktiviert die Anzeige von Bildern in Retinaqualität auf allen Websites, die das zugehörige Skript und ein passendes Retina-Stylesheet einbinden

Hierzu müssen Sie allen Hintergrundbildern in Retinaqualität den Klassenselektor .test-image zuzuweisen. Alle anderen Bilder, die über eine Version in Retinaqualität verfügen, werden mit dem Selektor .retina gekennzeichnet.Verfügt also etwa Beispielbild.png über eine Retinaversion, weisen Sie diesem Bild die Klasse .retina hinzu. Fügen Sie außerdem dem Namen der Retinaversion der Abbildung die Kennung @2x, im Beispiel also Beispielbild@2x.png.Beim Zugriff auf die Website mit einem retinafähigen Gerät ersetzt das Skript alle Bilder, welche die Klasse .retina aufweisen (zum Beispiel Dateiname.jpg), ganz automatisch durch ihre hochaufgelöste Version (Dateiname@2x.jpg), um dem Besucher die höchstmögliche Darstellungsqualität zu bieten.Nun haben Besucher aber die Möglichkeit, dieses Verhalten zu deaktivieren, indem Sie unter der Adresse retinaswitch.com den Regler ganz einfach in die gewünschte Position verschieben. Die Einstellung Off deaktiviert Retina-Bilder solange das zugehörige Cookie auf dem Gerät bleibt. Eine Registrierung beim Anbieter ist zum Glück nicht erforderlich.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…