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

Responsive Images using <picture> and srcset/sizes

Avatar for Matt Steele Matt Steele
July 02, 2014
Programming
1
1.3k

Responsive Images using <picture> and srcset/sizes

Avatar for Matt Steele

Matt Steele

July 02, 2014
Tweet

More Decks by Matt Steele

See All by Matt Steele
Upgrading to Angular 2 using ngUpgrade
Avatar for Matt Steele mattdsteele
0
890
Reactive Programming with RxJS
Avatar for Matt Steele mattdsteele
0
110
GET TO THE CHOPVAR
Avatar for Matt Steele mattdsteele
0
160
Using Source Maps in 2015
Avatar for Matt Steele mattdsteele
0
860
The Decorator Pattern
Avatar for Matt Steele mattdsteele
0
62
Diving Into the Device API
Avatar for Matt Steele mattdsteele
1
620
Unit Testing JavaScript when you're Afraid of JavaScript
Avatar for Matt Steele mattdsteele
3
660
What Zelda Taught Me about Front End Engineering
Avatar for Matt Steele mattdsteele
5
990

Other Decks in Programming

See All in Programming
Team topologies and the microservice architecture: a synergistic relationship
Avatar for Chris Richardson cer
PRO
0
1.1k
システム成長を止めない！本番無停止テーブル移行の全貌
Avatar for さかうぇ sakawe_ee
1
140
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
Avatar for shiro seike seike460
PRO
1
690
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
47
31k
Elixir で IoT 開発、 Nerves なら簡単にできる！？
Avatar for pojiro pojiro
1
150
なぜ「共通化」を考え、失敗を繰り返すのか
Avatar for Rinchoku rinchoku
1
560
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
Avatar for Akira Kobori koboriakira
0
440
Azure AI Foundryではじめてのマルチエージェントワークフロー
Avatar for 瀬尾佳隆 seosoft
0
140
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
Avatar for uutan1108 ohmori_yusuke
2
220
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
270
GitHub Copilot and GitHub Codespaces Hands-on
Avatar for Kento.Yamada ymd65536
1
120
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
Avatar for ANDPAD inc andpad
0
270

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
Done Done
Avatar for chrislema chrislema
184
16k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
270
20k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.8k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
188
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
700
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
660
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
181
53k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k

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