Why Responsive Images? - Speaker Deck

Slide 1

Slide 1 text

Responsive images have landed

Slide 2

Slide 2 text

Shipped Development

Slide 3

Slide 3 text

Why Responsive Images? Jason Grigsby • @grigs • cloudfour.com Photo by http://www.gratisography.com/

Slide 4

Slide 4 text

Why can’t I let go of responsive images?

Slide 5

Slide 5 text

http://www.flickr.com/photos/cdm/51747860/ 1. Responsive images provide interesting puzzles.

Slide 6

Slide 6 text

Use Cases https://www.flickr.com/photos/cgb_bbear/3082932860

Slide 7

Slide 7 text

https://www.flickr.com/photos/whitehouse/8491445521 Resolution Switching Includes high-density (retina) images.

Slide 8

Slide 8 text

Art direction http://www.flickr.com/photos/barackobamadotcom/5795228030/

Slide 9

Slide 9 text

http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction

Slide 10

Slide 10 text

http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction

Slide 11

Slide 11 text

http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction

Slide 12

Slide 12 text

http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction

Slide 13

Slide 13 text

Not simply cropping

Slide 14

Slide 14 text

Art direction: Images with text

Slide 15

Slide 15 text

image breakpoints

Slide 16

Slide 16 text

http://www.gratisography.com/ Art direction may dictate image breakpoints

Slide 17

Slide 17 text

https://www.flickr.com/photos/photosdavidgabrielfischer/15706338457 Image breakpoints for resolution switching.

Slide 18

Slide 18 text

For responsive design breakpoints, resize the browser until the page looks bad then… BOOM! you need a breakpoint.

Slide 19

Slide 19 text

2000 x 3010 761K 200 x 301 15K How many image breakpoints?

Slide 20

Slide 20 text

2000 x 3010 761K 200 x 301 15K Scaled down images don’t look bad.

Slide 21

Slide 21 text

2000 x 3010 250K 400 x 602 Actual size in page 800 x 1204 73K

Slide 22

Slide 22 text

2000 x 3010 250K 400 x 602 Actual size in page 800 x 1204 73K 600 x 903 42K

Slide 23

Slide 23 text

400 x 602 Actual size in page 800 x 1204 73K 600 x 903 42K 500 x 753 31K 450 x 678 27K

Slide 24

Slide 24 text

400 x 602 Actual size in page

Slide 25

Slide 25 text

400 x 602 Actual size in page Is the only intrinsic information we have about image size.

Slide 26

Slide 26 text

In the responsive layouts I’ve worked on, content image sizes and their breakpoints were chosen for completely diﬀerent reasons than the design (CSS) breakpoints: the former for sensible jumps in file size to match screen dimension and/or density, and the latter for how content modules are visibly designed at given viewport dimensions. —Scott Jehl, Filament Group http://lists.w3.org/Archives/Public/public-whatwg-archive/2012May/0613.html “

Slide 27

Slide 27 text

What is a sensible jump in file size?

Slide 28

Slide 28 text

Images compress diﬀerently Both images are 960x660 pixels 151K, JPEG 13K PNG

Slide 29

Slide 29 text

Responsive Images Performance Budget

Slide 30

Slide 30 text

Source image: 500x333 58K What is the cost of flexible images?

Slide 31

Slide 31 text

Source image: 500x333 58K What is the cost of flexible images? Size in page: 300x200 24K Making this image flexible costs 34K.

Slide 32

Slide 32 text

What if we set a performance budget of 20K per image for flexible images?

Slide 33

Slide 33 text

Width Height File Size 320 213 25K 453 302 44K 579 386 65K 687 458 85K 786 524 104K 885 590 124K 975 650 142K 990 660 151K 8 image breakpoints https://www.flickr.com/photos/lyza/6733380533

Slide 34

Slide 34 text

Width Height File Size 320 213 9K 731 487 29K 990 660 40K 3 image breakpoints https://www.flickr.com/photos/lyza/6210160407

Slide 35

Slide 35 text

7 image breakpoints Width Height File Size 320 213 24K 471 314 43K 612 408 64K 728 485 84K 840 560 103K 944 629 122K 990 660 131K https://www.flickr.com/photos/lyza/6167714218

Slide 36

Slide 36 text

Width Height File Size 990 660 13K 1 image breakpoint

Slide 37

Slide 37 text

Impact of image resizing on memory usage Source: https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015

Slide 38

Slide 38 text

200 x 200 600 x 600 Source: https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015

Slide 39

Slide 39 text

150 x 150 550 x 550 Source: https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015

Slide 40

Slide 40 text

(200 x 200 - 150 x 150) x 4 = 70,000 wasted bytes (600 x 600 - 550 x 550) x 4 = 230,000 wasted bytes Source: https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015

Slide 41

Slide 41 text

200px 1200px 700px

Slide 42

Slide 42 text

200px 1200px 700px Need more image sources at larger sizes Source: https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015

Slide 43

Slide 43 text

Pick representative images and test how many breakpoints you’ll need. Image breakpoints are not a science yet. https://www.flickr.com/photos/ecstaticist/5465673165

Slide 44

Slide 44 text

https://www.flickr.com/photos/lendingmemo/11747440176

Slide 45

Slide 45 text

Questions to ask about images Where are the source files and what is the process for publishing? Is there a big diﬀerence between smallest and largest image size? Resolution switching or art direction? Can we use SVG? Are there representative images we can use to find sensible jumps in file sizes for our image breakpoints? Do we want to support multiple image formats?

Slide 46

Slide 46 text

Real life example: hero images

Slide 47

Slide 47 text

Hero images are usually large promo images

Slide 48

Slide 48 text

Full requirements for a hero image:

Slide 49

Slide 49 text

Full requirements for a hero image: A box for marketing.

Slide 50

Slide 50 text

In an ideal world, you build HTML5 hero images…

Slide 51

Slide 51 text

Instead, maybe all hero images consist of HTML text placed on an image.

Slide 52

Slide 52 text

And every image you use has spots set aside just for your text.

Slide 53

Slide 53 text

But that may not be practical for your site.

Slide 54

Slide 54 text

Maybe just give them a box? Image breakpoints FTL

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Image Breakpoints Name Width Height Max Width Min Width Large 1080 360 n/a 781 Medium 780 320 780 541 Small 540 270 540 n/a Text readability dictated 3 image breakpoints Need to support 16 pt in this font? Requires 4 breakpoints.

Slide 58

Slide 58 text

This worked for one project. Your project will likely be diﬀerent.

Slide 59

Slide 59 text

But surveying your images will help you figure it out. https://www.flickr.com/photos/nate2009/13971372001

Slide 60

Slide 60 text

Image Description Format Size Markup Notes Property logos PNG8 (future SVG) Regular, Retina Little variance between the wide and small screen image sizes. Partner logos PNG8 (future SVG) Regular, Retina Little variance between the wide and small screen image sizes. Iconography SVG — — Brand logos PNG8 (future SVG) regular, Retina Assumes little variance between the wide and small screen image sizes. Property photography JPG   (conditional WebP) Dynamically resized and compressed srcset and sizes Templates specify breakpoints. Promo images w/ text   (art direction) Whichever is appropriate As many sizes as needed. Content producer defines images and breakpoints in CMS. Example of images audit for a large site

Slide 61

Slide 61 text

http://www.flickr.com/photos/talkephotography/4523849236/ Creative Commons BY-NC-SA 2.0 2. Responsive images present great opportunities.

Slide 62

Slide 62 text

Browsers can make smart decisions if we let them. https://www.flickr.com/photos/vandergus/3349636231 Creative Commons BY-NC-SA 2.0

Slide 63

Slide 63 text

MUST media =

Slide 64

Slide 64 text

options image-set, srcset, and sizes =

Slide 65

Slide 65 text

402 x 606 Actual size in page 400 x 603 Image Source #1 800 x 1204 Image Source #2 Sometimes upscaling makes sense

Slide 66

Slide 66 text

srcset and sizes let browsers be smart https://www.flickr.com/photos/alicejamieson/3164148439

Slide 67

Slide 67 text

another use for https://www.flickr.com/photos/delete08/4869608487

Slide 68

Slide 68 text

declare diﬀerent types of images unless art direction, you don’t need media attribute

Slide 69

Slide 69 text

New image formats present new possibilities JPEG 2000 handles alpha channel images well http://www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr/

Slide 70

Slide 70 text

JPEG 2000 19.2K JPEG-XR 95.7K PNG 325.7K Web-P 56K Alpha Channel Dice Image http://www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr/

Slide 71

Slide 71 text

http://www.gratisography.com/

Slide 72

Slide 72 text

http://www.gratisography.com/ Special thanks to Simon Pieters, Mat Marquis, Eric Portis, Yoav Weiss, and the rest of the RICG. Shout out to all of the amazing photographers who share their work under creative commons. You rule!