Retina Javascripte (jQuery)

Die wichtigsten JavaScripte, Tricks und Plugins haben wir hier zusammengestellt. Entdecke die Tipps und erstelle Deine eigene Retina-ready-Seite.

1. retinajs

(Wird auch auf dieser Seite verwendet), für background-images und <img>, Clientseitig

Bei Bildern im Contentbereicht die per <img src="http://img.retina-test.de/images/test.png" /> eingebunden werden, wird automatisch geprüft ob in dem gleichen Verzeichnis (also im Ordner "images") der Bildname mit "@2x" ergänzt vorhanden ist. Also "test@2x.png". Wenn das der Fall ist, tauscht das Plugin die Source durch und es wird das doppelt so große Retina-Image einbunden. Dieses wird dann im Anschluss auf 50% heruntergerechnet, wodurch der scharfe Retina-Look zustande kommt.

So muss man also nichts machen, außer das Plugin einzubinden:

<script type="text/javascript" src="/scripts/retina.js"></script>
und seine Bilder in doppelten Auflösung mit der Namenserweiterung "@2x" bereit zu stellen.

Für Background-Images im CSS bietet retina.js ein nettes .less Mixin an.
Auch hier werden die Bilder einmal in normaler Auflösung und einmal in doppelter Auflösung abgespeichert und dann mit dem "@2x" erweitert und im gleichen Verzeichnis abgelegt.

Anstatt:
.test-bg{
	background-image: url('/images/test.png');
}
schreibt man einfach:
.test-bg{
	.at2x('/images/test.png', 200px, 100px);
}
Das wird dann in das compiled:
.test-bg {
  background-image: url('/images/test.png');
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  .test-bg {
    background-image: url('/images/test@2x.png');
    background-size: 200px 100px;
  }
}
Zum Plugin

2. Retina Images

Serverseitig, nur für <img>

Hier wird direkt auf dem Server über eine modifizierte htaccess und die "retinaimages.php" bei der Anfrage nach einem Retina-Bild gesucht und dieses anstelle des normalen Bildes ausgeliefert.

Zum Plugin

3. jQuery Retina Display Plugin

Clientseitig, nur für <img>

Ein sehr einfaches, kleines jQuery Plugin, das ohne große Anpassungen Retina-Bilder ausgibt, falls diese gefunden werden können.

$(document).ready(function() {
	$('img').retina();
});
Zum Plugin