Image Optimization

Sveleton automatically optimizes images at build time using vite-imagetools. Every image is transformed into multiple sizes and formats, ensuring fast loading times across all devices and network conditions.

How It Works

Images are processed during the Vite build step, generating responsive variants from 197px to 1920px wide in AVIF format. The system automatically creates a srcset attribute with all variants, letting browsers choose the optimal size for each viewport.

LQIP (Low Quality Image Placeholder) support provides instant visual feedback. A tiny, blurred version of the image appears immediately while the full image loads in the background, improving perceived performance.

Usage

Import images directly — no query parameters needed. Responsive variants and LQIP placeholders are applied automatically via defaultDirectives in vite.config.js.