RETIRED see @sveltejs/enhanced-img per Ben McCann

SvelteKit + Imagetools example

This repo shows a basic configuration for SvelteKit with Imagetools set up for image processing with sharp.

First we set up Imagetools and our defaultDirectives in vite.config.js. We are generating AVIF and WEBP file formats and using the picture element:

format: 'avif;webp;' + extension,
picture: true

Next we configure our preprocess option in svelte.config.js. From there we import and use our Image component in +page.svelte. To augment the global setup we did in vite.config.js, in our img src attribute we specify directives that are unique to particular images in the URL as query parameters:

example.jpg?w=2048&invert

The ? starts the query parameter expression, and we can use as many key-value pairs as we need, separated by &. When we import static assets like images, Vite provides us with a hashed URL that can be cached forever so visitors only have to download it once. Though we are importing it up top in the script tag, our sharp/Imagetools transformations would work fine if we specified the directives directly in the src attribute. We cap the width at 2048px with w=2048, shorthand for width=2048, and invert the colors with invert, short for invert=true.

Ben McCann writes on GitHub:

I realize of course this is a fair bit of configuration required at the moment. We've just done new releases of both imagetools and svelte-preprocess-import-assets today to make this all work pretty well. The next step will be packaging it all up together to be easier to setup.

Several community members have also indicated interest in making this work for frontmatter in markdown and mdsvex files as well. PRs welcome. Also, Imagetools are updating their examples in this PR.

Visit the SvelteKit GitHub issue #241 discussion to read the about how this came to be.

Deploying

The vercel branch builds sveltekit-imagetools.vercel.app and the netlify branch builds sveltekit-imagetools.netlify.app. Both specify the respective vercel/netlify adapter and pass the edge: true option to the adapter for Vercel/Netlify Edge Functions. Rich mentioned the benefit of edge functions at Vite Conf.

The usual SvelteKit README boilerplate…

create-svelte

Everything you need to build a Svelte project, powered by create-svelte.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.