CODEWITHSUNDEEP
javascripthtmlcssresponsive-designcross-browser
Frankie
Frankie

Reputation: 31

Avoid downloading images on mobile

I'm working on a responsive website where all viewport versions share the same HTML/CSS. The problem is that I don't need all images from the desktop version displayed on the mobile version. I hide those elements with display: none in my CSS.

Nevertheless the browser downloads those images because the HTML gets parsed before CSS layout happens. But I just want to download the images which I need for the mobile version so I can reduce HTTP requests and the overall download size.

A solution for me was to use the <picture> element like this:

<picture>
    <source srcset="image.jpg" media="(min-width: 992px)">
    <img src="" alt="an image">
</picture>

The image will not download when the browser window width < 992px because I let the fallback source attribute empty src="". Unfortunately Safari doesn't support it yet. Therefore I don't want to use it.

Now I came up with my own JavaScript/JQuery stuff but I'm not sure if it's a good idea.

HTML:

<img src="" alt="img" data-device="mobile" data-src="img-mobile.jpg">
<img src="" alt="img" data-device="tablet" data-src="img-tablet.jpg">
<img src="" alt="img" data-device="desktop" data-src="img-dektop.jpg">

JavaScript:

function loadImages() {
    var mobile = window.innerWidth < 768;
    var tablet = window.innerWidth >= 768 && window.innerWidth < 992;
    var desktop = window.innerWidth >= 992;

    if(mobile) {
        $('[data-device]').each(function() {
            if($(this).attr('data-device') === 'mobile') {
                $(this).attr('src', $(this).attr('data-src'));
            }
        }); // end each
    } else if(tablet) {
        $('[data-device]').each(function() {
            if($(this).attr('data-device') === 'tablet') {
                $(this).attr('src', $(this).attr('data-src'));
            }
        }); // end each
    } else if(desktop) {
        $('[data-device]').each(function() {
            if($(this).attr('data-device') === 'desktop') {
                $(this).attr('src', $(this).attr('data-src'));
            }
        }); // end each
    }
}

$(document).ready(function() {
    loadImages();
});

$(window).resize(function() {
    loadImages();
});

The browser parses the HTML with empty src attributes. After the page finished loading, loadImages() will be called.

For example, if the browser width is < 768px. The function iterates through all elements with a data-device attribute. It will check the data-device value and if it's mobile it will take the value from the data-src attribute and puts it as a value to the actual image src attribute.

This means that the browser will just download and display the images for the mobile version of my site.

However, I don't like this. It looks like hacked together to get around this problem somehow. I mean there must be another solution to this because I'm sure that everybody who works with responsive sites will soon or later run into the same issue. I have googled this problem a lot but I haven't found a satisfying solution yet. Everybody is saying something different.

How you guys are tackling this problem? What is the best practice?

Upvotes: 3

Views: 1340

Answers (1)

Manuel
Manuel

Reputation: 416

I must say that your idea to workaround the issue looks good. Just another idea, how about replacing the img element for a div element and load a background-image using the @media styles in css for each device? That will load one or another image depending on which device is used, and I believe that is something lots of developers use these days.

Hope that helps!

Upvotes: 1

Related Questions