Allows you to specify an alternative image for screens with high PPI (pixels per inch), like the 'Retina' screens from Apple devices. Please note that this module will work for any screen that has high PPI, not only for the 'Retina' screens.

The high resolution image needs to be specified in the data-retina attribute, as seen below:

<div class="as-panel">
    <img class="as-background" src="path/to/image1.jpg" data-retina="path/to/image1@2x.jpg"/>

<div class="as-panel">
    <img class="as-background" src="path/to/blank.gif" data-src="path/to/image2.jpg" data-retina="path/to/image2@2x.jpg"/>

<div class="as-panel">
    <a href="">
        <img class="as-background" src="path/to/blank.gif" data-src="path/to/image3.jpg" data-retina="path/to/image3@2x.jpg"/>

It's a naming convention to add the '@2x' suffix for the high resolution version of the image.

As you can see, it's possible to use lazy loading and high resolution images at the same time.

This module is showcased in example1.html, example2.html and example3.html.

Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk