Skip to main content
Tenbyte Image Optimization works with any framework or platform via URL-based transforms. These guides show the cleanest setup per stack — usually a custom loader, component, or theme tweak.

​
How transforms work

Append query params, the edge does the rest. Each variant is cached independently after the first miss.

​
Common params

See Image Optimizer for the full param list and examples.

​
Pick your stack

  • Next.js — custom loader for the built-in <Image /> component.
  • Nuxt — Tenbyte provider for <NuxtImg>.
  • Astro — drop-in <TenbyteImage /> component plus client SDK.
  • React Native — replace <Image /> with TenbyteScaledImage.
  • Android / iOS — generate URLs from view dimensions.
  • Shopify — Liquid snippet that rewrites Shopify CDN URLs.
Don’t see your stack? The transforms are pure HTTP query params — any HTTP client can use them. Open a support ticket if you want a bespoke guide.

​
Verify any integration

Expected:
If content-type doesn’t change to your requested format, the master file probably wasn’t fetched yet (first request is a miss) or Image Optimizer is off.

​
Dev-friendly checklist

  • Master image is high-quality JPEG or PNG. Don’t upscale.
  • format=auto everywhere — covers AVIF / WebP / JPEG fallback.
  • Cap width to the breakpoints your design system actually uses.
  • Long TTL on image paths (see cache rules).
  • Lazy-load below-the-fold (loading="lazy" or framework-equivalent).
  • Test on real devices — dpr=2 matters for Retina screens.