Is an image within a noscript tag only downloaded if Javascript is disabled?

Question

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?

Answer 1

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!)

Answer 2

The HTML 4.01 specification says just that the content of noscript is not rendered in certain situations. However, this suggests that browsers should not perform any GET operations on the basis of its content in such situations, since such operations would be pointless and would reduce efficiency.

The HTML5 draft is more explicit and probably reflects actual browser behavior. It says about the noscript element, in an emphatic note: “it works is by essentially ‘turning off’ the parser when scripts are enabled, so that the contents of the element are treated as pure text and not as real elements”. (The note relates to why noscript does not work when using the XHTML syntax, but it also reveals the principle by which it works, when it works.)

So we can expect that when scripting is enabled, the content of noscript won’t even be parsed (except to recognize the end tag). Blender’s answer seems to confirm this, and so does my little experiment with Firefox:

<img src=foo style="foo: 1">
<noscript>
<img src=bar style="bla: 1">
</noscript>

Firefox makes a failing GET request for foo but no request for bar, when scripting is enabled. In addition, it shows a warning about erroneous CSS code foo: 1, in the error console, but no warning about bla: 1. So apparently the img tag was not even parsed.

However, I don’t see how the question relates to the scenario presented as a reason for asking it. I think you use an img element outside noscript and put there, using data: URL, the desired initial content (which will remain, as fallback, the final content when scripting is disabled).