Best way to hide images for responsive

[tomliv]

Hello list,

I know in the past, hidden images - even with display:none - would still get loaded by some browsers. Is there a way these days to prevent a hidden image from being loaded at all by any browser?

 

[JosiahMaybe]

I think this may not be what you are after but did you know you can make HTML load dynamically with PHP and Javascript? Like in Javascript div.innerHTML = (img content). In PHP, echo (img content). These ways do not load that img content because it is not in HTML yet, but I do not know of a solution other than this.
X E.

 

[JosiahMaybe]

I found loading="lazy" should work for that

 

[tomliv]

I found loading="lazy" should work for that

What I am looking for is the ability to hide content (preferably using CSS) on mobile and show on desktop, and any images in the hidden content NOT be loaded on mobile, reliably, under any circumstances.

 

[SGdash1]

If you just want to hide the image (or any HTML element) conditionally, you can do that easy enough with a CSS media query. That is just hiding it though. The image will still be loaded by HTML.

You can use a bit of JavaScript to prevent images from being loaded until you have checked the client. The nice thing is that disabling JS doesn't let a client get around it. The downside is that anyone on desktop with JS disabled won't have the images loaded for them. You would need to decide what matters and if this is an overall win or loss.

You can do it by using a data-* attribute in place of the src attribute for storing the URL/location of the image and then have JS use that to assign a src to the image so that it can be loaded after you have checked the client (or screen size if that is more of your concern).

HTML cannot load an image without a src so you get rid of the automatic loading concern by adding the src conditionally, only after the check to find out if it is a mobile or desktop.

Your image code in HTML might normally look like this.

<img id="myImage" src="initial_image.jpg" alt="This image has a src attribute and will load">

You would swap out the src with data-something, like this.

<img id="myImage" data-src="initial_image.jpg" alt="This image does not have a src attribute and will not load">

You would then use JavaScript to extract the value from the data-src attribute where you have the URL/location and assign it to a src attribute so that the image will load.

If you are worried about having to work with JS, the code you would need is not complex and it can be written to handle any images that share the same data-* attribute rather than a single image. Once it is set up you could add and remove images in your HTML whenever you wanted without needing to revisit the JS code.

 

[tomliv]

@mjh Interesting method. Thanks for taking the time to reply.

 

[simong1993]

Hey tomliv and everyone,

Big cheers for all the juicy info shared here. Loving the brainy vibes!

@mjh, thumbs up for diving deep into the data-src and JS method. It's a sturdy one, especially for those who're rolling with a JS environment.

<img id="adaptiveImage" data-src="path_to_image.jpg" alt="Alternative Text">

Swapping out the src with data-src? Neat. It holds back browsers from hoarding all those bytes when they don’t need to.

document.addEventListener("DOMContentLoaded", function() {
var imgElem = document.getElementById('adaptiveImage');
if (window.innerWidth > 768) { 
imgElem.src = imgElem.getAttribute('data-src');
    }
});

Your JS gist checks the window's width and, when it's roomy enough, lifts the data-src URL, and places it into the real src attribute, triggering the load. Clean!

@media (max-width: 768px) {
 #adaptiveImage {
 display: none;
    }
}

And voilà, CSS does the front-end magic, hiding the image for the smaller screens.

Here’s a little thought though: given the collective wisdom of the netizens here, could there be a method where we are leaning on the HTML and CSS guys more, keeping JS in the backseat? JS is mighty but if a user throws it in the bin (disables it), we might find ourselves in a tad bit of a pickle, especially for the desktop crew without JS.

Super curious if anyone’s bumped into an HTML/CSS-centric method or any fun workarounds?

 

[tomliv]

In the past, images hidden with display:none will still get downloaded by some browsers. Is that, in fact, still the case these days?

 

[SGdash1]

In the past, images hidden with display:none will still get downloaded by some browsers. Is that, in fact, still the case these days?

It does still apply. The browser doesn't consider the visibility of the element when it's fetching resources. The image will be requested and loaded into memory regardless of visibility changes made with CSS.

 

[tomliv]

It does still apply. The browser doesn't consider the visibility of the element when it's fetching resources. The image will be requested and loaded into memory regardless of visibility changes made with CSS.

Thanks for the replies and code snips

 

[JosiahMaybe]

It seems like there is no way to hide images without them loading without Javascript or PHP to edit img elements. You could start with an empty string for src if you want.

FREE AI Question Answering: Ask Online ChatGPT Any Coding Questions

Use artificial intelligence to ask any coding question online. Ask questions in any programming language and receive answers in your preferred spoken language.

zzzcode.ai

I asked that and apparently you may have a script after it that prevents it from loading with an src still set. With that you could have Javascript disabled and still load imgs but it will always load unless Javascript is enabled. I also asked basically your question of zzzcode.ai, it said no basically.

X E.