Strategies for Responsive Images

Images are important pieces of information and how they are shared on the web should vary across different devices.  A large image may look great on a desktop, but may appear differently on a smaller screen.  Without responsive design, that image may cover too much real estate on a smaller screen.

Responsive images have always been a concern for developers. When presenting images on the web, we want to enable the browser to resize the images appropriately. Responsive images refers to a method for providing the browser with a list of image sources depending on resolution, the size of the image on the webpage, or other cases.

There are many methods to solve responsive images. But, Write Here, Write Now, we’ll focus on two major methods and their use cases: responsive images using the <picture> element and responsive images using srcset.

Responsive Images Using Picture Element

Sometimes you need to make changes to the content or aspect ratio of an image to show a particular feature of an image. This method is referred to as art direction. Typically art direction is used:

• To crop an image
• To change the orientation of an image
• To change how text flow on an image

A large image may show plenty of detail on a large screen, but is reduced to show only relevant information for smaller screens like the example of the image from Nokia’s website.

This same image has been cropped to fit a particular viewport (screen size) to effectively communicate their message.  As the viewport gets smaller, the image is cropped to remove some of the background and emphasize the woman. If they just scaled the image down to fit the screen, then the woman would be barely visible.

Art direction can mean changing the orientation like you see in the following example. 

Each image changes from portrait on a large screen, to landscape on a smaller screen so the content isn’t lost as the screen size changes.

• 

For images that contain text, we can change the content (text and picture) and aspect ratio, like in the following example.

If Nokia just resized the image, then the text would be too small to read. Instead, they used a different picture for smaller viewports, moved the text, and changed the aspect ratio to make the picture taller.

Now let’s get coding!

To solve the art direction problem, you need the following elements and attributes:

<picture> To specify different images depending on device characteristics.
<img> and srcset To dictate what image the browser must use.

• 

What does this mean?

The largest image size is the first source (min-width: 900px). It’s media attribute tells the browser that this first source should be used if the viewport is 900px or greater.

The media attribute of the smallest image size tells the browser to use the second source, (min-width: 750px), if the viewport is equal to or greater than 750px, and less than 900px.

If no media query matches the list, then the <img> is used.  

Responsive Images Using SRCSET

If you want to provide different sizes of an image, but not change its content or aspect ratio, then consider using the resolution switching method. Unlike the picture element used in art direction, srcset presents a choice of multiple images and their true widths to enable the browser to select the best image.

View the Guardian website as an example.

They use resolution switching to tell the browser what the size of the image will be in relation to the screen size and how that relationship changes as the size of the screen changes. 

Now let’s get coding!

To get started, you must include the srcset and sizes attribute. The sizes attribute contains a list that describes the size of the image in relation to the viewport size.

• 

What does it mean?

When the browser reads the list of values, it selects the value that meets the media condition.

If the viewport is 400 pixels or smaller, (max-width: 400px) 55vw, then the image will be 55% of the viewport width (vw). When none of the media conditions are met, then the default value, 250px, is used.

Conclusion

There are so many methods to solving responsive images that it can be challenging to figure out the best method for your image. To know what method works best, you must know what use case you’re planning for. Art direction and Resolution Switching are key methods to use. For more use cases to help you build responsively, check out The W3C Working Group.