Optimizing Images with @sveltejs/enhanced-img
Serve correctly sized, next-gen images with the enhanced:img component.
Optimizing Images with @sveltejs/enhanced-img is a free Sveltejs Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Image Optimization
The @sveltejs/enhanced-img plugin generates responsive, modern-format images at build time.
Install
Add to dev dependencies and register in Vite config.
npm install -D @sveltejs/enhanced-imgConfigure Vite
Add the plugin to vite.config.js.
import { enhancedImages } from "@sveltejs/enhanced-img/vite";
plugins: [enhancedImages(), sveltekit()]Use the Component
Import an image with the special query and use <enhanced:img>.
import Hero from "./hero.jpg?enhanced";
<enhanced:img src={Hero} alt="Hero" />Automatic srcset
The plugin generates multiple sizes and formats (AVIF, WebP) for srcset.
Lazy Loading
Add loading="lazy" for below-the-fold images.
<enhanced:img src={Hero} alt="..." loading="lazy" />Aspect Ratio
The plugin includes width and height to prevent layout shifts.
CDN Hosting
For dynamic images, consider Cloudinary, Imgix, or Vercel's Image Optimization for runtime resizing.
Modern Formats
AVIF and WebP cut file sizes 30-70% vs JPEG/PNG.
Performance Impact
Image optimization is often the biggest single performance win on a content site.
Build Cost
Image processing extends build times. Cache the output for incremental builds.
Quick Check
What does enhanced-img generate?
Recap
Use @sveltejs/enhanced-img for build-time responsive image generation with modern formats and srcset.
Frequently asked questions
Is the “Optimizing Images with @sveltejs/enhanced-img” lesson free?
Yes — the full text of “Optimizing Images with @sveltejs/enhanced-img” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “Optimizing Images with @sveltejs/enhanced-img”?
Serve correctly sized, next-gen images with the enhanced:img component. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Optimizing Images with @sveltejs/enhanced-img” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Code Splitting and Dynamic Imports
- Optimizing Images with @sveltejs/enhanced-img
- Lazy Loading Components
- Profiling SvelteKit Apps