Working with Images

A couple days ago I gave a polyglot talk at JS Admirers about working with images in the browser.

A brief outline:

  • Blobs (aka binary files)
    What are they, how to store them, and how to render them in <img> tags using base64/object URLs.
  • Image performance
    Images aren't in the critical path, and are intentionally loaded late using HTTP/2 prioritization.
  • Serving the right image
    Use Webp and srcset+sizes. The <picture> tag is rarely needed.
  • Lazy loading
    Use IntersectionObserver or passive scroll listener. To preserve aspect ratio, use padding-bottom trick or inline SVG as src.
  • Critical image pre-rendering
    Demo of <canvas> blur technique.
  • Animated SVG cursors
    Most browsers support SVGs as cursors. You can even update the SVG to animate the cursor.

If any of that sounds interesting, check out the slides!

Comments are welcome!