Create a gist now

Instantly share code, notes, and snippets.

The New Img Tag (evolved)
<img src="large-default-file.jpg" media="screen and (min-width:601px)" alt="this is alternative text for default file" title="this is title for default file">
<source src="smaller.jpg" media="screen and (max-device-width:600px)" alt="this is alternative text for smaller file" title="this is title for smaller file">
<source src="tiny.jpg" media="screen and (max-device-width:320px)" alt="this is alternative text for tiny file" title="this is title for tiny file">
<source src="monochrome.jpg" media="monochrome" alt="this is alternative text for monochrome file" title="this is title for monochrome file">
</img>
@anselmh
Owner
anselmh commented Jan 24, 2012

I edited this gist (now here: https://gist.github.com/1668965) to improve the syntax and compatibility to common and already used style.
This provides the possibility to use real media-queries as syntax and detect also features like monochrome display (Kindle etc.).
We also could use alt and title text there. Thing is, browser-vendors need to implement it that way so the current alt text and title text is replacing the original one. But I think this isn’t a problem.

@anselmh
Owner
anselmh commented Jan 24, 2012

And stay updated about the W3C draft proposal here: http://novolo.de/blog/2012/01/19/what-happened-to-responsive-assets/
It will be soon on a W3C mailing list, I hope to get docs finished by end of the week.

@ike
ike commented Jan 24, 2012

Wow... thanks for the fork. I had no idea this was going to go anywhere. Please keep me informed about the status of the W3C proposal.

Thanks a mil,
Isaac

@anselmh
Owner
anselmh commented Jan 24, 2012

It's a great proposal and along with mine we now have two valid options which I propose to the W3C soon. So I hope to get this real as it's a problem we should face as soon as possible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment