Enhanced Images

Images can have a big impact on your app's performance. For best results, you should optimize them by doing the following:

@sveltejs/enhanced-img

@sveltejs/enhanced-img is a plugin offered on top of Vite's built-in asset handling. It provides plug and play image processing that serves smaller file formats like avif or webp, automatically sets the intrinsic width and height of the image to avoid layout shift, creates images of multiple sizes for various devices, and strips EXIF data for privacy. It will work in any Vite-based project including, but not limited to, SvelteKit projects.

Setup

Install:

npm install --save-dev @sveltejs/enhanced-img

Adjust vite.config.js:

vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { enhancedImages } from '@sveltejs/enhanced-img';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		enhancedImages(),
		sveltekit()
	]
});

Building will take longer on the first build due to the computational expense of transforming images. However, the build output will be cached in ./node_modules/.cache/imagetools so that subsequent builds will be fast.

Using it on images

<script>
	import MyImage from '$lib/images/image.jpg?enhanced';
</script>

<enhanced:img src={MyImage} alt="some alt text" />

Don't use <enhanced:img> on images fetched from an api as it will not function properly

Your file will get converted to .avif or .webp during the build process, you won't see the converted image during your npm run dev