Responsive Images using <picture> and srcset/sizes

Transcript

1. Responsive Images @mattdsteele
2. THIS IS WHY YOU’RE FAT
3. We’ve put on a little weight.
4. http://httparchive.org/trends.php#bytesTotal&reqTotal
5. http://httparchive.org/trends.php#bytesTotal&reqTotal Total Page Weight File Size (KB) 1400 1550 1700 1850 July August September October NovemberDecember January February March April May June
6. http://httparchive.org/trends.php#bytesTotal&reqTotal Total Page Weight File Size (KB) 1400 1550 1700 1850 July August September October NovemberDecember January February March April May June 1485kb 1521kb 1551kb 1590kb 1614kb 1701kb 1681kb 1710kb 1728kb 1762kb 1775kb 1808kb
7. http://httparchive.org/interesting.php Bytes Per Page by Content Type
8. http://httparchive.org/interesting.php Images Bytes Per Page by Content Type
9. http://httparchive.org/interesting.php HTML Other Flash Stylesheets Scripts Images Bytes Per Page by Content Type
10. RETINA- POCALYPSE
12. iPhone 3GS
13. 320x480 iPhone 3GS
14. 320x480 iPhone 3GS iPhone 4
15. 320x480 640x960 (2x) iPhone 3GS iPhone 4
16. HTC One
17. 1920x1080 (3x) HTC One
18. “Let’s make it responsive!”
19. Nexus 10
20. 2560x1600 (2x) Nexus 10
21. 2880x1800 (1.6x) MacBook Pro with Retina Display
25. 320x213 41kb
26. 320x213 41kb
27. 320x213 41kb 640x425 137kb
29. 1280x852 400kb
30. 72% Responsive sites serve the same content to desktop & mobile http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
31. Ugh.
32. Shortcut: <SVG>
33. <img src="logo.svg">
34. 9+ SVG
35. Grunticon github.com/filamentgroup/grunticon
36. "Vectors are for chumps. I need bitmaps."
38. <picture>
39. <picture> <img src="fallback.png"> </picture>
40. <picture> <source media="(min-width: 1000px)" srcset="large.png"> <source media="(min-width: 640px)" srcset="medium.png"> <img src="fallback.png"> </picture>
41. <picture> <source media="(min-width: 1000px)" srcset="large.webp" type="image/webp"> <source media="(min-width: 1000px)" srcset="large.png"> <source media="(min-width: 640px)" srcset="medium.png"> <img src="fallback.png"> </picture>
45. Art Direction
46. <picture> 38 33 Under Consideration
49. Screen Size ⊆ What You Need
51. Viewport Size
52. Viewport Size Screen Density
53. Viewport Size Rendered Size Screen Density
54. Viewport Size Rendered Size Screen Density Image Dimensions
55. Viewport Size Rendered Size Screen Density Image Dimensions Browser knows?
56. Viewport Size Rendered Size Screen Density Image Dimensions Browser knows? ✓
57. Viewport Size Rendered Size Screen Density Image Dimensions Browser knows? ✓ ✓
58. Viewport Size Rendered Size Screen Density Image Dimensions Browser knows? ✓ ✓ ✗
59. Viewport Size Rendered Size Screen Density Image Dimensions Browser knows? ✓ ✓ ✗ ✗
60. Viewport Size Rendered Size Screen Density Image Dimensions
61. Viewport Size Rendered Size Screen Density Image Dimensions Author knows?
62. Viewport Size Rendered Size Screen Density Image Dimensions Author knows? ✗ ✗ ✓ ✓
63. srcset & sizes
64. Image dimensions srcset="large.jpg 1200w, medium.jpg 640w, small.jpg 320w"
65. Image dimensions URL srcset="large.jpg 1200w, medium.jpg 640w, small.jpg 320w"
66. Image dimensions Width URL srcset="large.jpg 1200w, medium.jpg 640w, small.jpg 320w"
67. Rendered Size sizes="(min-width: 1024px) 300px, (min-width: 640px) 50vw, 100vw"
68. Rendered Size For this MQ: sizes="(min-width: 1024px) 300px, (min-width: 640px) 50vw, 100vw"
69. Rendered Size For this MQ: Image renders this big sizes="(min-width: 1024px) 300px, (min-width: 640px) 50vw, 100vw"
70. Rendered Size For this MQ: Image renders this big Default sizes="(min-width: 1024px) 300px, (min-width: 640px) 50vw, 100vw"
71. <img src="small.jpg" alt="A responsive image" srcset="large.jpg 1200w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 1024px) 300px, (min-width: 640px) 50vw, 100vw">
72. Screen Densities
73. Configurable
74. Configurable •HD Mode
75. Configurable •HD Mode •Speed Mode
76. Configurable •HD Mode •Speed Mode •Crappy Network Mode
77. srcset 32 Under Consideration
78. Fallbacks built-in
79. Or: Picturefill http://scottjehl.github.io/picturefill/
80. Go Forth And Get Skinny
81. @mattdsteele flic.kr/p/7TH4dc