USING RESPONSIVE IMAGES (NOW) By ChenHuiJing / @hj_chen SO YOU - - PowerPoint PPT Presentation

USING RESPONSIVE IMAGES (NOW)

By / Chen Hui Jing @hj_chen

SO YOU WANT TO BUILD A RESPONSIVE WEBSITE?

Source:

>60% from images

THE OBESITY PROBLEM

http archive

Blurry image on HD 5K display? 5mb pixel-dense image on 3.8inch Nokia phone?

LOSE-LOSE SITUATION

POTENTIAL SOLUTIONS

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

<SRCSET> AND <PICTURE>

Responsive image solution native to the browser.

Refer to for all the details. latest specification

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

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

FLUID WIDTH IMAGES

<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" <source media="(min-width: 960px)" srcset="cropped-large.jpg 960w, cropped-medium.jpg 720w, cropped-small.jpg 480w" <source srcset="narrow-large.jpg 2x, narrow-small.jpg 1x">

ART DIRECTION USE-CASE

<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...PICTURE?

POLYFILL

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

TO FIND OUT MORE...

by with by by by Native Responsive Images Yoav Weiss Responsive images get real Mat Marquis The anatomy of responsive images Jake Archibald Srcset and sizes Eric Portis Responsive Images 101 Jason Grigsby

FOR LATEST UPDATES...

Join the . Sign up for their . Follow the RICG on . Responsive Images Community Group newsletter Twitter

THE END

http://www.chenhuijing.com @hj_chen @hj_chen @huijing