Turn a hi-res origin image into a responsive image using Vercel's Image Optimization API.
| Property | Type | Required | Description |
|---|---|---|---|
src | string | yes | URL to origin image. |
alt | string | yes | Alt text (not caption) . |
sizes | string | no | Size hints. If not specified, it defaults to "100vw". |
intrinsicWidth | number | no | Optimize generated srcset when provided. |
aspectRatio | string | number | no | Override intrinsic aspect ratio. "1 / 1" or 1.0, not 1. |
loading | 'lazy' | 'eager' | no | Defaults to "lazy". |
class | string | no | Tailwind v4 classes. |
The default use case for VercelImage is that the origin image is hosted in the cloud:
If your origin image is part of your SvelteKit website’s repository, we can import it and obtain its
root-relative path. VercelImage can handle root-relative paths because Vercel’s Image Optimization
API supports them.
The following example renders a local origin image:
Note that VercelImage suppresses the generation of srcset while in dev mode. The browser then
sees an img tag with only a src prop containing a root-relative path. This ensures that images
are rendered during dev.