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
940
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
890
The Decorator Pattern
Avatar for Matt Steele mattdsteele
0
64
Diving Into the Device API
Avatar for Matt Steele mattdsteele
1
660
Unit Testing JavaScript when you're Afraid of JavaScript
Avatar for Matt Steele mattdsteele
3
690
What Zelda Taught Me about Front End Engineering
Avatar for Matt Steele mattdsteele
5
1k

Other Decks in Programming

See All in Programming
Serena MCPのすすめ
Avatar for wadakatu wadakatu
4
900
大規模アプリのDIフレームワーク刷新戦略 ～過去最大規模の並行開発を止めずにアプリ全体に導入するまで～
Avatar for GO Inc. dev mot_techtalk
0
390
Go言語の特性を活かした公式MCP SDKの設計
Avatar for hond hond0413
1
190
CSC305 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
260
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
Avatar for Daichi KUDO da1chi
3
1.9k
CSC509 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
Avatar for Itaru Ota ota1022
0
240
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
Avatar for teamLab teamlab
PRO
0
180
CSC509 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
330
複雑化したリポジトリをなんとかした話　pipenvからuvによるモノレポ構成への移行
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
800
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
Avatar for Masayuki Izumi izumin5210
0
610
Reduxモダナイズ　〜コードのモダン化を通して、将来のライブラリ移行に備える〜
Avatar for pvcresin pvcresin
2
690

Featured

See All Featured
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
71
11k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
610
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.1k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
5
190

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