Using responsive images in a real world scenario

Something descriptive

Read the blog post

If you're new to responsive images, you may want to read our in-depth blog post on the various technologies that make up responsive images and how they work under the hood, as well as how to utilize them.

Read on the dev blog

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.

An example of images on multiple 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:

A wireframe of the responsive site we'll be building.

Live Example

A portrait painting of a woman on a couch

Capturing dramatic lighting in portrait painting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu congue lorem. Nunc sagittis consectetur lectus, non volutpat massa iaculis porta. Duis vulputate est at tortor maximus condimentum. Cras tristique nec nisl sit amet dignissim. Sed interdum eget leo in hendrerit. Integer nisl nunc, posuere nec arcu non, tempor tincidunt enim. Quisque eget tortor ligula. Sed fringilla nisl id sem pretium elementum. Aenean in ex velit. Morbi aliquet ligula arcu, eget ornare mauris tempor eget. Vivamus purus dui, posuere sit amet tortor at, euismod consequat erat. Morbi elit turpis, malesuada a velit id, efficitur sollicitudin tellus. Donec vel sapien at mi ultricies iaculis.

Code

<article>
	<header>
		<img class="hero" src="imgs/hero-xlarge.jpg" alt="A portrait painting of a woman on a couch" />
		<h1 class="title">Capturing dramatic lighting in portrait paintings</h1>
	</header>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu congue lorem.
	   Nunc sagittis consectetur lectus, non volutpat massa iaculis porta.
	   Duis vulputate est at tortor maximus condimentum. Cras tristique nec nisl sit amet dignissim.
	   Sed interdum eget leo in hendrerit. Integer nisl nunc, posuere nec arcu non, tempor tincidunt enim.
	   Quisque eget tortor ligula. Sed fringilla nisl id sem pretium elementum. Aenean in ex velit.
	   Morbi aliquet ligula arcu, eget ornare mauris tempor eget. Vivamus purus dui, posuere sit
	   amet tortor at, euismod consequat erat. Morbi elit turpis, malesuada a velit id, efficitur sollicitudin tellus.
	   Donec vel sapien at mi ultricies iaculis.</p>
</article>

Improving performance by adding resolution switching

Now that we have the initial layout, it’s responsive, but some issues do exist that we responsive images can help with. The first issue is that while the image we included will work fine on all devices, it won’t be the best experience for people on a slower connection. The image that we are currently using is 2500x1435 and weighs in at 567KB (this is with 60% quality jpg compression) which is only desirable if you are on a high definition device or a large display.

Especially on mobile devices, you want to save memory usage and battery life by limiting the size of the image to what is actually needed. To do this, I have created three additional sizes along with the extra-large version, look at the associate table to see the download impact by providing the correct image for the correct device.

Image Dimensions File Size
hero-xlarge.jpg 2500 x 1435 567 KB
hero-large.jpg 1920 x 912 235 KB
hero-med.jpg 960 x 456 62 KB
hero-small.jpg 480 x 228 22 KB

Live Example

A portrait painting of a woman on a couch

Capturing dramatic lighting in portrait painting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu congue lorem. Nunc sagittis consectetur lectus, non volutpat massa iaculis porta. Duis vulputate est at tortor maximus condimentum. Cras tristique nec nisl sit amet dignissim. Sed interdum eget leo in hendrerit. Integer nisl nunc, posuere nec arcu non, tempor tincidunt enim. Quisque eget tortor ligula. Sed fringilla nisl id sem pretium elementum. Aenean in ex velit. Morbi aliquet ligula arcu, eget ornare mauris tempor eget. Vivamus purus dui, posuere sit amet tortor at, euismod consequat erat. Morbi elit turpis, malesuada a velit id, efficitur sollicitudin tellus. Donec vel sapien at mi ultricies iaculis.

Code

<img class="hero"
	src="imgs/hero-xlarge.jpg"
	sizes="100vw"
	srcset="imgs/hero-small.jpg 480w,
		imgs/hero-med.jpg 960w,
		imgs/hero-large.jpg 1920w"
	alt="A portrait painting of a woman on a couch">

Using the type attribute for improved download speeds and better image quality

We’re starting to get there, we have a responsive site that loads in the necessary image depending on the width of the viewport which gives us better performance but we can do better. By using a better image format we can further reduce the filesize for the browsers that support them. In this example I’ll only be using JPEG-XR, supported by Internet Explorer 9+ and Microsoft Edge, but you should consider compressing to WebP and MozJPEG depending on your use case. In the accompanied table you can see the JPEG-XR images to compare with the regular JPG images.

Now that we have the JXR images let's utilize the source element with the type attrivute to serve them only to browsers that can render them.

Image Dimensions File Size
hero-xlarge.jpg 2500 x 1435 567 KB
hero-xlarge.jxr 2500 x 1435 277 KB
hero-large.jpg 1920 x 912 235 KB
hero-large.jxr 1920 x 912 121 KB
hero-med.jpg 960 x 456 62 KB
hero-med.jpg 960 x 456 42 KB
hero-small.jpg 480 x 228 22 KB

Live Example

A portrait painting of a woman on a couch

Capturing dramatic lighting in portrait painting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu congue lorem. Nunc sagittis consectetur lectus, non volutpat massa iaculis porta. Duis vulputate est at tortor maximus condimentum. Cras tristique nec nisl sit amet dignissim. Sed interdum eget leo in hendrerit. Integer nisl nunc, posuere nec arcu non, tempor tincidunt enim. Quisque eget tortor ligula. Sed fringilla nisl id sem pretium elementum. Aenean in ex velit. Morbi aliquet ligula arcu, eget ornare mauris tempor eget. Vivamus purus dui, posuere sit amet tortor at, euismod consequat erat. Morbi elit turpis, malesuada a velit id, efficitur sollicitudin tellus. Donec vel sapien at mi ultricies iaculis.

Code

<picture>
	<source type="image/vnd.ms-photo"
		sizes="100vw"
		srcset="imgs/hero-small.jxr 480w,
				imgs/hero-med.jxr 960w,
				imgs/hero-large.jxr 1920w,
				imgs/hero-xlarge.jxr 2500w">
	<img class="hero"
		src="imgs/hero-xlarge.jpg"
		sizes="100vw"
		srcset="imgs/hero-small.jpg 480w,
				imgs/hero-med.jpg 960w,
				imgs/hero-large.jpg 1920w"
	 alt="A portrait painting of a woman on a couch">
</picture>

Using the media attribute for art direction

Now that we’ve improved our performance using resolution switching we can now focus on how the image actually looks when the viewport is at various sizes. On desktop viewports the layout works exactly like our wireframe suggested, but once we start getting to smaller viewports you start to see issues where the image gets really small and the headline begins to cover up the image.

Live Example

A portrait painting of a woman on a couch

Capturing dramatic lighting in portrait painting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu congue lorem. Nunc sagittis consectetur lectus, non volutpat massa iaculis porta. Duis vulputate est at tortor maximus condimentum. Cras tristique nec nisl sit amet dignissim. Sed interdum eget leo in hendrerit. Integer nisl nunc, posuere nec arcu non, tempor tincidunt enim. Quisque eget tortor ligula. Sed fringilla nisl id sem pretium elementum. Aenean in ex velit. Morbi aliquet ligula arcu, eget ornare mauris tempor eget. Vivamus purus dui, posuere sit amet tortor at, euismod consequat erat. Morbi elit turpis, malesuada a velit id, efficitur sollicitudin tellus. Donec vel sapien at mi ultricies iaculis.

Code

<source media="(max-width: 700px) and (orientation: portrait)"
	sizes="100vw"
	srcset="imgs/hero-med-vert.jpg 245w
		imgs/hero-large-vert.jpg 490w,
		imgs/hero-xlarge-vert.jpg 980w">

With this code update the browser will select the vertically cropped image if the viewport has a max-width of 700px and the orientation is portrait.

Comparing the initial image solution verses the solution utilizing responsive images

As you can see responsive images gives us the tools to not only avoid redundant downloads, but unlocks additional performance optimizations via the type attribute. Additionally it unlocks the capability for you to provide the best cropped image based on the layout of the image.

To close, let's compare our initial implementation to the solution that utilizes the technology behind responsive images.

With Responsive Images

A portrait painting of a woman on a couch

Capturing dramatic lighting in portrait painting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu congue lorem. Nunc sagittis consectetur lectus, non volutpat massa iaculis porta. Duis vulputate est at tortor maximus condimentum. Cras tristique nec nisl sit amet dignissim. Sed interdum eget leo in hendrerit. Integer nisl nunc, posuere nec arcu non, tempor tincidunt enim. Quisque eget tortor ligula. Sed fringilla nisl id sem pretium elementum. Aenean in ex velit. Morbi aliquet ligula arcu, eget ornare mauris tempor eget. Vivamus purus dui, posuere sit amet tortor at, euismod consequat erat. Morbi elit turpis, malesuada a velit id, efficitur sollicitudin tellus. Donec vel sapien at mi ultricies iaculis.

Without Responsive Images

A portrait painting of a woman on a couch

Capturing dramatic lighting in portrait painting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu congue lorem. Nunc sagittis consectetur lectus, non volutpat massa iaculis porta. Duis vulputate est at tortor maximus condimentum. Cras tristique nec nisl sit amet dignissim. Sed interdum eget leo in hendrerit. Integer nisl nunc, posuere nec arcu non, tempor tincidunt enim. Quisque eget tortor ligula. Sed fringilla nisl id sem pretium elementum. Aenean in ex velit. Morbi aliquet ligula arcu, eget ornare mauris tempor eget. Vivamus purus dui, posuere sit amet tortor at, euismod consequat erat. Morbi elit turpis, malesuada a velit id, efficitur sollicitudin tellus. Donec vel sapien at mi ultricies iaculis.

© Copyright "Samantha" Oil on Canvas by Karen Whitworth. All Rights Reserved.

About this demo

Contributors

Last updated

Oct 7, 2015

Contribute

Fork on GitHub to contribute

Categories

Share