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?

THE OBESITY PROBLEM Source: http archive >60% from images

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

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

<SRCSET> AND <PICTURE> Responsive image solution native to the browser. Refer to latest specification for all the details.

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 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... Join the Responsive Images Community Group . Sign up for their newsletter . Follow the RICG on Twitter .

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