Photo Versions

const photos = await client.getPhotos()

for (const photo of photos) {
  const thumb  = photo.versions.find(v => v.versionType === "webp_thumb")
  const medium = photo.versions.find(v => v.versionType === "webp_medium")
  const full   = photo.versions.find(v => v.versionType === "webp_full")

  // Always guard — a version may be absent if processing hasn't finished
  if (thumb) console.log(thumb.url, thumb.width, thumb.height, thumb.sizeBytes)
}

function buildSrcSet(photo: GalleryPhoto): string {
  return photo.versions
    .filter(v => ["webp_thumb", "webp_medium", "webp_full"].includes(v.versionType))
    .map(v => `${v.url} ${v.width}w`)
    .join(", ")
}

<img
  src="{medium.url}"
  srcset="{buildSrcSet(photo)}"
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
  width="{medium.width}"
  height="{medium.height}"
  alt=""
/>

// Pre-generated: instant, no server processing
const url = photo.versions.find(v => v.versionType === "webp_thumb")?.url

// On-demand: flexible, first request slightly slower (then permanently cached)
const url = client.getMediaUrl(photo.id, { w: 400, format: "avif" })