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

ParamValuesPurpose
width / wpxResize.
height / hpxResize.
format / fmauto, webp, avif, jpeg, pngFormat conversion.
quality / q1–100Compression.
dpr1, 2, 3Device pixel ratio.
fitcover, contain, fill, inside, outsideResize behavior.
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

curl -sSI "https://your-distribution.tenbytecdn.com/photo.jpg?width=400&format=webp" \
  | grep -iE 'content-type|content-length|x-cache'
Expected: 
content-type: image/webp
content-length: 18432
x-cache: HIT
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.