WordPress Plugin: Lazy Retina

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.

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.