Created — forked from ike/imgtag.html

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

The New Img Tag (evolved)

View imgtag.html
1 2 3 4 5
<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>
Owner

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.

Owner

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 commented

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

Owner

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
Something went wrong with that request. Please try again.