Responsive Images are Here. Now What?

by Jason Grigsby

Slide 1

Slide 1 text

Responsive Images Are Here. Now What? Jason Grigsby • @grigs • cloudfour.com Photo by http://www.gratisography.com/

Slide 2

Slide 2 text

Responsive images have landed Also sprach Zarathustra

Slide 3

Slide 3 text

Shipped Development

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

”Long story short, I don't think anyone should use images on the web.” https://www.flickr.com/photos/zeldman/7727532846

Slide 10

Slide 10 text

”Long story short, I don't think anyone should use images on the web.” https://www.flickr.com/photos/zeldman/7727532846

Slide 11

Slide 11 text

https://www.flickr.com/photos/zeldman/7727532846

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 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 14

Slide 14 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 15

Slide 15 text

Images have always been diﬃcult.

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Not simply cropping

Slide 28

Slide 28 text

Art direction: Images with text

Slide 29

Slide 29 text

Art direction: Images with text

Slide 30

Slide 30 text

Art direction: Images with text

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

is always required

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

do you need anything else?

Slide 36

Slide 36 text

Fixed width, single density is all you need.

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

High density displays?

Slide 42

Slide 42 text

srcset

Slide 43

Slide 43 text

display density comma-separated list cat

Slide 44

Slide 44 text

Easy so far, right?

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

We need more source files.

Slide 48

Slide 48 text

width of the image sources Browser picks best source cat

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

CSS evaluation beginning

Slide 52

Slide 52 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 53

Slide 53 text

Slide 54

Slide 54 text

Images are nearly same size as viewport

Slide 55

Slide 55 text

1540px 254px Viewport Tells Us Little

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 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 59

Slide 59 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 60

Slide 60 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 61

Slide 61 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 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 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 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

What about separation of content from style?

Slide 69

Slide 69 text

Sizes is a necessary compromise:  responsive images and speculative downloading

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

media query full srcset multiple s required

Slide 74

Slide 74 text

Shopify using for art direction

Slide 75

Slide 75 text

Shopify using for art direction Shopify Merchant, Corrine Anestopoulos

Simplified markup

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 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 79

Slide 79 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 80

Slide 80 text

http://www.gratisography.com/

Slide 81

Slide 81 text

inline image tricks https://www.flickr.com/photos/sk8mama/238533452

Slide 82

Slide 82 text

inline image tricks https://www.flickr.com/photos/sk8mama/238533452

Slide 83

Slide 83 text

What about CSS? https://www.flickr.com/photos/mauriz/4059476052

Slide 84

Slide 84 text

http://www.gratisography.com/ https://www.flickr.com/photos/shaheershahid/3635625771

Slide 85

Slide 85 text

http://www.gratisography.com/ https://www.flickr.com/photos/shaheershahid/3635625771 Art Direction Resolution Switching

Slide 86

Slide 86 text

Resolution Switching

Slide 87

Slide 87 text

image-set()

Slide 88

Slide 88 text

works for any CSS that takes images (e.g., border-image) display density => precursor to srcset, similar syntax does not, yet, support declaring image widths background-image: image-set( "foo.png" 1x, "foo-2x.png" 2x);

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

media queries!

Slide 92

Slide 92 text

old style, webkit only resolution media query, max-resolution also valid dots per inch (dpi), dots per centimeter (dpcm) or dots per px unit (dppx) Due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi https://developer.mozilla.org/en-US/docs/Web/CSS/resolution @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* High density stuﬀ here */ }

Slide 93

Slide 93 text

image breakpoints

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

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

Slide 102 text

400 x 602 Actual size in page

Slide 103

Slide 103 text

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

Slide 104

Slide 104 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 105

Slide 105 text

What is a sensible jump in file size?

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

Responsive Images Performance Budget

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 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 112

Slide 112 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 113

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

Slide 114 text

Width Height File Size 990 660 13K 1 image breakpoint

Slide 115

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

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 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 119

Slide 119 text

Real life example: hero images

Slide 120

Slide 120 text

Hero images are usually large promo images

Slide 121

Slide 121 text

Full requirements for a hero image:

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

In an ideal world, you build HTML5 hero images…

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

But that may not be practical for your site.

Slide 127

Slide 127 text

Maybe just give them a box? Image breakpoints FTL

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

No content

Slide 130

Slide 130 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 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 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 134

Slide 134 text

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

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

https://www.flickr.com/photos/zeldman/14847023657 And you may feel like giving up…

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

No content

Slide 143

Slide 143 text

We will build tools to make the climb easier…

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

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

Slide 146

Slide 146 text

http://www.gratisography.com/

Slide 147

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