How to use <noscript> element alongside "responsive" served images loaded via Javascript

I am using a small Javascript tool called rwd.images.js (https://github.com/stowball/rwd.images.js) to responsively load images based on CSS media queries. The markup ends up looking like this:

<img class="rwdimage" data-rwdimage="(max-width:768px){src:url(imglo/ph_home_waterfront_1.jpg);},(min-width:769px){src:url(img/ph_home_waterfront_1.jpg);}" data-category="Waterfront 1" data-link="waterfront-1.htm" alt="Waterfront 1" />

Open in new window


Since these images are useless in a browser with no Javascript capability, I believe my next best option is to use <noscript> to allow them to fallback gracefully (yes?).

This is what I've come up with?

<img class="rwdimage" data-rwdimage="(max-width:768px){src:url(imglo/ph_home_waterfront_1.jpg);},(min-width:769px){src:url(img/ph_home_waterfront_1.jpg);}" data-category="Waterfront 1" data-link="waterfront-1.htm" alt="Waterfront 1" /><noscript><img src="imglo/ph_home_waterfront_1.jpg" alt="Waterfront 1" /></noscript>

Open in new window


I removed the data tags that would also be useless without Javascript. I haven't really tried this kind of thing before, so I'm  just looking for advice... is what I'm doing the best approach? Any suggestions on a better way to handle it?

Thanks!
Brad BansnerWeb DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Then you would end up with a broken image for the first one.
Though you could add a class to your responsive images, add some CSS in a noscript tag that hides the responsive images

In this day and age using a browser with js disabled pretty much excludes you from using the internet period
Tell people to enable js or use a browser with js
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
duncanb7Commented:
You can use css to do it that let you more flexibility, for example code as follows

Duncan
<html>
<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

<body>
    <p class="jsonly">You are a JavaScript User!</p>
</body>
</html>

Open in new window

0
Brad BansnerWeb DeveloperAuthor Commented:
I keep hearing conflicting things from people about supporting no-JS. Maybe that time has passed and I should just ignore users with no JS, that is always an option. There are always some developers who insist on supporting every possible variation of browser, browser version, JS vs. no-JS, which CSS selectors will work, etc. But I tend to agree, you have to draw the line somewhere.

Aren't there still a lot of people browsing the web on non-smart phones? Maybe things have really changed that much in the past year or two (which would be nice).
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

GaryCommented:
Aren't there still a lot of people browsing the web on non-smart phones
Maybe they are but should you spend 20% of your time on 0.5% of your visitors.
Thats why some many sites no longer support IE8 because the work to time ratio is not worth it just make the site work in IE8
And smartphones are so damn cheap these days anyway
0
Brad BansnerWeb DeveloperAuthor Commented:
@duncanb7 - so that would be an example of the CSS workaround that Gary was suggesting, I think. To make it so broken images don't appear on the site.
0
GaryCommented:
I tried to find some stats on non js browsers/js disabled, latest data is from nearly 5 years ago where it stood around 2%, I would be surprised if it is even over 0.5% at this point.
0
GaryCommented:
Found something from the UK government
https://gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/

0.2% of people have non js browsers.
0
duncanb7Commented:
Dear Author,

I search it from google internet and just only find style change to do noscript besides old one   such as at
http://www.w3schools.com/tags/tag_noscript.asp

Is it  worth to care about who don't use javascript ? just up to you

Duncan
0
Brad BansnerWeb DeveloperAuthor Commented:
Thanks for your input!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.