⚡ Bolt: Pre-optimize project images for React compatibility - #165
Conversation
Refactored the `ProjectsView` React component to utilize standard `<img>` tags instead of Astro's unsupported `<Image>` component to resolve build/hydration errors. Performance optimization: To retain the build-time optimizations (WebP format conversion and image resizing), the optimized image URLs are now pre-computed on the server inside `src/pages/projects/index.astro` utilizing Astro's `getImage()` API and `import.meta.glob`. The resulting optimized URLs are passed as string props to the client React component. 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: Pre-computes optimized WebP image URLs server-side using Astro's
getImagefunction and passes them to standard HTML<img>tags in the ReactProjectsViewcomponent.🎯 Why: Utilizing Astro's
<Image />component inside a React.tsxfile causes build and hydration errors in this codebase. Defaulting to raw<img>tags sacrifices critical WebP compression and resizing benefits. This change fixes the component compatibility while preserving the performance gains.📊 Impact: Ensures images are served in optimal WebP format, significantly reducing payload size and improving LCP without triggering hydration errors.
🔬 Measurement: Verify by running
pnpm run checkto ensure builds complete successfully, and inspect the rendered imagesrcon the Projects page to confirm it references the compressed WebP asset rather than the raw static image.PR created automatically by Jules for task 7157884871533264315 started by @fysp11