idea: make it easier to disable retina on mobile

[philfreo]

In some cases it makes sense to load retina images on retina devices, but only if they aren't mobile devices. In a responsive design, sometimes the non-retina version is already big enough to appear "retina" on mobile screens, and you don't want users on a cell internet connection to have to download too much.

I currently can work around it with some copy/pasting, but you could add an option or two that could make this easier for others. There could be a direct enabledForMobile setting, or a more generic retinaEnabledCallback.

// img.retina: load retina version if on retina device
$('img.retina').retina({ suffix: '@2x' });

// img.retina-large: load retina version only if on tablet/desktop
// (for when you don't want mobile to have to download huge images)
$('img.retina-large').retina({
    customFileNameCallback: function($this) {
        newImageSrc = $this.attr('data-retina') || $this.attr('src');
        if (!/Mobile/i.test(navigator.userAgent) ) {
            // Get filename sans extension
            var baseFileName = newImageSrc.replace(/.[^.]+$/,'');
            var baseFileExtension = newImageSrc.replace(/^.*\./,'');

            newImageSrc = baseFileName + '@2x.' + baseFileExtension; 
        }
        return newImageSrc;
    }
});

Another suggestion: make @2x the default suffix option, since that's the most common naming convention for retina images.

[tylercraft]

Thanks for the suggestions @philfreo I'm in the process of a move and probably won't have time to add these for a couple weeks. If you'd like to create a pull request, I'd love to view it and merge it.

[tylercraft]

It's a bit late I know, but I just added support for this. thanks for the suggestion!