Using Responsive Images (Now)

By Chen Hui Jing / @hj_chen

So you want to build a responsive website?

All the devices

The obesity problem

Fat Homer
Page weight statistics, Oct 2015 Source: http archive

>60% from images

Lose-lose situation

Blurry image on HD 5K display?

All the devices

5mb pixel-dense image on 3.8inch Nokia phone?

All the devices

Potential solutions

WURFL.js Requires additional development effort for it to place nice in your project
Adaptive image Server-side solution; Dependent on PHP; May need to mess around with server configuration
Using cookies Mostly experimental; Not advisable for production sites
Hack <img> Not scalable for image heavy sites; Fails validation; Not semantic

<srcset> and <picture>

Responsive image solution native to the browser.

Refer to latest specification for all the details. Modern browsers

Some background

Jing

🎮 🏀 🚲 💻 👟

My name is Chen Hui Jing.

Self taught designer and developer.

Work at Nurun Singapore.

Write blog posts from time to time.

The <srcset> attribute

Declare comma-separated list of image sources, which browsers will serve according to certain conditions we specify using descriptors.

Descriptors

x descriptors indicate the pixel-density of an image

w descriptors indicate the width of an image

The <sizes> attribute

Specify the intended display size of the image

Must be present if w descriptors are used

Syntax: <media-condition> <CSS length>

You can't use percentages for the second condition.
The only relative CSS lengths you can use are viewport units.

sizes="(max-width: 400px) 100vw, 
       (max-width: 960px) 75vw, 
       640px"

Fixed width images

USWNT crest
<img srcset="crest-383.jpg 1.5x, crest-510.jpg 2x" 
     src="crest-255.jpg" 
     alt="USWNT crest" />

Fluid width images

USWNT World Cup victory
<img srcset="uswnt-480.jpg 480w, 
             uswnt-640.jpg 640w, 
             uswnt-960.jpg 960w,
             uswnt-1280.jpg 1280w" 
     sizes="(max-width: 400px) 100vw, 
            (max-width: 960px) 75vw, 
            640px" 
     src="uswnt-640.jpg" alt="USWNT World Cup victory">

The <picture> element

A wrapper for the image and its sources.

Will not work without an <img> element.

<picture>
   <source media="(min-width: 40rem)"
           srcset="full-large.jpg 1024w,
                   full-medium.jpg 640w,
                   full-small.jpg 320w"
           sizes="33.3vw" />
   <source srcset="cropped-large.jpg 2x,
                   cropped-small.jpg 1x" />
   <img src="full-small.jpg" alt="An awesome image" />
</picture>

The <source> element

Allows us to declare multiple sets of image sources.

Syntax: <media attribute>|<type attribute> <srcset attribute>

<source media="(min-width: 1280px)" srcset="wide-large.jpg 1280w, wide-medium.jpg 960w, wide-small.jpg 640w" sizes="33.3vw">
<source media="(min-width: 960px)" srcset="cropped-large.jpg 960w, cropped-medium.jpg 720w, cropped-small.jpg 480w" sizes="50vw">
<source srcset="narrow-large.jpg 2x, narrow-small.jpg 1x">

Art direction use-case

USWNT ticker-tape parade
<picture>
  <source media="(min-width: 960px)" srcset="ticker-tape-large.jpg">
  <source media="(min-width: 575px)" srcset="ticker-tape-medium.jpg">
  <img src="ticker-tape-small.jpg" alt="USWNT ticker-tape parade">
</picture>

Image format use-case

Order of source matters.

Falls back to original <img> element.

<picture>
  <source type="image/vnd.ms-photo" src="wwc2015.jxr">
  <source type="image/jp2" src="wwc2015.jp2">
  <source type="image/webp" src="wwc2015.webp">
  <img src="wwc2015.png" alt="WWC 2015">
</picture>

Can I use...srcset?

Can I use srcset?

Can I use...picture?

Can I use picture?

Polyfill

The go-to polyfill for responsive images is Picturefill by Scott Jehl.

To find out more...

Native Responsive Images by Yoav Weiss

Responsive images get real with Mat Marquis

The anatomy of responsive images by Jake Archibald

Srcset and sizes by Eric Portis

Responsive Images 101 by Jason Grigsby

For latest updates...

Responsive Images Community Group

Join the Responsive Images Community Group.

Sign up for their newsletter.

Follow the RICG on Twitter.

THE END

Websitehttp://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing