> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/sveltejs/kit/llms.txt
> Use this file to discover all available pages before exploring further.
# Image optimization
> Optimize images for performance with multiple formats and sizes
Images can significantly impact your app's performance. For best results, you should generate optimal formats, create different sizes for different screens, and ensure assets can be cached effectively.
## Overview
There are several approaches to image optimization in SvelteKit:
Built-in asset handling with imports
Automatic optimization and responsive images
Dynamic optimization for CMS images
## Vite's built-in handling
[Vite automatically processes imported assets](https://vitejs.dev/guide/assets.html) for improved performance:
* Adds hashes to filenames for caching
* Inlines small assets (below `assetsInlineLimit`)
* Works with CSS `url()` function
* Handles images, video, audio, and more
```svelte theme={null}
```
Vite asset handling is great for basic needs but doesn't create responsive images or convert formats.
## @sveltejs/enhanced-img
The enhanced image plugin provides automatic optimization:
```bash theme={null}
npm i -D @sveltejs/enhanced-img
```
```javascript vite.config.js theme={null}
import { sveltekit } from '@sveltejs/kit/vite';
import { enhancedImages } from '@sveltejs/enhanced-img';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
enhancedImages(), // must come before sveltekit()
sveltekit()
]
});
```
```svelte theme={null}
```
### What it does
Automatically generates modern formats like `.avif` and `.webp` with fallbacks
Creates multiple sizes and generates `srcset` attributes for different devices
Sets `width` and `height` automatically to prevent layout shift
Strips EXIF data from images
### Basic usage
Use `` instead of `![]()
`:
```svelte theme={null}
```
At build time, this becomes an `![]()
` wrapped by a `` with multiple formats and sizes.
Provide images at 2x resolution for HiDPI displays. The plugin will automatically generate smaller versions for standard displays.
### Dynamic image selection
Import images with the `?enhanced` query parameter:
```svelte Single import theme={null}
```
```svelte Glob import theme={null}
{#each Object.entries(imageModules) as [_path, module]}
{/each}
```
### Responsive images with sizes
For large images, specify `sizes` to serve smaller versions on smaller devices:
```svelte theme={null}
```
Specify exact widths with the `w` query parameter:
```svelte theme={null}
```
### Per-image transforms
Apply transforms via query parameters:
```svelte theme={null}
```
Available transforms:
* `blur` - Gaussian blur radius
* `quality` - Compression quality (0-100)
* `flatten` - Flatten alpha channel
* `rotate` - Rotation angle
* `flip` - Flip horizontally
* `flop` - Flip vertically
* And [many more](https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md)
### Intrinsic dimensions
`width` and `height` are inferred automatically, but you can override them with CSS:
```svelte theme={null}
```
### Build caching
The first build takes longer due to image processing. Results are cached in `./node_modules/.cache/imagetools` for fast subsequent builds.
## Loading images from a CDN
For images from a CMS or database, use a CDN with dynamic optimization:
CDN-agnostic component supporting multiple providers
Cloudinary's official Svelte SDK
### CDN benefits and tradeoffs
* Images optimized at request time
* More flexibility with sizes
* No build-time processing
* Dynamic image sources (CMS, user uploads)
* Potential usage costs
* First request may be slow (lazy generation)
* Requires proper caching strategy
* Additional dependency
### Example with @unpic/svelte
```svelte theme={null}
```
## Best practices
* **Static assets in repo:** Use Vite or `@sveltejs/enhanced-img`
* **CMS images:** Use CDN with `@unpic/svelte`
* **Meta tags:** Use Vite's import handling
Images should be 2x the display size for HiDPI screens. Optimization tools will scale down but can't add detail.
For images larger than \~400px, specify `sizes` so smaller devices load appropriate versions:
```svelte theme={null}
```
For LCP images, set `fetchpriority="high"` and avoid `loading="lazy"`:
```svelte theme={null}
```
The Svelte compiler warns if you omit `alt` attributes:
```svelte theme={null}
```
Use a CDN to reduce latency by distributing assets globally, regardless of your optimization approach.
## Common pitfalls
**Don't use `em` or `rem` in sizes with modified root font-size:**
```css theme={null}
/* Bad: will cause incorrect image sizing */
html { font-size: 62.5%; }
```
When used in `sizes` or `@media` queries, `em` and `rem` use the user's default font size, not your CSS-modified value.
**@sveltejs/enhanced-img only optimizes local files:**
It can't optimize images from:
* Your database
* A CMS
* User uploads
* External URLs
For these cases, use a CDN solution.
## Performance metrics
Proper image optimization improves:
Fast-loading hero images improve LCP scores
Setting `width` and `height` prevents layout shift
Smaller files and modern formats reduce data transfer
Web.dev: Optimize Cumulative Layout Shift