Mobile operating systems with small to negligent market shares are looking towards a more responsive web to champion as an equalizer over the dreaded “app gap”. Systems such as Sailfish, BlackBerry and Windows Phone, all ‘suffer’ from not housing a robust ecosystem of apps. Earlier smartphone visionaries pictured a world where the web and web apps would be used over platform native apps. Unfortunately, the future of web apps has not quite panned out, but that doesn’t mean companies aren’t still hard at work on making it so.
Microsoft, for instance, started using extended srcset and picture element support with Microsoft Edge in Windows Insider Preview build 10547. With support for the new technologies, the Edge browser can now address responsive images. Older implementations of responsive design required developers to provide full responsive image solutions through JavaScript. That method of execution resulted in duplicate downloads, slower load times of sites and degraded performance as a result of executing logic on the a UI thread. The new tools now enable web developers to tailor their image size and art directions to an adaptive layout.
Recently, Microsoft has offered developers some guidance on what its believes are the principles of responsive images.
An 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. 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. Finally, to the focus of the image should adapt to device and viewport dimensions to ensure the primary subject of an image is always prominently in. 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.”
Microsoft’s simple developer principles also include width descriptors, size attributes, tying sizes together with srcset, and improving performance by adding resolution switching.
Microsoft is offering developers a Test Drive demo to get live examples of how the new technologies work with its Microsoft Edge browser.
