Stop images from loading

Hi all. I have some images on my home page that I have set to display only on mobile and not large screens. I am using display: none. I understand the image will still load even thought it wont display. Is there a way to keep the images from loading too?

If you were talking about displaying different versions of an image to different screens, then I would recommend the srcset attribute or picture element.

This is a slightly odd request, because you are only displaying on the smaller screen, where bandwidth may be more of an issue.

To not show any image, and not load the image on one screen size, you may need to make the image a background image in css, then use a media query to decide when the background is displayed. I think most browsers then won’t load the image. There were some tests done on this, I don’t recall the exact results.

3 Likes

Not displaying at all is what Im trying to accomplish. I will try the background image option! Thank you!

If you were using something like PHP or JavaScript, you could dynamically define when the image is displayed. For example, you would echo the HTML which shoulds the image in one scenario, and then not echo the HTML when you want nothing.

There may be a more eloquent way of doing things, but this is what I would do.

This is actually a wordpress theme so I am using php. I’m not sure how to do what you are saying but I will do some research and see if I can make it work.Thank you for the idea.

The code would be something like…

<?
if (mobile_device) {
echo "<img src="mobile.jpeg" alt="" height="50" width="50">";

}else{
echo "<img src="desktop.jpeg" alt="" height="250" width="250">";
}
?>

But this is probably a more efficient way…

Actually you bring up a good point and I wonder how the gurus here would do this?

Such as using HTML as SamA74 already suggested

<picture>
    <source srcset="mobile.jpeg" media="(max-width: 500px)">
    <source srcset="desktop.jpeg">
    <img srcset="desktop.jpeg" alt="">
</picture>
1 Like

Can you explain more what your code does?

Both options have a different image for each query. I want the image to load and show on mobile, but not load or show on large screen nor do I want it replaced on the large screen. How would I do this? Would this work if I used a data uri:

<picture>
    <source srcset="mobile.jpeg" media="(max-width: 500px)">
    <source srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
    <img srcset=""data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="" alt="">
</picture>

@SamA74’s link in post #2 has a detailed explanation.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.