Implement image compressing to increase performance.#5
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request implements image optimization by integrating @sveltejs/enhanced-img to automatically compress and serve responsive images, improving site performance.
Changes:
- Added
@sveltejs/enhanced-imgpackage and configured the Vite plugin to enable image optimization - Converted static image imports to use the
?enhancedquery parameter and replaced<img>tags with<enhanced:img>components - Removed unused image imports from the about page and updated CSS selectors to support the generated
<picture>elements
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Added enhancedImages() plugin before sveltekit plugin to enable image processing |
| src/routes/about/+page.svelte | Converted two images to enhanced format, removed five unused imports, and updated CSS for picture elements |
| src/routes/+page.svelte | Converted five images to enhanced format with appropriate sizes and fetchpriority attributes, updated CSS for picture elements |
| package.json | Added @sveltejs/enhanced-img ^0.9.3 as a dev dependency |
| package-lock.json | Locked dependencies for enhanced-img and its transitive dependencies including sharp image processing library |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <article class="officer-entry"> | ||
| <div class="officer-image"> | ||
| <img src={carImage} alt="Wazzu Racing car" /> | ||
| <enhanced:img src={carImage} alt="Wazzu Racing car" /> |
There was a problem hiding this comment.
The enhanced:img component is missing a sizes attribute. The sizes attribute helps the browser determine which image resolution to load based on the viewport size, improving performance. Consider adding a sizes attribute similar to the other enhanced:img components in this file, for example: sizes="(min-width: 1200px) 600px, 50vw"
| <enhanced:img src={carImage} alt="Wazzu Racing car" /> | |
| <enhanced:img | |
| src={carImage} | |
| alt="Wazzu Racing car" | |
| sizes="(min-width: 1200px) 600px, 50vw" | |
| /> |
|
@copilot open a new pull request to apply changes based on the comments in this thread |
Increase performance with a svelte library to enhance images.