Microsoft Edge for Windows 10 Insiders aims for better responsive images with srcset

With Microsoft Edge, the company has freed itself from the legacy constraints of IE to build a truly modern browser.  One of the most pressing needs of a browser in today’s mobile first world is support for “responsive” images, that is, images that will look good on a full screen desktop, or a small phone screen, all without having to load a full set of image sizes to accomplish this.

According to a blog post on the Edge Dev blog, That’s what a new attribute of the img tag is for, and srcset will allow browsers to examine a set of images identified by the srcset attribute and the original src attribute, choose the one most appropriate for the conditions, and download only the image needed, saving space and bandwidth, and at the same time providing a better viewing experience.

The latest versions of Microsoft Edge shipping with Windows 10 Insider Preview supports some, but not all, of the srcset attribute, with Microsoft promising to add in the width descriptor in a future update, but it couldn’t be added in time for Edge to ship with Windows 10 on July 29th.

There are some complications that make Microsoft’s implementation of supporting srcset problematic. For one, a popular library called Picturefill, estimated by Microsoft to be used on millions of sites, in early versions doesn’t properly identify a browser’s capability to support srcset. To get around that, Microsoft has removed support for another responsive image attribute, currentSrc.  Apple’s Safari browser has done the same thing, and until Picturefill is updated in enough websites to cease being a problem, this works around images either not rendering or redirecting to error pages.

So, like Safari, Microsoft’s Edge isn’t shipping the full slate of new attributes to the img tag , but it is making use of srcset, and that’s a start.

If you’re a web developer, you can make use of srcset and gain its benefits for your Edge users, and if you’re using Windows 10 with Microsoft Edge, you’ll be able to load images faster, with less overhead, and take one step closer to a truly modern web.