Skip to main content

Asset handling

Edit this page on GitHub

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 the CSS url() function, 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.