We want high-resolution screens to get high-resolution images, but we don’t want to send those images to users who wouldn’t see all of those extra pixels.

Our images need to be able to render crisply at different device-pixel-ratios.

the ways in which we want our images to adapt. The time to start learning this stuff is now!īefore we get to any of the ( shiny! new!) markup, let’s look at the relevant ways in which browsing environments vary, i.e. The new specification has achieved broad consensus and is being implemented in Chrome, Opera and Firefox and Edge ( link) as I type. It gives authors semantic ways to group multiple versions of the same image, each version having technical characteristics that make it more or less suitable for a particular user. The latest specification of the element is the result of years of debate on how to make images adapt. Images have been the number one obstacle to implementing truly adaptable and performant responsive pages - pages that scale both up and down, efficiently tailoring themselves to both the constraints and the affordances of the browsing context at hand. Authors - wanting their images to look crisp in huge layouts and on high-resolution screens - began sending larger and larger sources to everyone the average size of an image file ballooned very smart people called responsive web design “ unworkably slow”. HTML authors began to really feel these limitations when high-resolution screens and responsive layouts hit the web like a one-two punch.

And perhaps the great promise of the web, far from fulfilled as yet, is accessibility, regardless of difficulties, to information.' 'Everything I’ve said so far could be summarized as: make pages which are adaptable.… Designing adaptable pages is designing accessible pages. Everything about them has been stubbornly fixed: their size, format and crop, all set in stone by a single src.

Images are some of the most important pieces of information on the web, but over the web’s 25-year history, they haven’t been very adaptable at all. There is [no reason to wait for responsive images we can actually have them very soon

Today’s article complements Tim Wright’s article and explains exactly how we can use the upcoming element and srcset, with simple fallbacks for legacy browsers. A few days ago, we published an article on Picturefill 2.0, a perfect polyfill for responsive images.

Resolution for picture sizes