Data-src and displaying image in HTML5 without Javascript?

Question

When browsing http://www.capitalfm.com/yorkshire/radio/schedule on Tuesday's part of the page, I noticed this in their HTML code:

 <img src="https://static.capitalfm.com/assets_v4r/gusto/img/default_image_show.svg" alt="Aimee Vivian" data-src="//mediaweb.musicradio.com/player/image.aspx?i=///mediaweb.musicradio.com/artwork/ses/80c200b8-e5b4-481e-b9d1-a8f371577c99&w=364" />

When I set Firefox to View > No Style it displayed the microphone icon as in data-src.

I'm trying to emulate this in my HTML as:

    <img src="imagdir/city-generic.jpg"

         alt="Washington D.C."
         data-src="imgdircities/washington-dc-1.jpg"

    />
</a>

Is this possible within HTML5 to display a stock image with data-src like the first image I mentioned?

I've done a simple test page in HTML with no jQuery or JavaScript; is it possible to run data-src without it or not?

I'm trying to offer something for both a reader who does have Javascript enabled, and something for someone who disables it, so that it satisfies both parts of the readership.

It's a testing page at the moment with no major CSS, that's the only reason I have no live example.

I would appreciate any advice.

Answer 1

You should be using picture element for that purpose. Here's an example extracted from the docs:

 <picture> <source srcset="/media/examples/surfer-240-200.jpg" media="(min-width: 800px)"> <img src="/media/examples/painted-hand-298-332.jpg" /> </picture>