tools / images

Every image your app loads — and why it failed

Image HTTP never touches the JS network stack, so network devtools are permanently blind to it. Buoy Images is the visibility layer: a live registry of every RN <Image> and expo-image load with cache verdicts, timings, decoded dimensions, an oversize/wasted-memory audit, and a failure log — plus per-image actions and failure simulations. Pure JavaScript, so it works in Expo Go and release builds.

Read the docsnpm i @buoy-gg/images

Live image registry with cache verdicts and insight chips — Every load with cache verdict, timing, and an oversize verdict — plus duplicate-URL and retry-storm insights.

Image detail view with source, load, and cache information — One load, fully explained: source, status, duration, and how the cache verdict was classified.

Oversize audit with on-device WebP re-encode and URL swap — The oversize audit, an on-device WebP re-encode that proves real savings, and in-place URL swaps.

Forced error simulation showing the app’s retry UI — Force an error on any image and watch your real fallback UI handle it.

What it does

Cache verdicts per load

Memory, disk, or network — expo-image reports it directly; RN core images are classified via Image.queryCache right after loading.

Oversize + wasted-memory audit

Decoded pixels vs laid-out size × device pixel ratio, Lighthouse-style — with the estimated wasted decoded memory and the exact dimensions you should serve. Upscaled (blurry) sources get flagged the other way.

Failure log with HTTP detail

Every onError with the message; on iOS, RN core also surfaces the HTTP status code and response headers.

Simulate the bad day

Force errors, endless loading, or blanks on any image; swap source URLs in place; flip app-wide offline / cold-start / blank-images modes — then prove the fix with an on-device WebP re-encode that reports real byte savings.

Frequently asked questions

Why can’t my network inspector see image requests in React Native?

Image fetches happen in native code (NSURLSession / Fresco), never in the JS network stack — so JS-level network devtools can’t observe them. Buoy Images hooks the image components themselves instead, capturing every load with its cache verdict and timing.

Does it work in Expo Go and release builds?

Yes — capture is pure JavaScript (RN’s official component-decorator hook plus an expo-image render patch), so there’s no native module to install and it works in Expo Go, dev clients, and release builds.

How do I find images that waste memory?

The registry compares each image’s decoded pixels against its rendered size × device pixel ratio and totals the estimated wasted decoded bytes — sort by the red verdicts, then use the on-device re-encode to prove what a right-sized source would save.

Add Images to your app

Free for on-device debugging. Two-minute install, no native code.

Quick startnpm i @buoy-gg/core

Works well with

Network Inspector

@buoy-gg/network

Bench — Performance Monitor

@buoy-gg/perf-monitor

Events Timeline

@buoy-gg/events