[whatwg] New responsive images proposal

[Mateus Souza]

Hi guys,

I been watching the responsive images episodes and that make me create an
opinion and proposal about that. I dont know if someone else said the same
thing, but worth a try.

Today, we have obsessive concerns with img src attribute, to make an image
responsive and forgotten all other attributes, which need be responsive too.

The picture element says:

<picture width="500" height="500">
<source media="(min-width: 45em)" src="large.jpg">
<source media="(min-width: 18em)" src="med.jpg">
...

But the responsive thing is to make a image responsive. Large.jpg and
med.jpg do not have the same width and height for example. This is not
semantic.
In Art Direction requirements [1], all image variation do not have the same
alt attribute necessarily. I can describe the images in multiple ways...

My proposal is to add one more attribute to images, an only that. We all
know the media attribute in stylesheets, and i think that is the best
sintax. Would look something like:

<img src="large.jpg" media="screen and (min-width: 800px)"...
<img src="small.jpg" media="screen and (max-width: 300px)"...

This would cause a duplication of the img tag. but thinking about it, we
really have two images and thus the code is more semantic.

I have created one repository to explain the proposal in more details [2].
If you guys are interested, please visit the link, fork and optimize.

In short terms, we need make the showing and loading of existent images
responsive, not just change the src attribute.

What you think about that?

[1] - http://usecases.responsiveimages.org/#art-direction
[2] - https://github.com/mateus007/responsive-images

Mateus Souza