Images, video and other assets

Where to put media files

Put images, fonts and other static media files in dedicated folders in the statics directory at src/statics/.

Directorysrc
- Directorystatics
  - Directoryimages
    my-image.jpg
  - Directoryfonts
    myfont.woff2

How to use media files in your code

When you reference media files, you should always use absolute paths (https://graphics.reuters.com/.../my-file.jpg), not relative paths (./my-file.jpg).

So to use media files in your component code, you need to prefix the path to them using SvelteKit’s built-in assets store. Here’s how:

<script>
  import { assets } from '$app/paths';
</script>

<img alt="" src="{assets}/images/my-image.jpg" />

Using media files in component SCSS

Use inline styles to set SCSS styles with your media files.

<script>
  import { assets } from '$app/paths';
</script>

<div
  style="background-image: url({assets}/images/my-image.jpg);"
></div>

<style lang="scss">
  div {
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

Using media files in global SCSS

If you need to load media files in your global SCSS — for example, to load a font for use across the page — the graphics kit will automatically resolve CSS url() path strings and create the correct absolute URL for you.

@font-face {
  font-family: myCustomFont;
  src: url("/fonts/myFont.woff2") format("woff2");
}

Optimising images

Always scale images down to a web-friendly size before publishing your project.

Savile is built-in to the graphics kit to help easily resize, optimise or reformat your images.

pnpm savile

Try an online demo of Savile