A better responsive image with 1x1 px PNG? - html

Question

I love the way img tags work in responsive design. It resizes proportionally and expands the div that contains it. The problem is that the image is the same pixel count in every size, which is terrible for mobile devices.
I thought of a way to use a 1x1 pixel PNG image with a width and height attribute in the markup to define the proportion. This way, your div will resize proportionally, based on the PNG, and you can swap out the backgrounds with media queries. And you can use it multiple times throughout your page, with only one http request.
Are there any issues with this way of attacking responsive images?
.container {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
border: 1px solid blue;
background-image: url(large.png)
}
#media screen and (max-width: 968px) {
.container {
background-image: url(small.png)
}
}
img {
width: 100%;
height: auto;
}
<div class="container">
<img src="1x1.png" width="5" height="1">
</div>

Answer 1

If your goal is to minimize HTTP requests, HTML5 provides the <picture> element:
4.8.2 The picture
element
The picture element is a container which provides multiple sources
to its contained img element to allow authors to declaratively
control or give hints to the user agent about which image resource to
use, based on the screen pixel density, viewport size, image format,
and other factors.
With this element you can allow the browser to select the appropriate image based on a media query:
<picture>
<source srcset="large.png" media="(min-width: 1000px)">
<source srcset="standard.png" media="(min-width: 600px) and (max-width: 999px)">
<source srcset="small.png" media="(max-width: 599px)">
<img src="standard.png" alt="accessibility text here"><!-- graceful degradation -->
</picture>
Just note that this element does not yet enjoy universal browser support: http://caniuse.com/#search=picture
Here's a polyfill if necessary: https://scottjehl.github.io/picturefill/
References:
The <picture> element ~ MDN
Better Responsive Images With the picture Element ~ envatotuts+
Built-in Browser Support for Responsive Images ~ HTML5 Rocks

Answer 2

Yes, there's a problem with accessibility. Images in html are mean to be… Well, meaningfull. So you're putting unmeaningfull images in html and meaningfull images in CSS, where they have absolutely no intereset for a screen reader (for example).
Moreover, I guess you're planning to load big images to handle retina displays, on devices that do not need them, and just "resize down"?
You have better ways to handle mobile devices pixel-size, like srcset: https://developer.mozilla.org/en/docs/Web/HTML/Element/Img#Example_3_Using_the_srcset_attribute
Or the picture element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
http://caniuse.com/#feat=srcset
http://caniuse.com/#feat=picture