Skip to main content
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

​
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

SymptomFix
Images don’t loadSDK script blocked / not loaded. Check Network tab; confirm tenbyte.min.js is fetched.
Original src is requestedThe host in src doesn’t match TENBYTE_CONFIG.hosts[0].current.
Wrong dimensions on RetinaPass dpr=2 or rely on srcset widths.