A well-known avatar URL would be dang cool.

I just read Anthony's post on ES Modules and discovered rendered profile images in the article.

Whenever Anthony mentions a person, they link to their GitHub profile and render the GitHub avatars next to their user name. Cute! How does this work?

You can take a GitHub profile URL (github.com/stefanjudis), append a .png to it (github.com/stefanjudis.png), and off you go fetching all these profile images! Easy peasy.

But don't you think, too, that these inline avatars somehow change the article's vibe? By embedding some profile images, all these mentioned open source maintainers become "real humans". You almost want to check out their profiles just because their faces are right there in front of you.

This discovery fascinates me because my blog embeds inline images for external links, too. But it doesn't humanize anything.

This site renders favicons next to external links and it's surprising how different these two approaches feel. A profile avatar puts a person behind a link, whereas a favicon... well... a favicon just feels like a favicon next to a link.

This avatar topic reminded me of Jim's post about .well-known URLs for avatars. The idea is to have a standardized URL convention to fetch avatars and profile images (remember Gravatar back in the old days?).

Jim advocates for /.well-known/avatar. I'm game!

It could also be a slash page at /avatar, I guess?

Either way, my procrastination task of the day was to set up:

• stefanjudis.com/avatar
• stefanjudis.com/.well-known/avatar
• stefanjudis.com/.well-known/avatar.png

... because I need my profile pic quite often.

If someone now wants to make the well-known avatar URL happen or open a PR at the slash pages site, let me know! I'd love to see an /avatar route becoming a thing.

After publishing this post, many folks commented and shared their ideas about the problem. Let me collect the most valuable.

Of course, Terence Eden has written about this topic before. 😅 He wrote about self-owned avatars in 2020 and then again in 2024.

His latest thoughts proposed the following to handle avatars:

1. A user signs in to a service with the email address username@example.com
2. In a similar way to WebFinger, the service makes a request to: example.com/.well-known/avatar?resource=acct:username@example.com
3. If the request's Accept header has a MIME type of image/*, then the server immediately returns an image.
4. If the request's Accept header has a MIME type of application/json, then the server can return a WebFinger-style document with "rel":"http://webfinger.net/rel/avatar" and, perhaps, a list of different images, formats, and sizes.

I like this approach. A lot!

It's way more sophisticated than what I had in mind initially. Still, I like the idea of the server responding differently depending on the Accept header because it covers the quick'n'dirty "just give me the image" case the same way as some programmatic use cases like platforms fetching different formats, etc. Good stuff!

Being able to pass an email as a query parameter is smart, too! This approach makes the endpoint reusable for sites beyond my humble blog's size, which has a single user. I'd make an email parameter optional, though.

{
   "subject":"acct:stefan@front-end.social",
   "aliases":[
      "https://front-end.social/@stefan",
      "https://front-end.social/users/stefan"
   ],
   "links":[
      {
         "rel":"http://webfinger.net/rel/profile-page",
         "type":"text/html",
         "href":"https://front-end.social/@stefan"
      },
      {
         "rel":"self",
         "type":"application/activity+json",
         "href":"https://front-end.social/users/stefan"
      },
      {
         "rel":"http://webfinger.net/rel/avatar",
         "type":"image/png",
         "href":"https://cdn.masto.host/frontendsocial/accounts/avatars/109/292/179/443/349/306/original/cdd4d7ff5109af04.png"
      }
   ]
}

On another note, Eric mentioned that he uses a subdomain (avatar.yatil.net) for his avatar and Wenzel pointed out that the "normal" namespace at /avatar is probably too easily overwritten.

After thinking about all these URLs for a bit, it seems clear to me that a standardized avatar URL needs to be a) on the same domain (it could be too much hassle to set up a subdomain just to server avatar images) and b) in an uncommon location (/avatar is too easy to crash).

So, /.well-known/avatar is probably the best bet for a generic avatar URL.