Why do we need responsive images?

Why do we need responsive images?

The suite of technologies that make up responsive images (srcset, sizes, and picture) are all necessary to allow a developer to target the best image for the given device and expected layout. If you don’t have these capabilities then you’ll need to depend on JavaScript to switch out the correct image which results in more image downloads than necessary for the site and slower performance since JavaScript can’t react until the DOM is ready in most cases. With srcset you get the capability to do basic resolution switching, with sizes this provides enhanced resolution switching, and with picture you are provided art direction and image format selection. Let’s start digging into the new technologies to understand how each of these compliment and build upon one another to provide a comprehensive responsive images solution.

 

picture-example-devices

The usecase

You have a client that is an artist, they want a blog where they provide the story behind the painting and they want as much imagery as possible. In the wireframe you can see that your designer mocks up a blog where the art piece being featured is in the header with the title on top of it. On smaller viewports the hero image becomes like a magazine cover with the image and title filling the majority of the viewport.

So let’s get started with the basic layout and initially we’ll start with no responsive images so that we can see how they help us out. Let’s see what we have:

Wireframe

Read More Here: https://dev.windows.com/en-us/microsoft-edge/testdrive/demos/picture/