Asset handling

Hashingpermalink

To include hashes in your asset file names and cache them, you can have Vite process your assets by importing them as shown below:

<script>
	import logo from '$lib/assets/logo.png';
</script>

<img alt="The project logo" src={logo} />

If you prefer to reference assets directly in the markup, you can use a preprocessor such as svelte-preprocess-import-assets or svelte-image.

For assets included via url() in you may find the experimental.useVitePreprocess option useful:

ts
// svelte.config.js
export default {
	experimental: {
		useVitePreprocess: true
	}
};

Optimizationpermalink

You may wish to utilize compressed image formats such as .webp or .avif or responsive images that serve a different size based on your device's screen. For images that are included statically in your project you may use a preprocessor like svelte-image or a Vite plugin such as vite-imagetools.