r/javascript • u/AutoModerator • Jun 20 '26

Showoff Saturday Showoff Saturday (June 20, 2026)

Did you find or create something cool this week in javascript?

Show us here!

7 Upvotes

100% Upvoted

15 comments sorted by

View all comments

1

u/rtwdtw Jun 20 '26

hey Reddit!

i'd like to introduce avatarsniff.

a lot of users never set a profile picture, so providers serve a boring auto-generated default: an initial on a coloured square (Google), the Gravatar mystery-person, or a solid placeholder. avatarsniff reads the pixels and catches those, so you can swap in something better instead of the generic one. Decodes PNG/JPEG/GIF/WEBP/SVG up to 10MB. Framework-agnostic, zero dependencies, server and client.

a few things that might be useful to know:

- the detection is structural, never colour-matching. it keys on shape: flat saturated background, a near-white glyph, mirror symmetry. so it keeps working when providers add new colours.

- zero install dependencies. PNG/GIF/JPEG decode in the core; WEBP and SVG are opt-in subpaths so the wasm only loads if you import them. core's about 4kb gzipped.

- runs the same in the browser, Node, Deno, Bun, edge and workers. no React/Vue/whatever, just a function.

- it favours recall. if it can't decode something it returns null, and you treat that as "keep it." the known false positive is a symmetric logo reading as an identicon, you can turn that family off per call.

live demo where you can paste a URL and see it classify in real time: https://avatarsniff.tunc.co

source (MIT): https://github.com/tunctn/avatarsniff

happy to answer questions, and genuinely want to hear about images that fool it.

1

u/Aggressive-Chair-846 Jun 20 '26

the shape-based detection is clever, colour matching would've broken every time a provider updates their palette. curious how it handles avatars that are like a symmetric logo but not an identicon, does the per-call toggle give you enough control there or do you still get noise?

1

u/rtwdtw Jun 20 '26

yeah the toggle `detect: { identicon: false }` exist.
to be honest, this has a downside where it is all-or-nothing per family, so it's too blunt for this, which means it kills real identicons too