> ## Documentation Index > Fetch the complete documentation index at: https://docs.pylonsync.com/llms.txt > Use this file to discover all available pages before exploring further. # > Optimized images with built-in Rust resizer + mozjpeg + libwebp. Same binary, no Sharp / libvips install. ```tsx theme={null} import { Image } from "@pylonsync/react"; Mountain at dawn

``` `` renders a plain `` pointing at Pylon's built-in optimizer endpoint. The browser fetches an AVIF or WebP (or JPEG, depending on `Accept`) sized for the user's viewport, served from disk cache on every subsequent request. The pipeline is pure Rust: `image` for decode, `fast_image_resize` (SIMD) for the actual resize, and `ravif` / `rav1e` (AVIF), `libwebp`, and `mozjpeg` for encode. No Sharp install, no libvips on the host, no Node child-process. It all lives in the Pylon binary. ## What it does For a single `

`: * Renders `` with multiple width candidates (default: 1x and 2x of `width`, capped at 3840px). * Each candidate points at `/_pylon/image?src=/hero.jpg&w=&q=`. * Browser picks the smallest candidate that satisfies the viewport DPR. * Server decodes once, resizes with SIMD (Lanczos3), encodes as AVIF, WebP, or JPEG depending on `Accept`. * Result is hashed by (src, width, quality, format) and cached at `.pylon/.cache/images/.`. Cache hits skip decode + encode entirely — just a file serve. * Response carries `Cache-Control: public, max-age=31536000, immutable`. ## API ```tsx theme={null} interface ImageProps { /** Source — site-relative ("/foo.jpg") or http(s) URL (allowlisted via env). */ src: string; /** Intrinsic width in CSS px. Used for aspect ratio + the 1x srcset candidate. */ width: number; /** Intrinsic height in CSS px. */ height: number; /** Required alt text. Pass "" for purely decorative images. */ alt: string; /** JPEG/WebP quality 1..=100. Default 75. PNG ignores it. */ quality?: number; /** Override srcset widths. Default: [width, width*2] capped at 3840. */ widths?: number[]; /** ``. Default "100vw" — tighten for grid layouts. */ sizes?: string; /** Skip lazy-loading, bump fetchPriority to "high". Use for above-the-fold heroes. */ priority?: boolean; /** Plus any other attribute (className, style, onClick, etc.). */ } ``` ## Examples ### Hero image (above the fold) ```tsx theme={null} Mountain at dawn

``` `priority` skips `loading="lazy"` and sets `fetchPriority="high"` so the browser prioritizes it during the initial paint. ### Responsive grid ```tsx theme={null}

``` The `sizes` attribute is the most important knob — it tells the browser how wide the image will actually render at each breakpoint, so it picks the smallest viable srcset candidate. Without it, the browser assumes `100vw` and downloads a 4K image for a 200px thumbnail. ### Custom srcset ```tsx theme={null}

``` Useful for avatar grids where you know the exact DPR multipliers you care about. ## Safety & configuration The optimizer is opinionated about what it'll process. Every knob has a safe default, and you tune them via env. The same defaults apply across `pylon dev` and production. ### Allowed widths The server rejects requests whose `w` isn't in its width set. This prevents cache-fill DoS where an attacker requests thousands of slightly-different widths to balloon your disk. ```bash theme={null} # Defaults (mirror Next.js): PYLON_IMAGE_DEVICE_SIZES=640,750,828,1080,1200,1920,2048,3840 PYLON_IMAGE_IMAGE_SIZES=16,32,48,64,96,128,256,384 ``` `` generates srcset URLs only with widths from this combined set, so default-config usage just works. If you customize the env, also pass `widths={[...]}` on each `` to keep srcset URLs in range. ### Allowed qualities Same defense, applied to the `q` parameter. ```bash theme={null} PYLON_IMAGE_QUALITIES=50,75,90 # default ``` If you need finer-grained quality control, append it: `PYLON_IMAGE_QUALITIES=50,65,75,85,90,95`. ### Allowed formats ```bash theme={null} PYLON_IMAGE_FORMATS=avif,webp,jpeg # default ``` Locks the optimizer to a specific output set. The server picks the best match for the request's `Accept` header from this list. `` lets the server pick by default; pass `format=` in your own URLs if you want explicit control. ### Remote source allowlist ```bash theme={null} PYLON_IMAGE_REMOTE_ALLOWLIST=cdn.example.com,images.unsplash.com/photos/ ``` Each entry is `host` or `host/pathPrefix`: | Pattern | Matches | | ------------------------ | ----------------------------------------------------------------- | | `cdn.example.com` | any path on this exact host | | `cdn.example.com/users/` | only paths starting with `/users/` | | `*.example.com` | one-level wildcard — `foo.example.com`, not `foo.bar.example.com` | Without this env, any `src` starting with `http://` or `https://` returns 400. This prevents SSRF — random visitors can't make your server fetch arbitrary internal URLs. ### Source size cap ```bash theme={null} PYLON_IMAGE_MAX_BYTES=26214400 # 25MB default ``` Applies to both local files and remote fetches. Remote responses that exceed it are rejected mid-stream. ### Pixel-bomb protection ```bash theme={null} PYLON_IMAGE_MAX_PIXELS=40000000 # 40M px (~24MP camera photo) default ``` A tiny PNG can declare a 100000×100000 canvas. Decoding that would allocate 40GB of RGBA. Pylon reads the image header BEFORE decoding and rejects any source whose declared `width × height` exceeds this cap. The default (40M px, \~160MB peak decode) is tuned so a burst of concurrent requests can't OOM a small machine; operators serving genuinely huge sources raise it explicitly. ### Fetch timeout ```bash theme={null} PYLON_IMAGE_FETCH_TIMEOUT_MS=15000 # 15s default ``` Applies to remote source fetches. ### SVG handling SVG is **always rejected**, both as input and output. SVG can carry inline `