Improve performance of p5 contributors list

[quinton-ashley]

Topic

Loading the p5.js GitHub repository page requires loading hundreds of contributor pictures.

I have a 800mbps internet connection and though it only amounts to 45mb of data transferred, the amount of separate image requests is staggering.

It takes a full 10 seconds for the page to completely load and during that time JavaScript can even block the issues tab, releases, and other links from being clickable.

slow.mov

It'd also improve accessibility for users with metered internet connections to make the README.md as lightweight as possible.

An ideal solution would be to make a single spritesheet image with all the contributor pictures and have a page displaying them on p5js.org. This way custom CSS styling could be used to make the markdown table look nicer too.

A good temporary fix is to move the contributors section from the readme.md to a separate markdown page that can be linked to in the readme.

[Ansh-Sarkar]

Faced the same loading issue a few times @quinton-ashley . I agree that optimizing the README could be a great step forward. To add on to the suggestion of moving the contributors section to a separate page, we could maybe use a hybrid approach: keep a small, optimized list of top contributors (e.g., 5–10) in the main README and include a "View All Contributors" link to a dedicated page. This balances performance improvements with the p5.js community's commitment to recognizing contributors. Or maybe we could have only the names displayed which could be linked to their profiles.

[LalitNarayanYadav]

Hello! @quinton-ashley I have submitted a PR as per the suggestion and used the hybrid approach suggested by @Ansh-Sarkar . Please review this when you have time and let me know if any change is required.

[davepagurek]

I'm a little on the fence about leaving just a few contributors in the readme -- elsewhere I think there was discussion about randomizing the order to not make it seem like some contributors are the most worthwhile, and leaving just some may accidentally work against that goal.

Also for the sake of discussion, some other notes:

• The readme is updated via the all-contributors bot, so we may need to update the bot config to ensure any edits persist when new contributors are added, e.g. https://allcontributors.org/docs/en/bot/configuration#moving-the-all-contributors-table-into-a-different-file

• If I open the image of my avatar in a new tab, the URL includes a size parameter. e.g. https://avatars.githubusercontent.com/u/5315059?s=64 is this:

  

  If I change the url to end in ?s=20, I get this:

  

  While it doesn't change the number of requests, we could potentially use smaller images to reduce the overall size. Looks like there's a config option for all-contributors for that: https://allcontributors.org/docs/en/bot/configuration

[ksen0]

Hi all, because the project follows the all-contributors specification, the README file intentionally lists all contributors (read more here). Just leaving top 5-10 is not consistent with this approach to collective attribution. It would also be important to leave the emojis.

@LalitNarayanYadav are you interested in implementing @davepagurek 's suggestion of reducing the image sizes? I don't see any issue with that at all.

An ideal solution would be to make a single spritesheet image with all the contributor pictures and have a page displaying them on p5js.org. This way custom CSS styling could be used to make the markdown table look nicer too.

Edited to add: @quinton-ashley this would be really cool and be a great bridge between the README and the website "people" page that doesn't have the images, but would be great if it did! Would be great to see this, if someone wants to work on it.

[LalitNarayanYadav]

Thanks for the feedback, @davepagurek and @ksen0!

I appreciate the concern about randomizing the order and the importance of consistency with the all-contributors specification. I agree that keeping the collective attribution intact is essential, and that's why I proposed a hybrid approach — preserving the visibility of contributors while improving performance. However, if there's a consensus that we should include all contributors in the README, I’m open to adjusting the approach accordingly.

As for reducing image sizes, I’m happy to implement the changes based on @davepagurek's suggestion. I think a spritesheet image could be a more efficient solution, and I'll explore that further. I also like the idea of linking to a dedicated "contributors" page on p5js.org, as it could provide a better user experience while maintaining a clean README.

Let me know if you’d like me to proceed with these changes in a follow-up PR!

[ksen0]

Thanks @LalitNarayanYadav feel free to go ahead first with the PR to reduce image size, so that can be merged in quicker (first in 1.x and then once thats merged, you could make the matching PR for dev-2.0 as well). We can keep this issue open for spritesheet (or other ideas that come up) or improvement to the website people page. Does that sound alright?

I've updated the title to be more descriptive of the current scope but let me know if anyone has another idea!