> ## 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.
# Astro
> Use Tenbyte Image Optimization in Astro with a small wrapper component and the Tenbyte JS SDK.
Use Tenbyte Image Optimization in Astro to deliver lighter images with zero build-time work. Drop in a small component and the Tenbyte JS SDK; the SDK rewrites `data-src` to optimized Tenbyte URLs at runtime.
## Prerequisites
* Astro 3+.
* A Tenbyte distribution with [Image Optimizer enabled](/docs/cdn/distributions/image-optimizer).
* The Tenbyte CDN hostname for your account.
## 1. Create the wrapper component
```astro src/components/TenbyteImage.astro theme={null}
---
const { src, alt = "", style = "", ...rest } = Astro.props;
---
![{alt}]()
```
The SDK looks for `data-src` and rewrites it on load.
## 2. Load the Tenbyte SDK in your layout
```astro src/layouts/BaseLayout.astro theme={null}
```
Replace `images.yoursite.com` with the domain where your master images live, and `your-distribution.tenbytecdn.com` with your Tenbyte hostname.
## 3. Use it in pages
```astro src/pages/index.astro theme={null}
---
import BaseLayout from "../layouts/BaseLayout.astro";
import TenbyteImage from "../components/TenbyteImage.astro";
---
```
## Pre-applied transforms
You can put query params directly in `src` — they're preserved through the rewrite:
```astro theme={null}
```
Or compose params per breakpoint with a small helper:
```astro src/lib/img.ts theme={null}
export function tenbyteUrl(src: string, params: Record = {}) {
const u = new URL(src);
for (const [k, v] of Object.entries(params)) u.searchParams.set(k, String(v));
if (!u.searchParams.has("format")) u.searchParams.set("format", "auto");
if (!u.searchParams.has("q")) u.searchParams.set("q", "80");
return u.toString();
}
```
```astro theme={null}
---
import { tenbyteUrl } from "../lib/img";
---
```
## Verify
```bash theme={null}
curl -sS http://localhost:4321 | grep -oE '(data-src|src)="[^"]*tenbytecdn\.com[^"]+"' | head -3
```
After the SDK loads in the browser, `data-src` becomes `src`. Inspect with DevTools → Network to see the actual request URL.
## Tips
* **Always `loading="lazy"`** below the fold.
* **Cap widths** — only request widths your design uses.
* **`format=auto`** — let the edge pick WebP / AVIF.
* **SSR works** — output is plain `![]()
`. The SDK runs only on the client.
* **Static builds work** — Tenbyte still handles transforms at request time.
## Troubleshooting
| Symptom | Fix |
| -------------------------- | ---------------------------------------------------------------------------------------- |
| Images don't load | SDK script blocked / not loaded. Check Network tab; confirm `tenbyte.min.js` is fetched. |
| Original src is requested | The host in `src` doesn't match `TENBYTE_CONFIG.hosts[0].current`. |
| Wrong dimensions on Retina | Pass `dpr=2` or rely on `srcset` widths. |