Two Years Later: Porting the JPEG XL Site to Astro
Two years after the original JPEG XL site launch, we’ve rebuilt it in Astro, re-encoded the JPEG XL images with cjxl 0.12, and looked at how differently we built things this time around.
Back in May 2024 we wrote about embarking on the JPEG XL website design journey. The site launched that September, just minutes ahead of the iPhone 16 launch event, hacked together in Webflow, a tool definitely not meant for the job.
Two years on, we’re rebuilding it in Astro, and re-encoding the JXL images on the site with the newly released cjxl 0.12. Felt like a good moment to write down what’s changed, both in JPEG XL and how we’re building things at Fractional Xperience.
Astro isn’t perfect, but it’s pretty great
I’ve spent the better part of the past decade moving websites from WordPress to Webflow. I suspect that chapter is mostly over. As AI-assisted development gets better, code-first frameworks like Astro increasingly make more sense than rebuilding everything in a visual site builder. Webflow will still have its place, particularly when a client already has a substantial CMS there or needs its visual editing workflow. For most new builds, though, we’re probably moving on.
We’re also testing Webflow’s MCP server to see whether AI can close some of that gap without giving up the visual editing experience. It’s promising, but it’s not truly great yet. The first company to nail AI without sacrificing visual control will clean up the market. Webstudio seems to be doing well with this (we’ve been testing its MCP server as well).
Astro’s built-in image processing pipeline doesn’t yet handle JPEG XL out of the box. astro:assets uses Sharp by default, and while Sharp has experimental JXL support, its prebuilt binaries don’t include it. Getting it working requires a custom libvips build compiled with libjxl support, which is more infrastructure than we want to introduce just to run an image through the normal Astro pipeline.
So on the one site whose entire reason for existing is showing off JPEG XL, we obviously can’t run our JXL files through Astro’s standard optimizer. The irony isn’t lost on us.
In practice, that meant stepping outside Astro’s image-processing pipeline for everything JXL. We pre-encode the JXL variants ourselves with cjxl, drop the files straight into public/ so Astro delivers them into the build untouched, and write the <picture> markup ourselves: JPEG XL first, followed by AVIF and/or WebP fallbacks.
What’s new in cjxl 0.12
The re-encode gave us a good excuse to dive into the 0.12 release, which the community has been eagerly awaiting. A few things stood out:
- Security is a major focus. The maintainers strongly recommend updating as soon as possible because the release includes extensive security and hardening fixes across the encoder, decoder, image-format plugins, and supporting code.
- Progressive lossless images are around 30–40% smaller than before, while newly added multithreading improves encoding performance by roughly 2–5×.
- When decoding to a lower bit depth, the old 8×8 Bayer dithering pattern has been replaced with a 32×32 channel-offset blue-noise pattern. This reduces visible repetition and produces cleaner-looking gradients.
- At extremely low lossy quality settings, cjxl now enables 2×2 image resampling beginning at distance 10 instead of distance 20. A faster downsampling path makes these encodes roughly 3–10× faster below effort 10 while substantially reducing memory use; the slower iterative method is reserved for effort 10.
A codec evolved. The workflow transformed.
JPEG XL has improved in the way you’d expect a standardized format to improve: steadily, incrementally, release by release. What changed far more dramatically was the process of rebuilding the site around it.
Two years ago, moving dozens of blog posts out of Webflow and into Astro content collections, rebuilding the image-comparison slider, and writing responsive <picture> fallbacks for every image would have taken weeks. It was repetitive, tedious work, and exactly the kind of work where it’s easy to introduce mistakes.
This time, we leaned on AI for coding. It helped normalize old Webflow markup into clean Astro components, generated consistent responsive markup, and caught the inevitable inconsistencies in paths, image widths, and fallback logic. Once you have a strong design and a clear implementation pattern in place, it can handle much of the rote mechanical work that doesn’t require any judgment.
That contrast is hard to ignore. JPEG XL matured gradually over the past two years. The tools we used to rebuild the site changed almost beyond recognition.