I was neck deep in this very issue for most of today. It is surprising that there is no usable solution to this issue without resorting to what seem like pretty

I was neck deep in this very issue for most of today. It is surprising that there is no usable solution to this issue without resorting to what seem like pretty awful methods. If I am wrong about this please do let me know. Based on what I found today, there are a couple of ways to handle the problem of variable sized images. If anyone knows others please do tell. 1. Use picture and srcset with a polyfill (Picturefill). With this you end up with verbose markup as well as needing stuff like "<!--[if IE 9]><video style="display: none;"><![endif]-->" to make it work. It also results in requests to multiple images for browsers that support srcset but not picture, meaning twice as many images are downloaded. Many browsers are in this group with the current or next versions. 2. Use javascript. This is the method employed by various saas solutions that I looked at, and there are of course libraries that you can use yourself. Waiting for javascript to execute before the images can start being pulled down has obvious problems. 3. User agent sniffing. This method requires server side logic to implement, and relies on data that in many cases will not result in an appropriately sized image being rendered. Is there another way? Has anyone got a workable solution to this and could give a recommendation?