⚡ Bolt: Optimize project images & fix React <Image /> component - #152
⚡ Bolt: Optimize project images & fix React <Image /> component#152fysp11 wants to merge 1 commit into
Conversation
- Removes usage of Astro's `<Image>` inside `ProjectsView.tsx`, which bypasses build optimization and throws type errors. - Pre-computes optimized images via `getImage()` inside `pages/projects/index.astro`. - Provides appropriately sized standard HTML `<img>` elements for both grid and list views. - Adds `decoding="async"` for non-blocking main thread image processing. Co-authored-by: fysp11 <13081700+fysp11@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Preview deployments for fysp11.github.io ⚡️
Commit: Deployment ID: Static site name: |
1 participant
💡 What: Replaced unsupported Astro
<Image />component in React with standard<img>tags, and pre-computed optimized WebP URLs usinggetImage()at the parent.astrofile level. Addeddecoding="async"to prevent main thread blocking during render.🎯 Why: Using Astro
<Image />components inside.tsxfiles is not supported and often results in string-based paths bypassing build-time optimizations (like resizing and WebP conversion).📊 Impact: Generates correctly sized, optimized WebP images at build time, reducing payload sizes significantly and improving overall LCP.
🔬 Measurement: Check the Network tab on
/projects. It will show significantly smaller WebP image payloads compared to the original assets, leading to faster load times.PR created automatically by Jules for task 12002602704583667285 started by @fysp11