✨ Enhancement: Optimize Contributor Avatar Image Sizes

[Karan-Palan]

Is your feature request related to a problem? Please describe

The current implementation of the contributor avatars on the Community page leads to longer load times due to unoptimized image sizes. This affects page performance, based on @benjagm's comment on #1364

Describe the solution you'd like

1. Optimize Image Loading with Next.js Image Component:
   • Use priority for the first 10 images to load eagerly.
   • Enable lazy loading (loading="lazy") for images not in the initial viewport.
   • Adjust quality to 75 to reduce file size without compromising visible quality.
2. Serve Images in Modern Formats:
3. Programmatically resize oversized avatars server-side before rendering.

Describe alternatives you've considered

No response

Additional context

No response

Are you working on this?

No

[benjagm]

Thanks for creating the issue @Karan-Palan !!

@DhairyaMajmudar, thoughts on this approach?

[DhairyaMajmudar]

Thanks Karan-Palan for opening the issue

Point 1 of solution is good to use in our case, we already use Next image component, adding mentioned configuration will improve it further.

As of point 2 we need to update the next.config file with desired image format and domains from where they are fetched. In our case we are using json date to fetch images so it won't useful here.

[Karan-Palan]

Makes sense regarding point 2 @DhairyaMajmudar . You're working on this right?

[DhairyaMajmudar]

Thanks! Yeah, I'm opening a PR

[Karan-Palan]

Thanks! Yeah, I'm opening a PR

Alright!