> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tenbyte.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Image Optimization Integration Guides

> Plug Tenbyte Image Optimization into your framework or platform — Next.js, Nuxt, Astro, React Native, native mobile, Shopify.

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

```mermaid theme={null}
flowchart LR
    APP[Your app] -->|<img src=".../photo.jpg?width=800&format=auto">| EDGE[Tenbyte edge]
    EDGE -->|cache miss| FETCH[Fetch master from origin]
    FETCH -->|transform| VARIANT[Resize / convert / compress]
    VARIANT -->|cache + serve| BROWSER[Browser]
```

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

## Common params

| Param           | Values                                          | Purpose             |
| --------------- | ----------------------------------------------- | ------------------- |
| `width` / `w`   | px                                              | Resize.             |
| `height` / `h`  | px                                              | Resize.             |
| `format` / `fm` | `auto`, `webp`, `avif`, `jpeg`, `png`           | Format conversion.  |
| `quality` / `q` | `1–100`                                         | Compression.        |
| `dpr`           | `1`, `2`, `3`                                   | Device pixel ratio. |
| `fit`           | `cover`, `contain`, `fill`, `inside`, `outside` | Resize behavior.    |

See [Image Optimizer](/docs/cdn/distributions/image-optimizer) for the full param list and examples.

## Pick your stack

* [**Next.js**](/docs/cdn/image-optimization/integration-guide/nextjs) — custom loader for the built-in `<Image />` component.
* [**Nuxt**](/docs/cdn/image-optimization/integration-guide/nuxt) — Tenbyte provider for `<NuxtImg>`.
* [**Astro**](/docs/cdn/image-optimization/integration-guide/astro) — drop-in `<TenbyteImage />` component plus client SDK.
* [**React Native**](/docs/cdn/image-optimization/integration-guide/react-native) — replace `<Image />` with `TenbyteScaledImage`.
* [**Android / iOS**](/docs/cdn/image-optimization/integration-guide/android-ios) — generate URLs from view dimensions.
* [**Shopify**](/docs/cdn/image-optimization/integration-guide/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

```bash theme={null}
curl -sSI "https://your-distribution.tenbytecdn.com/photo.jpg?width=400&format=webp" \
  | grep -iE 'content-type|content-length|x-cache'
```

Expected:

```text theme={null}
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](/docs/cdn/distributions/image-optimizer).

## 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](/docs/cdn/distributions/cache-rules)).
* [ ] Lazy-load below-the-fold (`loading="lazy"` or framework-equivalent).
* [ ] Test on real devices — `dpr=2` matters for Retina screens.