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.

Mike-Dornseif-wallpaper-1440x900

jesse-ledoux-wallpaper-1440x900

hvass-hannibal-wallpaper-1440x900

christopher-david-ryan-wallpaper-1440x900

Ben-Wallis-1440x900


Downloaden oder zur WordPress Pluginseite gehen.

Schlagwörter: , ,

Ähnliche Artikel

Abonnieren Sie den RSS-Feed meines Blogs oder verfolgen Sie die Kommentare dieses Artikels.

5 Kommentare

  1. Simon sagt:

    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

    • Finn sagt:

      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

  2. Simon sagt:

    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


Schreib einen Kommentar