[Hacktoberfest] Replace img tags with Next.js Image Component for Performance

[BekahHW]

Description

Convert regular <img> tags to Next.js <Image> components throughout the codebase for better performance, automatic optimization, and improved SEO. Next.js Image provides built-in lazy loading, responsive images, and automatic format optimization.

Acceptance Criteria

• Replace <img> tags in src/app/podcast/page.tsx
• Replace <img> tags in src/app/podcast/[slug]/page.tsx
• Replace <img> tags in src/app/events/page.tsx
• Replace <img> tags in src/app/page.tsx (sponsors section)
• Replace <img> tags in src/components/MemberCards.tsx
• Replace <img> tags in src/components/UndrawIllustration.tsx
• Ensure all images have proper alt text
• Test that images load correctly and maintain aspect ratios
• Verify responsive behavior across different screen sizes

Technical Requirements

• Import Next.js Image component: import Image from 'next/image'
• Convert width/height attributes to proper Next.js Image props
• Handle loading="lazy" attribute (Next.js handles this automatically)
• Convert srcSet to Next.js sizes prop where applicable
• Ensure alt attributes are preserved
• Handle any custom styling that may conflict with Next.js Image

Files to Update

1. src/app/podcast/page.tsx - Podcast episode thumbnails
2. src/app/podcast/[slug]/page.tsx - Guest headshots and sponsor images
3. src/app/events/page.tsx - Sponsor images
4. src/app/page.tsx - Sponsor avatars and supporter images
5. src/components/MemberCards.tsx - Member avatar images
6. src/components/UndrawIllustration.tsx - Illustration images

Benefits

• ✨ Automatic image optimization and format conversion
• ⚡ Built-in lazy loading for better performance
• 📱 Responsive images with automatic srcSet generation
• 🎯 Better Core Web Vitals scores
• 🚀 Improved SEO through optimized images

Testing Checklist

• Images display correctly on desktop and mobile
• No layout shift when images load
• Alt text is preserved and accessible
• Loading performance is improved (check Network tab)
• No console errors related to images

Resources

• Next.js Image Documentation
• Image Optimization Best Practices

Difficulty: Beginner-Intermediate

Good for contributors familiar with React who want to learn Next.js optimization patterns.

[Parikshit2304]

i would like to work on this

[tejas-2232]

Interesting, I can work on it.

Let me know in 48 Hours

Thank you 😃

[adiati98]

Hey @tejas-2232,
Thank you for your interest in this issue. ✨

This issue is assigned to someone else. Feel free to search and ask for another issue in our repository.

[tejas-2232]

Great, thank you.

Hey @tejas-2232,
Thank you for your interest in this issue. ✨

This issue is assigned to someone else. Feel free to search and ask for another issue in our repository.

[RounakJoshi09]

Hey @adiati98 ,This issue seems to have been open for quite some time without any recent updates. Would it be appropriate for me to take it on and submit a pull request that includes the proposed enhancement?

Thanks

[adiati98]

Hi @RounakJoshi09

Thank you for your interest in this issue. ✨️
But @Parikshit2304 might still be working on this.

That said, @Parikshit2304 , how's the progress here? Do you need any help?

[tejas-2232]

Hello, @adiati98
Can you please update the status from Available to assigned ?

[BekahHW]

@tejas-2232 you haven't @Parikshit2304 a reasonable amount of time to work on this. If you're looking for another issue, you can check out: https://github.com/orgs/OpenSource-Communities/repositories?type=source or https://github.com/Virtual-Coffee/VC-Community-Docs/issues?q=sort%3Aupdated-desc+is%3Aissue+is%3Aopen

[tejas-2232]

@tejas-2232 you haven't @Parikshit2304 a reasonable amount of time to work on this. If you're looking for another issue, you can check out: https://github.com/orgs/OpenSource-Communities/repositories?type=source or https://github.com/Virtual-Coffee/VC-Community-Docs/issues?q=sort%3Aupdated-desc+is%3Aissue+is%3Aopen

Hi Bekah, sorry, I didn't get your first line.