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!