How we fixed responsive images

The past couple weeks I’ve been reading about the new srcset and sizes syntax that promises the elimination of endless media queries to determine which image should be rendered at which screen size. Honestly, at first they appeared a bit daunting, but after staring at my screen for the last couple of hours I’m convinced they are the (immediate) future of responsive images. 

The exciting aspect of this new solution is that I can tell the browser exactly what elements it has at its disposal, and give it some simple rules to follow when deciding which image to show our user.

Why not just use media queries? 

Browsers don't know about anything that hasn't loaded. They are, however, aware of the environment they’re rendering within. This means the size of the viewport, the resolution of the user’s screen are all instantly accessible to the browser. 

How do we use this to our advantage?

The basics

Using the srcset and size syntax we’re able to tell the browser which images it has at its disposal and what the max width to display them is at any screen size and resolution. The advantage of this over media queries is, the browser is actually much smarter than we are, so it can tell if a mobile browser comes in with a 3x retina to serve the largest image as well as if a 1x tablet browser comes it can serve it the medium image. This is much more effective than writing media queries based on every possible screen size and resolution. 

Example

 

Explanation

Let’s break it down.

srcset=”large.png 1200w, medium.png 600w, small.png 350w”

This is fairly self explanatory. Srcset takes a comma separated list of urls to images that you’ve given it to render. Each image's width is specified using the w descriptor. In this example the large.png has been exported at 1200px wide. You can also use 1x and 2x descriptors, but don’t use both w and 1x/2x. This is an either/or situation.

The second piece that the browser needs to pick a source to display is the sizes parameter. 

sizes=”(min-width: 600px) 600px, 100vw”
sizes=”[media query] [length], [media query] [length]”

This allows us to pair media queries with lengths. These are slightly different than our usual CSS media queries. They’re telling the browser our breakpoints ahead of the CSS loading in, leading to a faster decision. 

What is that 100vw hanging out at the end? This is the length parameter. It can be represented in exact dimensions (px/em) or relative dimensions (%/vw). Vw represents the viewport width. 

Taking it a step further

We can now have the browser intelligently decide which image to serve based on the viewport dimensions, image size relative to the viewport, screen density and source file dimensions. Yet we still have to export all of those images ourselves!

Brandisty to the rescue

With Brandisty’s image API we’re able to take in the largest version of your image and output it, programatically on request, to any dimension.

This means you will only have to produce one file while still reaping all of the amazing benefits of responsive images. 

Let's take a look at an example using my beautiful mug.

From Brandisty’s API I can grab my headshot at 1200px wide:
https://cdn.brandisty.com/img?id=533243162e5dbf600d00000d&w=1200&h=800

I can also grab it at 600px wide:
https://cdn.brandisty.com/img?id=533243162e5dbf600d00000d&w=600&h=400

Also 350px wide:
https://cdn.brandisty.com/img?id=533243162e5dbf600d00000d&w=350&h=233

Keep in mind I only uploaded one image to Brandisty. By simply changing the w and h parameters at the end of our url, Brandisty will resize and deliver our image assets on demand.

Putting it all together

If we were to take our original example and use Brandisty’s API to grab different image sizes we can see how easy responsive images become.


Since srcset and sizes are only available in the latest version of Chrome 34 and Opera 21 utilizing Scott Jehl's responsive poylfill in the meantime will allow your site to be retrocompatable until IE and Firefox adopt the latest specs.

Additional resources

  1. Responsive Images Done Right: A Guide To <picture> And srcset (Smashing Magazine) [link]
  2. #133: Figuring Out Responsive Images (CSSTricks) [link]
  3. Srcset and sizes (Eric Portis) [link] - my personal favorite
  4. The new srcset and sizes explained (Martin Wolf) [link]

PS: If you're looking for some intelligent tools to distribute your brand assets we've built Brandisty just for you!