# Static Assets

Part of bundling for the web is handling all the asset types the web supports - images, videos, JSON, fonts, and much more. Turbopack offers familiar tools for these so you can immediately get productive.

## Import static assets

Importing static assets works out of the box with Turbopack:

```ts
import img from './img.png'
import video from './video.mp4'
import audio from './audio.wav'
```

### Next.js

In Webpack and some other frameworks, importing an image returns a string containing that image's URL.

```ts
import img from './img.png';

console.log(img); // /assets/static/1uahwd98h123.png
```

In Next.js, importing an image actually returns an object, containing various metadata about the image. This is so it can be fed into [Next.js's Image component](https://nextjs.org/docs/basic-features/image-optimization#local-images).

The behavior of extracting an object of metadata from the image is **not yet supported**. For now, imported images will resolve to strings.

## Public directory

The `/public` directory lets you place assets which you want to be available on the root URL of the website. For instance, `public/favicon.png` will be available at `https://example/favicon.png`.

In Turbopack, the `/public` directory is supported out of the box.

## JSON

Most frameworks allow you to import JSON directly into your application:

```ts
import fixtures from './fixtures.json';
```

This is supported out of the box with Turbopack, as is performing a named import on that JSON:

```ts
import { users, posts } from './fixtures.json';
```
