How to Use HTML5 “picture” for Responsive Images

We all know that responsive design is the way to go. The web is meant to be accessible by any and all devices.

So far so good until we start serving images to those devices. We often have to choose between two options: give everyone poor quality images, or give everyone high-quality images.

The problem with the first option is that it provides a bad experience for those on high-resolution devices like computers or even some recent smartphones.

The second option can be extremely wasteful for smaller devices like smartphones which have to heavily load those images making the experience poor due to unnecessary waiting time.

New markup to the rescue

Over the last few years, the issue of responsive images has been more heavily addressed by the web community. They came up with three new markup attributes:

  • srcset
  • sizes
  • picture

Scaling your images with srcset

The default method of embedding an image into a web page is pretty standard.

<img src="photos/dog.jpg" alt="My demo photo of a dog, Baxter." />

You can scale your image thanks to the srcset attribute.

<img srcset="photos/dog-large.jpg 1920w,
photos/dog-medium.jpg 960w,
photos/dog-small.jpg 480w" 
src="photos/dog-medium.jpg" alt="My demo photo of a dog, Baxter." />

The srcset is an array of photos in addition to their width descriptor (1920w, 960w, 480w). The first parameter is the location of the image whereas the second one is its width. You can also use ratios like 1x, 2x or 3x. The beautiful thing about srcset is that it automatically chooses the appropriate image size for the device. There is also a fallback for browsers that do not yet accept srcset with the good ol’ src.

Selecting image sizes

The next thing we need to do is provide the images with their appropriate layout sizes. That’s where the sizes attribute comes in. So far in the above example the size of the image was automatically set to be the same as paragraph size. What if the image is smaller than that? That’s again where sizes comes in handy.

<img srcset=”photos/dog-large.jpg 1920w,
        photos/dog-medium.jpg 960w,
        photos/dog-small.jpg 480w”

sizes=”(min-width: 400px) 10em, 5em”

	src="photos/dog-medium.jpg"
	alt="My demo photo of a dog, Baxter." />

Okay, what does all of that jargon mean? Simple, it’s a conditional statement, if the min width of the screen (the viewport) is 200px then the image will be 10em. Otherwise, it will be 5em. It can take any CSS length value such as em, vw or px.

Scaling your images with picture

So far we have looked at how to scale our images. Sometimes that’s not enough. The srcset method allows us to automate the photo selection while using picture gives us more control of how we display our images. This second method allows us to tailor the image’s content to a specific device. If you ever cropped or edited an image to fit better into a different device screen, you can now use picture to help you do just that.

By the way, there are two parts to the picture method. First is the picture tag – it’s a tag unlike the previous one being attributes to the img tag. The second is using the source tag within the picture tag to source the image.

<picture>
	<!-- original photo -->
	<source media="(min-width: 400px)"
		srcset=”photos/original/dog-large.jpg 1920w,
        	   photos/original/dog-medium.jpg 960w,
        		   photos/original/dog-small.jpg 480w” />
	<!-- small, cropped photo -->
	<source srcset="photos/cropped/dog-large.jpg 1920w,
        	   photos/cropped/dog-medium.jpg 960w,
        		   photos/cropped/dog-small.jpg 480w” />
<!-- fallback -->
	<img src="photos/original/dog-medium.jpg"
		alt="My demo photo of a dog, Baxter." />
</picture>

There are in fact many pieces within this code. First, based on the comments, notice that we are in fact progressively enhancing this photo experience for browsers that don’t support this yet. Second, we are still sourcing images based on their site. But we can also source them by their shape. For every device which min-width is greater we will be using the original photo, whereas every other device will get the cropped one. Within those two device types we are still giving them appropriate ones automatically thanks to srcset.

Use the media tag to condition how you’d want to separate the images, do you want them by max-width or orientation instead? Go for it, it’s a media tag after all; all is fair game.

Sourcing by type

We can further enhance our image selection thanks to course’s type attribute. Now, if you want to get super detailed things will get redundant quickly. The reason for this is that each of the image types need to be on its own line of markup because we need code without it for browsers that do not support it. That’s a shame, but so it goes.

<picture>
	<!-- original photo -->
	<source media="(min-width: 400px)"
		srcset=”photos/original/dog-large.jpg 1920w,
        	   photos/original/dog-medium.jpg 960w,
        		   photos/original/dog-small.jpg 480w” />
	<!-- small, cropped photo -->
	<source srcset="photos/cropped/dog-large.jpg 1920w,
        	   photos/cropped/dog-medium.jpg 960w,
        		   photos/cropped/dog-small.jpg 480w” />
<!-- fallback -->
	<img src="photos/original/dog-medium.jpg"
		alt="My demo photo of a dog, Baxter." />
</picture>

There are in fact many pieces within this code. First, based on the comments notice that we are in fact progressively enhancing this photo experience for browsers that don’t support this yet. Second, we are still sourcing images based on their site. But we can also source them by their shape. For every device which min-width is greater we will be using the original photo, whereas every other device will get the cropped one. Within those two device types we are still giving them appropriate ones automatically thanks to srcset. 

Use the media tag to condition how you’d want to separate the images, do you want them by max-width or orientation instead? Go for it, it’s a media tag after all; all is fair game. 

Sourcing by type
We can further enhance our image selection thanks to course’s type attribute. Now, if you want to get super detailed thing will get redundant quickly. The reason for this is that each of the image types need to be its own line of markup because we need code without it for browsers that do not support it. That’s a shame, but so it goes. 

<code><pre class="prettyprint"><picture>
	<!-- original photo -->
	<source type=”image/webp”
		media="(min-width: 400px)"
		srcset=”photos/original/dog-large.jpg 1920w,
        	   photos/original/dog-medium.jpg 960w,
        		   photos/original/dog-small.jpg 480w” />
	<source media="(min-width: 400px)"
		srcset=”photos/original/dog-large.jpg 1920w,
        	   photos/original/dog-medium.jpg 960w,
        		   photos/original/dog-small.jpg 480w” />
<!-- cropped photo -->
	<source type=”image/webp”
		media="(min-width: 400px)"
		srcset=”photos/cropped/dog-large.jpg 1920w,
        	   photos/cropped/dog-medium.jpg 960w,
        		   photos/cropped/dog-small.jpg 480w” />
	<source media="(min-width: 400px)"
		srcset=”photos/cropped/dog-large.jpg 1920w,
        	   photos/cropped/dog-medium.jpg 960w,
        		   photos/cropped/dog-small.jpg 480w” />
<!-- fallback -->
	<img src="photos/original/dog-medium.jpg"
		alt="My demo photo of a dog, Baxter." />
</picture>

All of this is not ideal when you are dealing with a multitude of images but at least it’s a step forward in making responsive images a possibility.

Plan for deprecation

Like I said, all of this code seems redundant but that’s because there is still no smooth way to make it happen. Yet, you do need all of this code in order to provide for depreciation for browsers that do not support the attributes and tags we’ve talked about.

Over time this will change, of course, but for now we have to deal with browsers that are behind the times. I’ve mentioned in the beginning of this post that this is a great way to keep web images easily accessible and tailored for a multitude of devices. Which is why, as tedious as this may be, it’s a great idea to include in your site development.

I have also mentioned that this is a way to add progressive enhancement. It’s also true. Either way you look at it, this type of image sorting is helping both the new and able browsers display the tailored images as well as the older browsers to still display the needed images.

Conclusion

However you slice it, responsive design is important to implement. Although images may be a hassle this post explains to you a wonderful way for you to adapt your images to better fit the desired device and screen. Now go forth and make some amazing looking pages!

Advertisement