Delivering Responsive Images

Slide 1

Slide 1 text

IMAGECON 2017 Delivering Responsive Images Jason Grigsby

Slide 2

Slide 2 text

Responsive images have landed

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

https://www.flickr.com/photos/gwendalcentrifugue/7395256948

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Slide 7

Slide 7 text

srcset="quilt_2/square/large.webp 822w, quilt_2/square/medium.webp 640w, quilt_2/square/small.webp 320w" /> Detail of the above quilt, highlighting the
embroidery and exotic stitchwork.

Detail of the above quilt, highlighting the
embroidery and exotic stitchwork.

Slide 8

Slide 8 text

”This is way too complex and heavy markup language. Can you imagine yourselves doing that in 300 images in a web site? This will be a nightmare to manage.” ”There are so many things wrong with these new responsive image systems.” “

Slide 9

Slide 9 text

background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient( 45deg, rgba(255, 255, 255, .15) 25%,

Slide 10

Slide 10 text

transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); And that’s why no one uses gradients…

Slide 11

Slide 11 text

Images have always been diﬃcult.

Slide 12

Slide 12 text

216 Web Safe Colors http://moodlightinghire.com/wp-content/uploads/2013/06/RGB_color_chart_by_ervis.jpg

Slide 13

Slide 13 text

1996 258 pages 1997 447 pages 1996 235 pages 1997 238 pages 1997 235 pages

Slide 14

Slide 14 text

PNG compression 1,498 bytes 1,980 bytes 12,850 bytes

Slide 15

Slide 15 text

https://www.flickr.com/photos/jannem/3312115991

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Not simply cropping

Slide 24

Slide 24 text

Art direction: Images with text

Slide 25

Slide 25 text

Art direction: Images with text

Slide 26

Slide 26 text

Art direction: Images with text

Slide 27

Slide 27 text

https://www.flickr.com/photos/lonelycoo/4393663498

Slide 28

Slide 28 text

is always required

Slide 29

Slide 29 text

Icon made by Daniel Bruce from www.flaticon.com is licensed under CC BY 3.0 srcset media sizes type

Slide 30

Slide 30 text

All rules are applied to element Original Chrome Team Example: http://googlechrome.github.io/samples/picture-element/

Slide 31

Slide 31 text

do you need anything else?

Slide 32

Slide 32 text

Fixed width, single density is all you need.

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Small diﬀerence in file size or using SVG? is all you need.

Slide 37

Slide 37 text

High density displays?

Slide 38

Slide 38 text

srcset

Slide 39

Slide 39 text

display density comma-separated list cat

Slide 40

Slide 40 text

Easy so far, right?

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

1849 × 749 – 256K 2x = 3698 × 1498 – 508K

Slide 43

Slide 43 text

We need more source files.

Slide 44

Slide 44 text

width of the image sources Browser picks best source cat

Slide 45

Slide 45 text

Browser picks best source HOW? https://www.flickr.com/ photos/ores2k/394359583

Slide 46

Slide 46 text

Image requested HTML requested CSS and JS requested HTML parsing starts Image requested Image requested Image requested

Slide 47

Slide 47 text

CSS evaluation beginning

Slide 48

Slide 48 text

CSS evaluation beginning Images are downloaded before size is known The only thing the lookahead pre-parser knows is the size of the viewport.

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Images are nearly same size as viewport

Slide 51

Slide 51 text

1540px 254px Viewport Tells Us Little

Slide 52

Slide 52 text

Tug of war between responsive images and the lookahead pre-parser.

Slide 53

Slide 53 text

https://www.flickr.com/photos/davechiu/24165369 https://www.flickr.com/photos/ostrosky/4149725733

Slide 54

Slide 54 text

https://www.flickr.com/photos/davechiu/24165369 https://www.flickr.com/photos/ostrosky/4149725733 Lookahead pre-parser Know everything in advance. Start downloading immediately. Responsive images Wait until last minute. Know size of image after CSS / JS.

Slide 55

Slide 55 text

The pre-parser is why we can’t solve responsive images with CSS, JS or a magical new image format. https://www.flickr.com/photos/hamur0w0/6984884135

Slide 56

Slide 56 text

Lookahead Pre-parser Key to a Faster Web 20% 19% http://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/

Slide 57

Slide 57 text

~43% of image fetches are initiated by the speculative HTML scanner, which account for ~50% of transferred bytes. —Ilya Grigorik “ http://bigqueri.es/t/who-initiates-image-downloads/568

Slide 58

Slide 58 text

sizes https://www.flickr.com/photos/ashleyrosex/2861690380

Slide 59

Slide 59 text

sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px" sizes is required whenever srcset uses width descriptors

Slide 60

Slide 60 text

media condition (subset of media queries) length viewport width unit if there is no media condition, then it is the default length length can be absolute, relative or even calc() sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"

Slide 61

Slide 61 text

sizes=" (max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"

Slide 62

Slide 62 text

sizes=" (max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"

Slide 63

Slide 63 text

sizes=" (max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"

Slide 64

Slide 64 text

What about separation of content from style?

Slide 65

Slide 65 text

Sizes is a necessary compromise:  responsive images and speculative downloading

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Slide 68

Slide 68 text

Art Direction http://www.gratisography.com/

Slide 69

Slide 69 text

media query full srcset multiple s required

Slide 70

Slide 70 text

Shopify using for art direction

Slide 71

Slide 71 text

Shopify using for art direction Shopify Merchant, Corrine Anestopoulos

Simplified markup

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 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 75

Slide 75 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 76

Slide 76 text

http://www.gratisography.com/

Slide 77

Slide 77 text

image breakpoints

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 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 86

Slide 86 text

400 x 602 Actual size in page

Slide 87

Slide 87 text

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

Slide 88

Slide 88 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 89

Slide 89 text

What is a sensible jump in file size?

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

Responsive Images Performance Budget

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 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 96

Slide 96 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 97

Slide 97 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 98

Slide 98 text

Width Height File Size 990 660 13K 1 image breakpoint

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 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 101

Slide 101 text

Humans shouldn’t be doing this work. https://www.flickr.com/photos/jdhancock/7801182534/

Slide 102

Slide 102 text

client hints

Slide 103

Slide 103 text

display density width of image in page may not be useful GET cat.jpg Accept: image/webp,image/*,*/*;q=0.8 DPR: 2 Viewport-Width: 1024 Width: 508

Slide 104

Slide 104 text

srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"

Slide 105

Slide 105 text

sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"> cat

Slide 106

Slide 106 text

image formats browser understands GET cat.jpg Accept: image/webp,image/*,*/*;q=0.8 DPR: 2 Viewport-Width: 1024 Width: 508

Slide 107

Slide 107 text

Slide 108

Slide 108 text

/image/thing-crop-1600.jpgxr 1600w, /image/thing-crop-2000.jpgxr 2000w" type="image/vnd.ms-photo">

Slide 109

Slide 109 text

Slide 110

Slide 110 text

only declare the hints you need

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

Client hints conundrum

Slide 113

Slide 113 text

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

Slide 114

Slide 114 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 115

Slide 115 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 116

Slide 116 text

Big Hope: Automation https://www.flickr.com/photos/clement127/15631803492

Slide 117

Slide 117 text

http://scottjehl.github.io/picturefill/ Picturefill is the polyfill.

Slide 118

Slide 118 text

https://www.drupal.org/project/picture Drupal Picture Module

Slide 119

Slide 119 text

https://wordpress.org/plugins/ricg-responsive-images/ Wordpress Responsive Images Plugin

Slide 120

Slide 120 text

Image resizing services http://bit.ly/image-services

Slide 121

Slide 121 text

No content

Slide 122

Slide 122 text

https://www.flickr.com/photos/mariachily/5250487136 Responsive images can seem daunting…

Slide 123

Slide 123 text

Remember, you’re not alone… https://www.flickr.com/photos/max-design/3751402935

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

We will build tools to make the climb easier…

Slide 126

Slide 126 text

We merely need to take the first steps. https://www.flickr.com/photos/akras/1477140536

Slide 127

Slide 127 text

https://flickr.com/photos/ ekosystem/4334671818

Slide 128

Slide 128 text

http://www.gratisography.com/

Slide 129

Slide 129 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!