Retina Devices in web developing: Do I still need to have 2x images?

Question

A lot of the information about Retina devices comes from ~2013 but not much recently.

It seems like, for example in retina.js, it includes anything with a device pixel ratio of > 1.5 to be "retina", but don't all smartphones have well over 1.5 these days? My desktop computer does as well.

My question then, why not just always serve the highest possible resolution images you have access to instead of creating the half-sized versions for "non-retina" devices, which as far as I know don't really exist much and won't suffer much from being served a higher resolution image.

Thanks!!!

Answer 1

Using 2x images is a huge pain.

Who can know what is "best," but I'm currently working with images in a combo like this:

I use a parent element so that the image will fill it - and that parent/or it's ancestors will determine any limits. You can use the picture element. (usually, the src are supplied by a CMS or something {{image.small.url}} etc.

The official answer to your questions would be, that people don't serve the higher res file to everything - because the file is bigger and they want the site to load as fast as possible. / but if you double the images size (twice as big as it will ever be presented, and compress to ~40 or so) then use the parent element to size it - it's actually a smaller file size. There are very specific studies on this. I don't know how that works for painting and browser rendering, though.

MARKUP

<figure class='poster'>
    <img src='' alt=''
        data-small='http://placehold.it/600'
        data-medium='http://placehold.it/1000'
        data-large='http://placehold.it/2000'
    />
</figure>

STYLES (stylus)

figure // just imagine the brackets if you want
    margin: 0
    img
        display: block
        width: 100%
        height: auto

.poster
    max-width: 400px

SCRIPT

$(document).on('ready', function() {

    // $global
    var $window = $(window);
    var windowWidth;
    var windowHeight;

    function getWindowDimentions() {
        windowWidth = $window.width();
        windowHeight = $window.height();
    }

    function setResponsibleImageSrc(imageAncestorElement, container) {
        var large = false; // innocent until proven guilty
        var medium = false; // "
        var context;
        if ( !container ) {
            context = windowWidth;  
        } else {
            context = $(container).outerWidth();
        }
        var large = context > 900;
        var medium = context > 550;

        $(imageAncestorElement).each( function() {
            var $this = $(this).find('img');
            var src = {};
            src.small = $this.data('small');
            src.medium = $this.data('medium');
            src.large = $this.data('large');
            if ( large ) {
                $this.attr('src', src.large);
            } else if ( medium ) {
                $this.attr('src', src.medium);
            } else {
                $this.attr('src', src.small);
            }
        });
    };

    $window.on('resize', function() { // this should jog a bit
        getWindowDimentions();
        setResponsibleImageSrc('.poster', 'body');
    }).trigger('resize');

});

It all depends on what you are doing - and there is no silver bullet yet. The context for each image is so unique. My goal is to get in the ballpark for each size - keep the images compressed to 40 in Photoshop on export... double the size they should be, and then the parent squishes them for retina. The size is actually smaller in most cases.

CodePen example: http://codepen.io/sheriffderek/pen/bqpPra