Optimize images: convert to WebP and add prebuild download script

[jakkdl]

So, the previous approach to pre-downloading images had a pretty egregious issue where it would download the same image multiple times (I think if it was referenced from different pages), which in a theoretical worst case meant we downloaded 1.7k images from airtable instead of 970. While in practice it probably wasn't that bad, it introduced issues once I wanted to convert images on the fly.
This one instead has the downside of downloading images that are in airtable, but never actually used anywhere on the website.

I'm not loving a pipeline of converting the airtable images on build, as that still requires donwloading 27M of images on build, and for the images only used on the map there's still some images that are big (resolutions of >1k*1k). When loading them on the other pages Next will downscale them when rendering, but for the ones on the map that get dynamically rendered it doesn't happen. So I was considering a script that goes through the /map table, downloads all images, converts them to .webp and downscales them, and puts them back in airtable.
idk if this would make a noticeable difference, but so might not be worth the effort.

Please check the preview and its performance of navigating the map, maybe both on mobile & desktop. It should hopefully be better now @bryceerobertson

also map-bg is unused, I considered simply removing it (we'd still have it in git history) but I left it for now.

claude summary

• Convert static images to WebP (keyboard, hal9000, link-preview, map-bg, map) Savings: keyboard 1.1M→45K (96%), hal9000 394K→37K, link-preview 399K→36K
• Add sharp dependency for image conversion
• Add prebuild script to download and convert Airtable attachments to WebP
  • Runs once before build (not per-worker), preventing duplicate downloads
  • Converts PNG/JPG to WebP automatically
• Simplify airtable.ts to just resolve cached URLs (no more download logic)
• Update CSS and component references to use .webp files

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ai-safety-com	Ready	Preview, Comment	Mar 26, 2026 4:39pm

[bryceerobertson]

When I add logos, I put them through a Claude-built optimiser which makes them 250px x 250px and either original format (usually PNG) or WebP, depending on which is the smaller file size. It's not always WebP.

I haven’t always been doing this, so many logos won't be optimal.

FWIW I couldn't notice a difference in load time of the logos between https://ai-safety-com-git-fork-jakkdl-deb-f6fc0b-alignmentdevs-projects.vercel.app/map and AISafety.com/map

Optimising those static images seems great.

Anyway just adding all that context in case it changes anything.