⚡ Bolt: Pre-optimize React UI images in Astro build step - #166
Conversation
- Fix unsupported Astro `<Image>` tag in React by using standard `<img>` tags. - Pre-optimize images during Astro server build using `getImage()` and Vite's `import.meta.glob`. - Pass optimized URLs to the React component via props. - Add journal entry explaining the Astro image optimization constraints in React files. 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: The optimization pre-optimizes project images at the Astro server level (in
index.astro) and passes standard optimized image URLs to the React component (ProjectsView.tsx), where they are rendered with standard<img>tags.🎯 Why: The
<Image>component fromastro:assetsis not properly supported or processed when placed directly inside React (.tsx) UI components. Attempting to do so results in hydration errors or unoptimized, full-resolution images being shipped to the client. Pre-optimizing usinggetImage()fixes this.📊 Impact: Substantially decreases data transfer usage, improves loading speed, and improves overall performance by correctly applying WebP conversion and resizing (800x600 for grid and 80x80 for list view) during the build, guaranteeing optimized imagery is delivered to the client instead of original full-size image assets.
🔬 Measurement: Verify the optimization by building the site (
pnpm run build), navigating to the/projectspage, and confirming that the image URLs map to the optimized_astro/output variants and possess correct responsive dimensions.PR created automatically by Jules for task 14002687062346491211 started by @fysp11