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 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.