Resizing a large image to be viewed on smaller devices would be the slowest method for the smaller device. It would have to load the higher file size image rather than a small dedicated image with a more compact file size. Resizing an image in the browser does not change its file size.
However if the image sizes are close in size then there may be little benefit and of course makes the maintenance easier.
I used it on one of the site I was working on recently, but most of the images used on that side are fairly small to begin with, so I haven’t really had a chance to put it through rigorous testing. But–it does seem to work as advertised.
I read recently, to my surprise, that it’s not so cut and dried that a device won’t donwload a background image not targeted at it. A bit disappointing, really.
But all the same, having to prepare multiple images is a bit of a pain. That’s why I’m rather enamored of this approach—which is focused on the retina issue, but which offers a viable solution for the mobile image issue, too, I feel: basically make the image quite large and then save it at a low resolution to keep the file size down. I guess this may create issues as far as background images go, though that is helped with the new CSS3 background-size properties, which are supported in the more recent browser versions.
Yes, I’ve seen that before and its an interesting read. It has always been the case that most browsers will download images that are in the html source (whether hidden with css or not) so there was no real surprise there. The surprise is that background images in media queries will not over-ride previous background images unless the previous background images are themselves in an exclusive media query. Over-riding an image via a media-query will result in both images being loaded apparently.
This would seem to suggest that although media queries follow the cascade they are done so at a later point when the assets have already been loaded.
Normally when you over-ride backgrounds in a single stylesheet only the last background image is loaded. Indeed we know from experience that background images in a normal stylesheet are not loaded until they are called for on the page. Otherwise we wouldn’t need the sprite approach to stop the flicker when swapping an image in a rollover and indeed the stylesheet would load every single image in the site and not just those on the current page and would take forever. I didn’t see any mention of this in the results so I don’t know how it all ties in together.
The method in the OPs first post where images are exclusive to each media query should result in only one image being loaded at a time.
It would be helpful if browsers makers would simply come out and tell us what really happens.