Share this article
Latest news
With KB5043178 to Release Preview Channel, Microsoft advises Windows 11 users to plug in when the battery is low
Copilot in Outlook will generate personalized themes for you to customize the app
Microsoft will raise the price of its 365 Suite to include AI capabilities
Death Stranding Director’s Cut is now Xbox X|S at a huge discount
Outlook will let users create custom account icons so they can tell their accounts apart easier
Microsoft explains using extended srcset and responsive images on the Edge browser
2 min. read
Published onOctober 7, 2015
published onOctober 7, 2015
Share this article
Read our disclosure page to find out how can you help Windows Report sustain the editorial teamRead more
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 robustecosystemof apps. Earlier smartphone visionaries pictureda world where the web and web appswould 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 inWindows 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 guidanceon 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 aTest Drive demoto get live examples of how the new technologies work with its Microsoft Edge browser.
Kareem Anderson
Networking & Security Specialist
Kareem is a journalist from the bay area, now living in Florida. His passion for technology and content creation drives are unmatched, driving him to create well-researched articles and incredible YouTube videos.
He is always on the lookout for everything new about Microsoft, focusing on making easy-to-understand content and breaking down complex topics related to networking, Azure, cloud computing, and security.
User forum
0 messages
Sort by:LatestOldestMost Votes
Comment*
Name*
Email*
Commenting as.Not you?
Save information for future comments
Comment
Δ
Kareem Anderson
Networking & Security Specialist
He is a journalist from the bay area, now living in Florida. He breaks down complex topics related to networking, Azure, cloud computing, and security
