Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Images using <picture> and srcset/sizes

Matt Steele
July 02, 2014
Programming
1
930

Responsive Images using <picture> and srcset/sizes

Matt Steele

July 02, 2014
Tweet

More Decks by Matt Steele

See All by Matt Steele
Upgrading to Angular 2 using ngUpgrade
mattdsteele
0
520
Reactive Programming with RxJS
mattdsteele
0
86
GET TO THE CHOPVAR
mattdsteele
0
94
Using Source Maps in 2015
mattdsteele
0
560
The Decorator Pattern
mattdsteele
0
35
Diving Into the Device API
mattdsteele
1
310
Unit Testing JavaScript when you're Afraid of JavaScript
mattdsteele
3
420
What Zelda Taught Me about Front End Engineering
mattdsteele
5
600

Other Decks in Programming

See All in Programming
Form実装基本を学び直してみた
hyugatsukui
0
200
Enumを自動で網羅的にテストしてみた
estie
0
1.2k
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
5.8k
Milestoner
bkuhlmann
1
240
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
120
あなたと 「｜」 したい・・・
track3jyo
PRO
2
1k
AWSにおける標的型Bot対策
hacomono
0
390
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
200
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
270
新卒でサービス立ち上げから Hasuraを使って３年経った振り返り
yutorin
0
190
監視せなあかんし、五大紙だけにオオカミってな🐺🐺🐺🐺🐺
sadnessojisan
2
980
新卒2年目がデータ分析API開発に挑戦【Stapy#88】/data-science-api-begginer
matsuik
0
330

Featured

See All Featured
Into the Great Unknown - MozCon
thekraken
2
270
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
Navigating Team Friction
lara
176
12k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
7.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Why Our Code Smells
bkeepers
PRO
326
55k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
Infographics Made Easy
chrislema
235
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
31
1.8k
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
GitHub's CSS Performance
jonrohan
1020
430k

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

  11. None

  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

  22. None
  23. None
  24. None

  25. 320x213 41kb

  26. 320x213 41kb

  27. 320x213 41kb 640x425 137kb

  28. None

  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."

  37. None

  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>
  42. None
  43. None
  44. None

  45. Art Direction

  46. <picture> 38 33 Under Consideration

  47. None
  48. None

  49. Screen Size ⊆ What You Need

  50. None

  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