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
- 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!