Now that we have gone over the building blocks of how to do resolution switching for images, let’s talk about art direction.
This will be available starting in an upcoming Windows Insider preview build. Note: We mentioned in June that we had to remove the currentSrc API, which gives you access to the selected source in srcset, but since we’ve implemented picture we have added it back in. Let’s take a look at an example using the original srcset syntax:
Normally browsers don’t know anything about an image until they download it, so sizes allows a site to provide some of that information ahead of time so the browser can make smarter decisions about which images it should download. With srcset and sizes, the browser takes both the device resolution and the layout size of the image into account when selecting the best image. This is sufficient for sites with static layout, but in a responsive layout this can result in the browser downloading an asset that isn’t necessary for the image’s size on screen. A responsive site should deliver the most appropriate image to every device, taking into account how the image is being displayed and even what sort of network its users are on.īasic srcset provides simple resolution switching, but only takes the device resolution into account. The first characteristic we discussed above is resolution switching. Let’s dig in to the new technologies to understand how each of these complement and build upon one another to provide a comprehensive responsive images solution. The combination of srcset, sizes, and picture allows you to embed images with all of these characteristics so that your users have a great experience on any device or screen size.
Finally, the focus of the image should adapt to device and viewport dimensions to ensure the primary subject of an image is always prominently in. Second, it should be served in an efficient format that is supported by the user’s browser, to achieve smaller file sizes without compromising quality. The only real solution seems to be to wait until MS fix this.Want to skip right to it? Visit our interactive Test Drive demo to see srcset and picture in action.Īn image is fully responsive if it has three principal characteristics: First, it should download at an appropriate resolution to provide best quality image for the user’s device and based on the expected layout dimensions of the image. The one possible solution seems to be rather OTT, adding the image to a canvas and rescaling that, but if you've got more than one or two images, this can cause serious lag: This same issue has been reported and confirmed as a bug by the Edge team twice, since at least November 2016, with no fix.Īnd there are several other posts about it here on SO. (That demo is from a comment on a MS blogpost from 2013: so it's been talked about for at least four years now!)
Really digging into the history, here's another demo - from 2013! Here's another post from August 2015 about this issue, so it's definitely nothing new! Here's a thread on an MS forum about it (note how some people are bizarrely desperate to wish the problem away, blaming it on graphics cards!): Recently MS seem to have fiddled with it, but they've certainly not fixed it. The issue actually pre-dates the release of Edge. And sometimes, just sometimes, an image seems to remain smoothly scaled! (It seems that one way to definitely re-create the problem is to re-size an image after the page is loaded, such as setting the size in your JSfiddle to 50x50px - in Edge, the image resizes and looks awful, but in other browsers the result is smooth.) I can confirm your experience of seeing a brief flash of smoothly-rescaled image, too. Poor-quality downscaling of images is a known problem in Edge, and has been for years now.