Svelte-aio NPM

svelte-aio

Automatic image optimization for SvelteKit, inspired by NextJS

Usage

Check out full sample at src/routes

Install dependencies

pnpm add svelte-aio

(Optional) To resolve export paths correctly in VS Code, we require you to set module resolution in tsconfig.json into bundler first.

{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}

In routes/api/_images, create +server.ts endpoint

import { requestHandler } from 'svelte-aio/api'

import type { RequestHandler } from '@sveltejs/kit'

export const GET: RequestHandler = requestHandler()

Then use normally (almost) like next/image

<!-- +page.ts -->
<script lang="ts">
  import Image from 'svelte-aio'
</script>

<Image
  src="https://demo.rayriffy.com/tom-scott.jpg"
  width={801}
  height={801}
  alt="Tom Scott"
  class="rounded-xl shadow-md"
/>

Configuration

Server configrations can be specified via option params. All parameters are optional!

export const GET: RequestHandler = requestHandler({
  avif: false,
  remoteDomains: ['demo.rayriffy.com'],
  allowedDomains: ['svelte-aio.vercel.app'],
  ttl: 1000 * 60 * 60 * 24 * 7,
  storePath: '.svelte-kit/images',
})

avif

boolean

Enable AVIF image format. Defaults to false

Warning: optimizing image into AVIF format currently not reccomended due to high CPU and memory usage. Overall performance is not great when comparing to WebP.

remoteDomains

string[] | undefined

List of domains that API will be allowed to optimize. Defaults to unset

From example above, remoteDomains: ['demo.rayriffy.com'], means that API will only be allowed to optimize images that served from demo.rayriffy.com.

Unset this option will tell API to optimize ALL IMAGES from EVERYWHERE