Responsive Images for Everybody

by Joe McGill

Slide 1

Slide 1 text

RESPONSIVE IMAGES  FOR EVERYBODY Joe McGill @joemcgill

Slide 2

Slide 2 text

Avg. web page size May 2015 2 MB

Slide 3

Slide 3 text

Images = 1.3 MB

Slide 4

Slide 4 text

TL;DR We are visually oriented, but we need to be responsible with our use of images.

Slide 5

Slide 5 text

RICG Responsive Images Community Group

Slide 6

Slide 6 text

¯\_(ツ)_/¯ Just Use JavaScript™

Slide 7

Slide 7 text

New HTML Tools • The element • The srcset attribute • The sizes attribute • *Pictureﬁll for compatibility

Slide 8

Slide 8 text

800px 400px Resolution Switching

Slide 9

Slide 9 text

Resolution Switching • Screen size • Pixel density • Layout changes (e.g., grids)

Slide 10

Slide 10 text

Art Direction

Slide 11

Slide 11 text

Art Direction

Slide 12

Slide 12 text

the image element a photo

Slide 13

Slide 13 text

srcset & x descriptors a photo

34 38 Edge* 21 7.1/iOS 8.3

Slide 14

Slide 14 text

srcset & w descriptors a photo

38 38 TBD 25 9*/iOS9

Slide 15

Slide 15 text

srcset + sizes = ! a photo

Slide 16

Slide 16 text

38 38 TBD 25 9*/iOS9

Slide 17

Slide 17 text

Slide 18

Slide 18 text

RICG Responsive Images Plugin https://wordpress.org/plugins/ricg-responsive-images/ WP Slack: #feature-respimg

Slide 19

Slide 19 text

Pictureﬁll  http://scottjehl.github.io/pictureﬁll/ • UPDATE TO 2.3.1 (pretty please) • Using src & srcset can cause double downloads in some browsers

Slide 20

Slide 20 text

Learn more • responsiveimages.org • Jason Grigsby: Responsive Images 101 (blog.cloudfour.com) • Eric Portis: Responsive Images in Practice (A List Apart)

Slide 21

Slide 21 text

THANK YOU Joe McGill @joemcgill • joemcgill.net