HTTP 203
Progressively loading images

Progressively loading images

In this episode, Jake (that's him on the left) and Surma (that's the other one) chat about how the different image formats load, and what you can do to make them feel faster.

Stuff we mention:
Tool to slow-load images → https://goo.gle/2ROdm7x
Squoosh → https://goo.gle/2OQBnGG
MozJPEG → https://goo.gle/34hOckh
lib-jpeg encoder bug → https://goo.gle/2Tn3KkJ
Scripting JPEG scans (see 'Multiple Scan / Progression Control') → https://goo.gle/3ccqJpd
Squoosh PR experimenting with scans → https://goo.gle/3vmjh2j
Jake's blog post on AVIF → https://goo.gle/3oQG9En
AVIF blurry preview demo → https://goo.gle/2SnUEUa
AVIF preview frame spec discussion → https://goo.gle/3bQ3WPC
AVIF preview thumbnail feature issue → https://goo.gle/3figOQO
BlurHash → https://goo.gle/2SqEGbR

More videos in the HTTP 203 series → http://goo.gle/HTTP203
Subscribe to Google Chrome Developers here → https://goo.gle/ChromeDevs

Also, if you enjoyed this, you might like the HTTP203 podcast → https://goo.gle/HTTP203Podcast

#HTTP203 #ChromeDeveloper #WebDev

  1. Scroll-Linked Animations with ScrollTimeline and ViewTimeline

  2. How rotate(0) fixed my transform animation

  3. A love letter to DOMPoint and DOMMatrix

  4. It's viewports all the way down

  5. Magic tricks with the HTML parser

  6. DOM ready events considered harmful

  7. Demystifyingish SVG paths

  8. FLIP animations

  9. The history API is dead. Long live the navigation API

  10. Samsung Internet - the why & how

  11. Is .css a bad idea? Is inlining the way forward?

  12. What key was pressed? (You won't believe how keyboard events work)

  13. Building VR and AR experiences using HTML

  14. Cross-fading DOM elements

  15. Generating your color palette in CSS

  16. The Zombie DOM - old DOM stuff that still haunts us today

  17. Bringing bounce and elastic easing to CSS

  18. Yes, we use a Joy-Con to change slides. Here's how…

  19. Are SPAs better than MPAs?

  20. Avoiding layout shift by putting the CSS in charge

  21. Color Spaces: Do YOU know the difference between sRGB, LAB and CIE XYZ?

  22. Random paint effects

  23. Deno

  24. Debugging memory leaks

  25. Season 8 trailer

  26. Top 10 performance pitfalls

  27. From nothin’ to gzip

  28. Progressively loading images

  29. Conducting tech interviews

  30. AssemblyScript

  31. The big back button quiz

  32. Writing Good Alt Text

  33. Scheduling Tasks

  34. JavaScript counters the hard way

  35. Dithering

  36. Importing JSON - ABANDONED

  37. Web animation gotchas

  38. WebAssembly Threads

  39. Slashing layout cost with content-visibility

  40. 3.143 ways to synchronize data across documents

  41. Weak JavaScript

  42. Streaming requests with fetch

  43. Socially Distant HTTP 203

  44. Cross-origin fetches

  45. Surma’s Interop Adventure

  46. Humans can't read URLs. How can we fix it?

  47. Is reduce() bad?

  48. The best web feature of 2019: Part 4/4

  49. The best web feature of 2019: Part 3/4

  50. The best web feature of 2019: Part 2/4

  51. The best web feature of 2019: Part 1/4

  52. WebAssembly Interface Types

  53. Import maps

  54. Push Notifications

  55. Is postMessage slow?

  56. Scope in JavaScript

  57. Handling updates offline-first

  58. Four silly browser hacks

  59. How we got into web development

  60. Changing web standards

  61. Solving Clickjacking

  62. But… why HTTP 203?

  63. Loop Tiling

  64. Share Target

  65. Context and Optimizations

  66. JAM Stack

  67. New Canvas Stuff

  68. Background Fetch

  69. Best web features of 2018: The Final!

  70. Best web features of 2018: Part 3/4

  71. Best web features of 2018: Part 2/4

  72. Best web features of 2018: Part 1/4

  73. Old vs New JavaScript

  74. Page Lifecycle API

  75. SVG Transform Box

  76. JavaScript proposals

  77. Polyfills

  78. Broadcast channel

  79. CORB

  80. JavaScript for-loops are… complicated

  81. Lighthouse and Puppeteer

  82. What's new in JavaScript

  83. Google's Crawler & JavaScript

  84. Web Security

  85. What's New in Chrome DevTools

  86. Technical Debt

  87. Google Chrome Origins

  88. Web Dev Beginnings with Mariko Kosaka

  89. Accessibility with Rob Dodson

  90. PWA Starter Kit with Monica Dinculescu

  91. State of the Web with Ben Galbraith & Dion Almaer

  92. #SmooshGate

  93. Work Life Balance

  94. Class-based Tree Shaking

  95. Resize Observer

  96. JavaScript Symbols

  97. Webpack and Workers

  98. 120fps

  99. EventTarget

  100. Import()

  101. WebWorkers

  102. Transform Streams

  103. Dynamic Import()

  104. FetchObserver

  105. Async Iterators & Generators

  106. FlatMap & Flatten

  107. Template Instantiation

  108. Weightless CSS

  109. Web Architecture

  110. Animation Worklet

  111. Web Locks API

  112. WeakMaps

  113. Web RTC

  114. VDOM vs lit-html

  115. Visual Viewport

  116. Imposter Syndrome

  117. Web Standards & Flash

  118. HTTP203 Recap

  119. HTTP2

  120. Libraries vs Frameworks

  121. Jake Beats Wikipedia

  122. Paul Built A Web App

  123. Season 3 Trailer

  124. The Future of JavaScript

  125. Maintainable Code

  126. Browser Monoculture

  127. Utopia Vs Dystopia

  128. Performance Matters

  129. Progressive Loading

  130. CSS Triggers

  131. Web Vs Native

  132. Build tools

  133. HTTPS Everywhere

  134. Font Rendering

  135. Pointer Events

  136. Gotchas

  137. Frame Timing

  138. Christmas Special

  139. Season 2 Teaser