Responsive Images

Now with superpowers

This plugin is very useful and it boosts performance delaying loading of images in long web pages because images outside of viewport (visible part of web page) won't be loaded until the user scrolls to them.

First steps

First of all call the module once (not once for any image). The body is a good place to include it.

<body data-fc-modules="image-responsive">

SEO friendly usage

Use the image for mobile devices on original src attribute and include the desktop version image source in a "data-src" attribute, so there's no need to define data-src-mobile attribute.

If you want to serve high-resolution images to devices with retina displays, you just have to include the source for those images in a "data-src-retina" attribute.

You don't need to include a "data-src-retina" attribute in all the image tags, unveil is smart enough to fallback to "data-src" or even do nothing in case there isn't any "data-src" specified.

<img src="mobile.png" data-src="desktop.jpg" />
<img src="mobile.png" data-src="desktop.jpg" data-src-retina="retina.jpg" />

Hightest speed mode but not SEO friendly usage

Use the same image src on original src attribute for all the images on your site and include the mobile and desktop version image source in their "data-src" attribute.

<img src="loading.gif" data-src-mobile="mobile.jpg" data-src="desktop.jpg" data-src-retina="retina.jpg" />

Scenarios

Seo Friendly Usage

  • All data-src-* defined except data-src-mobile

    data-src-mobile is not needed because the original src is defined

  • No data-src-retina defined

    Devices with more pixel density will show default images

  • Just data-src-retina defined

    Default src image will be used for all devices except for those with retina display

  • Not any data-src-* is defined

    Default src image will be used for all devices

Hightest speed mode (not SEO friendly) usage

  • All data-src-* defined

    First of all will load the loader.gif and then the proper image for your device. If you use the same loader.gif for all images you avoid a lot of http requests!

  • No data-src-mobile defined

    The image will show the loader.gif for mobile devices.

  • No data-src or data-src-retina defined

    The image will show the loader.gif on all devices except mobile

  • Not any data-src-* is defined

    The image will show the loader.gif on all devices