Die wichtigsten JavaScripte, Tricks und Plugins haben wir hier zusammengestellt. Entdecke die Tipps und erstelle Deine eigene Retina-ready-Seite.
Bei Bildern im Contentbereicht die per <img src="https://www.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.
<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.
.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
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 PluginEin 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