Consider the following example:
<noscript>
<img class="photo" src="example.png">
</noscript>
Does the client only download the image file if they have Javascript disabled? (I'm aware the client can only see the image if Javascript is disabled in this example)
The reason I'm asking is because I've been using base64 data URIs for several background-image properties in an external CSS (avoiding http requests). I would like to also use base64 data URIs for the src value of some img tags by updating their values via external Javascript (to retain benefits of caching).
Essentially, the whole point of this is to avoid/limit http requests and so I was wondering if I can degrade gracefully and only fetch the image files if Javascript is disabled? Or is the image downloaded regardless?
Short Answer:
NO, images are NOT downloaded inside a <noscript>
element
Technical Answer:
I had just been doing some testing on my personal website for functionality with JavaScript disabled, and came across this article… with JavaScript still disabled, btw.
Well, at the very top of this web page, Stack Overflow have a warning message which states:
“Stack Overflow works best with JavaScript enabled”
Being the type of web geek who tends to “view source” at practically every single website I look at (!), the HTML code for the message is as follows:
<noscript>
<div id="noscript-warning">Stack Overflow works best with JavaScript enabled<img src="http://example.com/path/to/1x1-pixel.gif" alt="" class="dno"></div>
</noscript>
Nothing too ground-breaking there. However, what interested me was the IMG
element, which referenced a 1px by 1px invisible image.
I am assuming that this image must be used by analytics/statistics software to detect how many of their users are browsing without JavaScript. If this assumption is correct (and there isn’t any other reason for using a blank 1x1 pixel image here that I’ve overlooked here), therefore this would basically confirm the following: browsers do not download the contents of anything within a NOSCRIPT
element, except in the situation that JavaScript is actually disabled. (And there certainly does not seem to be any retro ’98-style layout techniques going on, I am glad to say!) ;-)
(P.S. – I hope that I don’t somehow offend anyone at the Stack Exchange network for pointing this out!)