M3: A Media-Intensive Web App

// v1: upload the original through the API; show the original in every slot with CSS sizing. looks right in the office on fibre
<img src={photo.url} style={{ width: 400, height: 300, objectFit: 'cover' }} />
// the grid: 40 × 3 MB = 120 MB on the wire; 40 × 4000×3000×4 B = 1.9 GB decoded; the phone tab has ~300 MB
// what the user sees on a phone: a long blank grid, then images that flicker in and out as the browser evicts and re-decodes bitmaps on scroll, then a crash

// v1 → v2 markup: the slot decides the pixels; the browser picks the variant; the LCP image is explicit
<img
  src={img.url(800)}                                   // fallback
  srcSet={`${img.url(400)} 400w, ${img.url(800)} 800w, ${img.url(1600)} 1600w`}
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 400px"
  width={img.w} height={img.h}                         // reserves the slot: no layout shift
  loading={isHero ? 'eager' : 'lazy'} fetchPriority={isHero ? 'high' : 'auto'} decoding="async"
  style={{ background: `url(${blurhashToDataUrl(img.blurhash)})`, backgroundSize: 'cover' }}   // 20 bytes of placeholder
  alt={img.alt}
/>
// <picture> with AVIF then WebP sources when the ladder has both; or let the CDN negotiate on Accept and keep one URL
// the hero: also <link rel="preload" as="image" imagesrcset=… imagesizes=…> in the HTML head so it starts before the CSS is parsed

// v2: client-side resize in a worker. the phone already decoded the photo to preview it; resize where the pixels are
// worker
self.onmessage = async ({ data: { file, maxW } }) => {
  const bmp = await createImageBitmap(file, { imageOrientation: 'from-image' })   // honours EXIF rotation; decode happens here, off the main thread
  const scale = Math.min(1, maxW / bmp.width)
  const w = Math.round(bmp.width * scale), h = Math.round(bmp.height * scale)
  const canvas = new OffscreenCanvas(w, h); canvas.getContext('2d')!.drawImage(bmp, 0, 0, w, h); bmp.close()   // release the 48 MB bitmap now
  const blob = await canvas.convertToBlob({ type: 'image/webp', quality: 0.85 })      // ~400 KB from 3 MB; EXIF (GPS, device) is gone
  self.postMessage({ blob, w, h })
}
// main: one worker, a queue of files, three concurrent resizes (each holds a decoded bitmap: 48 MB × 3 is the memory line on a phone)
// upload: GET /uploads/sign?type=image/webp&size=… → { url, key } → fetch(url, { method: 'PUT', body: blob }) with progress via XHR or a ReadableStream body
// resumable (videos, flaky links): multipart create → parts of 5 MB, 3 in flight → record each acked part {key, partNo, etag} in IndexedDB → complete; resume = skip acked parts