Nicht nur die Größe der Monitore wächst, sondern mit ihr auch die Pixeldichte. Die Pixeldichte (dpi) gibt an, wie viele Pixel sich auf einem Inch (2,56cm) befinden. Die Apple Produkte sind für ihre hochauflösenden Retina-Displays bekannt.
Damit ein Bild auch auf hochauflösenden Displays scharf aussieht, müssen Sie mit doppelter Größe eingebunden werden. Das verlängert das Laden einer Seite um einiges. Um nun Schnelligkeit mit ultra-scharfen Bildern zu kombinieren, habe ich Lazy Retina entwickelt.
Hinweis: Dieses Plugin wird nicht mehr gewartet.
Lazy Load + Retina
Lazy Loading ist eine bekannte Technik um Bilder erst dann zu laden wenn sie gebraucht werden — in unserem Fall: wenn die Bilder beim scrollen sichtbar werden.
Eine JavaScript Lösung, mit Retina Unterstüzung, bietet das Unveil.js.
In meinem Plugin modifiziere ich die Bilder automatisch oder über ein PHP-Code, so dass sie von dem Skript richtig genutzt werden können.
<?php echo lazy_retina_image( $image_id, $size, $attr ); ?>
Funktionen
Lazy Retina erstellt automatisch zu jeder vorhandenen Bildgröße eine Retina-Version, also die doppelte Größe. Das gilt auch für benutzerdefinierte Bildgrößen.
Je nach Pixeldichte (dpi) wird dann entweder die normale oder die Retina-Version (Breite ×2 und Höhe ×2) des Bildes geladen.
Vorraussetzungen
- jQuery oder zepto.js
- WordPress 3.8 oder höher
Demo
Scrolle nach unten um das Plugin in Aktion zu sehen. Die Bilder stammen übrigens vom Desktop Wallpaper Project.
Danke Finn. Das heißt ich wähle dann „Add default image link“ wenn ich nichts an den Links zu meinen Bilder ändern will?
Herzliche Grüße,
Simon
Ganz genau. :)
Danke dir! :-)
Hi Finn,
evtl. eine dumme Frage: Was genau unterscheidet die beiden Funktionen
• Remove only default image link
• Add default image link
von einander?
Herzliche Grüße,
Simon
Hallo Simon,
dumm ist die Frage nicht. Liegt wohl ehr an meinem schlechten Englisch. ;-)
Die Einstellung „Remove only default image link“ löscht nur den Standard-Link zu dem Bild. Wenn du einen anderen Link zu dem Bild einstellst, bleibt der aber bestehen.
Die andere Einstellung lässt einfach alles so wie es ist. Hätte ich wohl einfach „nichts machen“ nennen sollen!
Ich hoffe ich konnte dir damit helfen.
Viele Grüße,
Finn