Astro

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.
The Tenbyte CDN hostname for your account.

1. Create the wrapper component

src/components/TenbyteImage.astro

---
const { src, alt = "", style = "", ...rest } = Astro.props;
---
<img
  data-src={src}
  alt={alt}
  style={style}
  loading="lazy"
  {...rest}
/>

The SDK looks for data-src and rewrites it on load.

2. Load the Tenbyte SDK in your layout

src/layouts/BaseLayout.astro

<head>
  <script is:inline define:vars={{
    origin: "images.yoursite.com",
    tenbyte: "your-distribution.tenbytecdn.com"
  }}>
    window.TENBYTE_CONFIG = {
      hosts: [{ current: origin, tenbyte }],
      lazy_load: true
    };
  </script>
  <script
    src="https://cdn.jsdelivr.net/npm/tenbyte.js@2.1/dist/tenbyte.min.js"
    id="tenbyte-sdk-script"
    async></script>
</head>

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

src/pages/index.astro

---
import BaseLayout from "../layouts/BaseLayout.astro";
import TenbyteImage from "../components/TenbyteImage.astro";
---
<BaseLayout>
  <TenbyteImage
    src="https://images.yoursite.com/photo.jpg"
    alt="Photo"
    style="width: 400px;" />
</BaseLayout>

Pre-applied transforms

You can put query params directly in src — they’re preserved through the rewrite:

<TenbyteImage
  src="https://images.yoursite.com/photo.jpg?w=400&format=webp"
  alt="Optimized"
  style="width: 400px;" />

Or compose params per breakpoint with a small helper:

src/lib/img.ts

export function tenbyteUrl(src: string, params: Record<string, string | number> = {}) {
  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();
}

---
import { tenbyteUrl } from "../lib/img";
---
<TenbyteImage src={tenbyteUrl("https://images.yoursite.com/photo.jpg", { w: 800 })} alt="" />

Verify

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 <img>. 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.

Home

Account & Organization

Vidinfra

Live Streaming

CDN

Cloud

Prerequisites

1. Create the wrapper component

2. Load the Tenbyte SDK in your layout

3. Use it in pages

Pre-applied transforms

Verify

Tips

Troubleshooting

​Prerequisites

​1. Create the wrapper component

​2. Load the Tenbyte SDK in your layout

​3. Use it in pages

​Pre-applied transforms

​Verify

​Tips

​Troubleshooting

Prerequisites

1. Create the wrapper component

2. Load the Tenbyte SDK in your layout

3. Use it in pages

Pre-applied transforms

Verify

Tips

Troubleshooting