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 of all call the module once (not once for any image). The body is a good place to include it.
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" />
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" />
data-src-mobile is not needed because the original src is defined
Devices with more pixel density will show default images
Default src image will be used for all devices except for those with retina display
Default src image will be used for all devices