> For the complete documentation index, see [llms.txt](https://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/getting-started-with-sveltekit/enhanced-images.md).

# Enhanced Images

## @sveltejs/enhanced-img <a href="#sveltejs-enhanced-img" id="sveltejs-enhanced-img"></a>

`@sveltejs/enhanced-img` is a plugin offered on top of Vite's built-in asset handling. It provides plug and play image processing that serves smaller file formats like `avif` or `webp`, automatically sets the intrinsic `width` and `height` of the image to avoid layout shift, creates images of multiple sizes for various devices, and strips EXIF data for privacy. It will work in any Vite-based project including, but not limited to, SvelteKit projects.

## Setup

Install:

```bash
npm install --save-dev @sveltejs/enhanced-img
```

Adjust `vite.config.js`:

<pre class="language-javascript" data-title="vite.config.js"><code class="lang-javascript">import { sveltekit } from '@sveltejs/kit/vite';
<strong>import { enhancedImages } from '@sveltejs/enhanced-img';
</strong>import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
<strong>		enhancedImages(),
</strong>		sveltekit()
	]
});
</code></pre>

Building will take longer on the first build due to the computational expense of transforming images. However, the build output will be cached in `./node_modules/.cache/imagetools` so that subsequent builds will be fast.

## Using it on images

```html
<script>
	import MyImage from '$lib/images/image.jpg?enhanced';
</script>

<enhanced:img src={MyImage} alt="some alt text" />
```

{% hint style="info" %}
Don't use `<enhanced:img>` on images fetched from an api as it will not function properly
{% endhint %}

{% hint style="info" %}
Your file will get converted to `.avif` or `.webp` during the **build process**, you won't see the converted image during your `npm run dev`
{% endhint %}