CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Dónal
Dónal

Reputation: 187529

skip downloading of images on small screens

On pages like this one I show a list of artists that will be appearing at a festival. On small screen sizes (e.g. cell phone) the artist images are hidden with a media query rule:

@media (max-width: 480px) {
    .artistEntry img {
        display: none;
    }
}

In order to speed up page rendering and reduce the amount of content on the page. However, AFAIK, the image will still be downloaded, so the page load time is quite sluggish on small devices. Is there a way to prevent the image from being downloaded on a small screen?

Upvotes: 1

Views: 171

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25495

I like the suggestion from @joe regarding background images. If that's not a good fit for your site another approach which might work for you is Adaptive Images

It will automatically resize the images based on the user's viewport and breakpoints you set. If it would work for you, you get the best of both worlds ... you get to keep the images for mobile users plus you get faster downloads

Good luck!

UPDATE

Looking at your page in more detail, I think the problem is largely because you have a lot of images and since you aren't defining the image sizes in the page HTML, the browser has to download all the image thumbnails and determine their size before it can start layig out the page. In my testing, it took about 12 sec before the page starts to render.

I have 2 ideas to speed things up.

Include image sizes for all the artist thumbnails. Doing this will make the page start rendering earlier.

Alternatively, instead of showing all the artists in by default, I'm wondering if you could let isotope do some of the heavy lifting for you. If you showed just the headline artists by default, I'm reasonably sure that this would speed up the percieved page speed by about 50%. You could check by changing this section of the HTML 

<div class="spacer" id="lineup-filter">
<h4>Filter Lineup by Artist</h4>
<label class="lineup-toggle">
<input type="radio" name="lineup"  id="all-artists">Show All Artists</label>

<label class="lineup-toggle">
<input type="radio" name="lineup" checked="checked" id="headline-artists-only">Show Headline Artists Only</label>

</div>

Upvotes: 1

Related Questions