tylercraft / jquery-retina Goto Github PK

If the image has a max-width of 100% and the original is 300 px wide by 200px and it floats in the text, then when it's swapped it will be 600 px by 400 px and it won't wrap any more. What can be done about this? Anyway for the another tag like (this is made up) data-width="300" data-height="200" so it scales down to that size and then is also responsive that is the max width is 300px and the height is variable. I'm getting very confused with this retina stuff.

initializing the hi-DPI images if any of the following CSS conditions are met:
https://gist.github.com/3446599

If the 'jQuery-Retina' script was updated to read the x2 image location from the srcset attribute instead it would work as a great polyfill for srcset.

So jQuery retina markup would read:
< img src="/image-x1.png" srcset="/image-x2.png 2x" >

and read/display the image-x2.png from the scrset attribute. This way we can get rid of the data-retina attribute from our markup and modern browsers like Chrome (from v34 onwards) would use the srcset attribute.

Ref: http://blog.chromium.org/2014/02/chrome-34-responsive-images-and_9316.html

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.