⚡ Bolt: Server-side Image Optimization and LCP Priority Hints

[fysp11]

💡 What:

• Replaced invalid usage of Astro's <Image /> component inside a .tsx React file (ProjectsView.tsx) with standard <img> tags.
• Hooked into getProjects mapping on index.astro to pre-calculate image URLs using Astro's getImage function and import.meta.glob.
• Dynamically applied fetchPriority="high" and loading="eager" attributes only to above-the-fold elements (first 2 images in grid view, first 4 in list view), and deferred the rest via loading="lazy".

🎯 Why:

• Astro's <Image> does not receive framework build-time processing inside .tsx components, often breaking formatting (causing 404s/loss of optimization).
• Applying LCP attributes (like fetchpriority="high") blindly across all list elements degrades performance by making the browser concurrently load off-screen images rather than prioritizing initial viewport contents.

📊 Impact:

• Faster LCP loading times by eagerly processing critical images.
• Reduces network payload by successfully pre-processing high-res images to smaller webp files at build-time.
• Prevents image layout shifts via proper decoding="async" attributes.

🔬 Measurement:

• Verified components run without errors via pnpm run check.
• Can be measured via Lighthouse/Web Vitals scores (LCP, Network Payload).

---

PR created automatically by Jules for task 6990778735765859455 started by @fysp11

[kinsta]

Preview deployments for fysp11.github.io ⚡️

Status	Branch preview	Commit preview
✅ Ready	Visit preview	Visit preview

Commit: 69c24f8d7775139be594116a91c706e6c35e0420

Deployment ID: aedc5490-d2b0-467c-821f-a69e0d5383b9

Static site name: fysp11githubio-cleb3

[google-labs-jules]

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.