What Img Srcset Does In HTML5: A Quick & Simple Guide

Attribute of

HTML Tags Guide To Adding Images To Your Web Documents

What does What Img Srcset Does In HTML5: A Quick & Simple Guide do?

Defines multiple sizes of the same image, allowing the browser to select the appropriate image source.

The Problem: Different Resolutions and Screen Sizes

This is probably obvious to you (we hope), but not everyone browses the internet with the same size screen. We use everything from oversized desktop monitors to tiny screens we keep in our pockets. This presents some challenges around how we deal with page design, including images.

And it isn’t just size — resolution is an issue as well. 4K HD monitors and Apple’s Retina display are packing more pixels than ever into a smaller space, and that trend is likely to continue. to make images look good on these screens, the source files need to be much larger — two, three, or even four times the size of images intended for conventional displays.

A Terrible Solution: Giant Images for Everyone

One way to handle support for high-resolutions screens is to simply serve the biggest image you can all the time.

This almost a good idea. Low-rez and small-size screens can display the giant, high-def image with no problem. They just won’t see any benefit.IT will look basically the same to them as if you had given them an image half the size. So, the user experience improves for the high-end viewers and every one else is unaffected. Great, right?

Hopefully, you can see the problem here. Providing much larger images does not leave everyone else unaffected. They still have to download them. This costs them bandwidth, and it costs you bandwidth. It also slows down their page load times and uses up more of their computer’s memory.

A Better Solution: Serve Different Images to Different Visitors

What you really want to be able to do is serve the largest image that actually makes a difference to each user. If someone can see you high-quality, high-resolution, gigantic image, then you want to serve it to them. But to someone visiting you on a 5-year-old smart phone, you want to give them a smaller image.

Easy right?

The Old Way(s)

The first wave of solutions to this problem involved complex media queries, JavaScript, or server-side image selection. They were difficult to setup, complicated to understand, and somewhat error prone. Worst of all, they required you (well, your system) to figure out which image version to select. This required a lot of guessing, and put the burden of future improvements on your website’s code.

But, thanks to HTML5, we can do all this pretty easily.

The New Way: srcset

Using the srcset attribute has made responsive image sizing much simpler. It allows you to define a list of differently-sized versions of the same image, and provide information about the size of each one. Then, the client (browser) gets to make the decision.

This last part is particularly worth noting, because the client device actually knows what it is capable of, whereas your website code has to make queries and guesses to figure it out. Moreover, browser technology continues to improve, whereas most website designs are on the “set it and forget it” development cycle.

Using srcset

There are two parts to using srcset — creating the individual files, and then the markup.

Individual File Sizes

First, you need to create several different sized versions of the same image. This is slightly different depending on whether you are using photographs and existing artwork or creating new artwork from scratch.

In either case, you’ll usually want to create at least four versions of each image: a “normal” sized one, and then one at twice the size (2x), three times (3x), and four times (4x). When you create your images, it is helpful to append a size specification to each files:

• image-1x.jpg
• image-2x.jpg
• image-3x.jpg
• image-4x.jpg

This doesn’t make any difference to the browser, but it will your life easier. Also, note that you could create more versions at different size (larger, smaller) and there is no limit to the number of source files specified in the srcset attribute. However, general practice seems to have settled on four sizes (at least for now).

New Artwork

With new artwork, the job is easy. You are probably using something like Adobe Illustrator or Inkscape to create your images. When you export them, simply export them at different sizes. (The naming example above uses .jpg. Don’t forget that most non-photographic artwork looks better with a PNG.)

(As a side note, if you are creating purely vector graphics, and you can export to SVG, you should do that instead and ignore this entire thing. SVG files are infinitely scalable, look great on all screens regardless of resolution, and are now supported in all current browser versions.)

Existing Artwork and Photography

The trick here is to start with the biggest possible image, or — at least — the biggest image you plan to serve up. Then scale it down to each individual version.

• Largest or original — image-4x.jpg
• Scaled down to 75% — image-3x.jpg
• Scaled down to 50% — image-2x.jpg
• Scaled down to 25% — image-1x.jpg

The Markup

The srcset attribute allows you to specify a list of image file URLs, along with size descriptions. Yo ualso need to still use the src attribute to identify a “default” image source, to be used in browsers that don’t support srcset.

The markup looks likes this:

<img
 srcset="
  url size,
  url size,
  url size
 "
 src="default url"
>

(We know, it seems weird to have an HTML tag take up multiple lines, but it makes it much easier to keep track of.)

In the live examples below, we’ll use the following images:

• flamingo4x.jpg — 4025 × 2672 — 3.8 MB
• flamingo3x.jpg — 3019 × 2005 — 3.7 MB
• flamingo2x.jpg — 2013 × 1337 — 1.9 MB
• flamingo1x.jpg — 1006 × 668 — 338 KB
• flamingo-fallback.jpg — 1006 × 668 — 108 KB

Notice the file size difference between 1x and 4x. The 4x version is over 11 times larger. This is why you should not serve the high-quality images to low-resolution screens.

Specifying Image Density

The more common way to to set include size information in the srcset attribute is to label each file by image density. You do this by putting 1x, 2x, 3x and so forth after the URL. This works if you have made the different images in proportion to each other (which we did).

<img
 srcset="
  /wp-content/uploads/flamingo4x.jpg 4x,
  /wp-content/uploads/flamingo3x.jpg 3x,
  /wp-content/uploads/flamingo2x.jpg 2x,
  /wp-content/uploads/flamingo1x.jpg 1x
 "
 src="/wp-content/uploads/flamingo-fallback.jpg"
>

If you open the contextual menu (right-click or two-finger-tap) on the image above and open the image ina new tab, you can see which version your browser selected.

Specifying Image Width

The other way to inform the browser about the different sizes is to actually specify the image width in pixels. This has some advantages, it seems, because it gives the browser more information about the images, so it can make a better decision about which one to select. This is also good if your image versions aren’t in exact proportion to each other. (That might be the case if they were auto-resized by your Content Management System or if you downloaded them as different sizes from a site like WikiMedia Commons or Flikr.)

For image width, you use a w instead of an x.

<img
 srcset="
  /wp-content/uploads/flamingo4x.jpg 4025w,
  /wp-content/uploads/flamingo3x.jpg 3019w,
  /wp-content/uploads/flamingo2x.jpg 2013w,
  /wp-content/uploads/flamingo1x.jpg 1006w
 "
 src="/wp-content/uploads/flamingo-fallback.jpg"
>

Speed Up Rendering with sizes

If you are using a srcset to specify width, the browser has to make some decisions about which image to download. Unfortunately, it can’t figure that out until it knows the rendered size of the image — how large it will actually appear on the screen.

You can let the browser wait to figure this out (once it has parsed all the CSS), or you can give it enough information ahead of time so that it can start loading the correct image right away. This information can be provided with the width and height attributes.

Image Density vs. Width. Which one to choose?

Based on non-scientific surveys (i.e. looking around), it seems that image density (2x, 3x, 4x) is more common. However, there are some good reasons for preferring to specify pixel width:

• more flexible — You can create more size variations, at non-regular multiples.
• easier — Many CMS, website builders and image-sharing sites already create or provide multiple image sizes. You can simply use them without making sure they are exactly proportionate to each other.
• smarter — Specifying actual width in pixels provides more information to the client browser, which means it is more likely to be able to select the most appropriate image for the context.

While either way should work, it is probably the case that specifying exact image widths is the best way to go.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for srcset

Not supported.	38	38	13	9	25