Show HN: Generate avatars from user initials

by lasserafn • 9 years ago

164 96 9 years ago

SVG is good. SVG is well-supported, though for the oldest browsers you’d still want PNG. Server-side user-agent detection would work fine for that.

dawnerd• 9 years ago

Honest question, is anyone building new apps and actually care about older browsers? We’re using svg for everything now and haven’t run into a problem with support.

cyberferret2• 9 years ago

Nice service - I was looking for something like this to generate default avatars for our SaaS app recently.

How does it handle middle names? i.e., does "John Arthur Smith" still return (JS)? What about reverse names, e.g. "Smith, John Arthur"? Is it smart enough to parse the comma and work out first/last initials from that?

Addendum: I also assume that you intend this service to be a 'once off' generation of a user avatar which can be stored locally? Do you rate limit so that people cannot simply dynamically generate avatars for ridiculous long lists of people on their web page?

amyboyd• 9 years ago

Just tried it -- by default it renders the first and third initial: https://ui-avatars.com/api/?name=John+Doe+Third

You can add "&length=3" to the query string and it will render all three initials: https://ui-avatars.com/api/?name=John+Doe+Third&length=3

lasserafn36• 9 years ago

Thank you!

It handles last names and middle names as such:

- your example would be JS, however if you specify a desired length of 3, it would be: JAS.

I actually haven’t tested commas and such but I will definitively add this! Added it to my todo

cyberferret2• 9 years ago

Brilliant - thanks for this. Also, would be a nice feature to have the colours randomise themselves as an option, so that I could have different coloured avatars on my people listing without having to worry about generating pleasing colours and ensuring that the foreground and background do not clash.

lasserafn36• 9 years ago

Ut stores the avatars on the server, cached by all parameters (not the name, but the generated initials) to avoid generating them again. Also some response headers are set to ask browsers to cache the response. I would also recommend users of this to download the avatars, as you suggested, especially to ensure fastest possible response rates.

Actually there is no rate limiting, but seeing just how many visitors this HN post has gotten, I may have to add some sort of limiting.

I haven't really figured exactly what I'm going to do regarding limiting and servers. Currently I'm setting up servers in each region my provider supports, to fix latency issues, and spread the load

ComputerGuru• 9 years ago

SVG is awesome... but this is a basic enough subset of SVG that SVG is unwarranted. CSS will do this just fine (and any browser capable of displaying this SVG can probably support the CSS features required to pull this off).

lasserafn36• 9 years ago

I absolutely agree, I would also recommend anyone to use CSS and HTML, it's pretty straightforward.

However for those that: 1) Don't want to 2) Don't know how to 3) Required rendering besides HTML views

This can be pretty useful :-) I do agree with you. I would actually consider adding SVG support to this as well.

mstaoru• 9 years ago

No Chinese? https://ui-avatars.com/api/?name=马云

lasserafn36• 9 years ago

I'm working to support Chinese as well, preferably would be support for all languages. Sadly not all fonts support each character so I've been resorting to use different fonts for different unicode scripts :)

StavrosK2• 9 years ago

Props for supporting Greek out of the box.

lasserafn36• 9 years ago

Chinese support has been added, good catch! I actually thought I had it covered.

However due to caching, the request above will not work before tomorrow. You will have to input another name. I apologize.

I may clear the image cache later today just to fix any issues related to this.

mgkimsal• 9 years ago

Newly cached example: https://ui-avatars.com/api/?name=%E9%A9%AC%E4%BA%91%E9%A9%AC...

Well.. my copy paste didn't work! :(

dmitriid3• 9 years ago

For web this is done with 1 line of Javascript and a div with rounded borders, really

   const initials = name.split(' ').map((n) => n.substr(0,1)).slice(0,2).join('')

   <div style="border-radius: 9999px; background-color: navy">
     <initials here>
   </div>

Adjust width, height, font-size to your liking

lasserafn36• 9 years ago

I'd absolutely recommend anyone, that has the ability, to generate them using HTML and CSS, it's way faster. You could even use the core package the generate the initials (as it's a little more than just each letter of each name)

padolsey• 9 years ago

Yep! Or even:

    const initials = name.match(/\b\w/g).join('')

tyingq3• 9 years ago

JavaScript's \b in a regex doesn't like unicode.

But, yes, this does seem an odd thing to call out to a remote api for.

This would need some work to match the features of what was posted, but not much. https://jsfiddle.net/g6nrs5cq/

lgessler• 9 years ago

Note that the "take the first codepoint" approach doesn't work for all languages. Take Hindi for example. This is a name:

    प्रेरणा
    'preraṇa'

The convention for initials in Hindi is such that this would be the "initial":

    प्रे॰ (< प + ् + र + े + ॰)
    'pre'

which is the first four codepoints combined (because they are in some sense considered a single character) plus another codepoint!

If for some reason you needed to respect locale-specific initialism conventions for a lot of different locales, it might be worth introducing an abstraction for determining the initials of a name.

lasserafn36• 9 years ago

Thanks for letting me know! I will stuff different languages over the coming months to better manage such things :) didn’t know that

dmitriid3• 9 years ago

http://www.kalzumeus.com/2010/06/17/falsehoods-programmers-b...

wavelen• 9 years ago

how about "border-radius: 50%"?

dmitriid3• 9 years ago

Yeah, it also works. 9999px stuck in my head for some reason.

latchkey• 9 years ago

Woah, Robohash is 6 years old now, time goes so fast... https://robohash.org/

lasserafn36• 9 years ago

Wow, that is so cool! Can't believe I haven't seen this before.

bluefin• 9 years ago

There's also this: https://github.com/tobiaslins/avatar

lasserafn36• 9 years ago

That's so cool!

tobiaslins• 9 years ago

Thanks! :) If you have any feedback for improvements, let me know!

j_s• 9 years ago

Hat tip to the evil growth marketing technique (source long lost, sorry) suggesting use of a default female "outline" avatar to strongly motivate account creation / gender reassignment (and perhaps even replacement with genuine profile pictures)!

Edit: Twitter recently discussed changing default avatars, in part because their default was often left in place as "fun and cute": https://blog.twitter.com/official/en_us/topics/product/2017/...

My main point was that default avatars can drive sign-ups motivated primarily just to change it.

lasserafn36• 9 years ago

I'm a little sad that I didn't do this

homero2• 9 years ago

Now I see why the top of https://giphy.com/gifs/homer-simpson-the-simpsons-bush-4pMX5... and it made me click it

lasserafn36• 9 years ago

.. I still don't get it :D

Kiro• 9 years ago

What is this referring to?

wastedhours2• 9 years ago

Not heard of it before, but my interpretation is:

For a service where the early adopters are predominantly male (perhaps an invalid assumption, but a lazy tech stereotype), you have the default picture be the outline of a female to incentivise the male to "correct" the default by uploading their own picture (demonstrating they're a male, rather than female).

Interesting thought process if my interpretation is correct.

superasn• 9 years ago

I'm just guessing but maybe that if I see a female avatar for my profile I may be motivated to change it with my own profile image? not sure though.

lasserafn36• 9 years ago

In regard to latest edit with Twitter

I think it's interesting how much thought goes into default avatars, and that it can be used as a marketing tactic. Thanks for providing link to Twitter as well. Guess I'll have to think more about it in the future.

oneeyedpigeon• 9 years ago

Could analyse any name/username given to determine most likely gender and set it to the opposite.

lasserafn36• 9 years ago

Absolutely, I've played around with this. There are tons of open source libraries to determine gender from name. Obviously it cannot be 100% correct, but it can provide a guess

earlybike4• 9 years ago

Nice idea. As one wrote, this can easily done with one line of JS but having this as an web API which returns an image file is definitely neat.

However, I see a privacy issue with sending all my user's real names to some 3rd party service (even if they claim there's no tracking or something similar).

lasserafn36• 9 years ago

Absolutely, I'd probably also just use CSS and HTML and use the core package: https://github.com/lasserafn/php-initials to generate the initials, it's faster and you won't depend on third-party.

I absolutely see your point, that's also why I open-sourced the code (see footer), but obviously I could be using different code or track it on the server (nginx or similar?). This is not the case, but I understand. Another option is to use the core generator (which is also open sourced) so that the generation happens locally :) But then again, CSS+HTML does not require any generation

earlybike4• 9 years ago

Why don't you rather provide a service which generates more complex avatars such as those from Github[1] or Slack.

Your API consumer sends some unique string (user-id, hashed user-id or hashed username or whatever they like) and you send back an unique avatar for that string. Moreover, you as the API provider offer different themes (e.g. tablecoth, space invaders, pixel-faces, etc.) which the consumer can again slightly customize (e.g. color, size, etc.) to have a unique style over all its avatars.

You current solution is elegant but at the same time just too easy to build oneself.

[1] There was a code golf competition on SE, maybe useful in this context: https://codegolf.stackexchange.com/questions/82290/generate-...

dewiz• 9 years ago

If you use only the initials, you can cut or fake the other letters since they're ignored anyway. Not 100% privacy but better than sending the full name

earlybike4• 9 years ago

Yes and true but this already half of the API. The rest is just the CSS for the rounded box and color.

lasserafn36• 9 years ago

Solid points :D Sadly theres not much I can do (I think?) to make people believe that there is privacy.

I guess generating them locally (or using CSS) would be the best option for anyone concerned with privacy

donohoe• 9 years ago

That was the approach I took to same probelm for users on an annotation service.

This seems nice but still overkill.

lasserafn36• 9 years ago

Yeah, it absolutely is (ui-avatars). I think its a neat little think to act as fallback for gravatar, but I totally agree that it's overkill

mundanevoice• 9 years ago

It won't be if you only send the first letter of the first and last name.

ZykezIX• 9 years ago

Awesome!

lasserafn36• 9 years ago

Thank you! :)

vog• 9 years ago

Nice idea! What surprised me most: It is also very well executed, with a sane and simple API, good performance considerations, and it fits its purpose almost perfectly.

Having said that, please pardon my ignorance, but:

What's the advantage over simply not using an avatar at all?

lasserafn36• 9 years ago

Thanks you!

Honestly? Nothing really. Well, you don't have to think about the code part but besides that? Nothing. Actually it would be more performant to use CSS and HTML (or SVG?) to generate avatars. I have a core package (used to generate the initials), and if used that with html, it would be far better.

I use the service for our internal products, as gravatar fallbacks

oever• 9 years ago

Two of my favorite avatar generators:

https://www.peppercarrot.com/en/article391/cat-avatar-genera...

the furry version of

https://robohash.org/

lasserafn36• 9 years ago

Haha, they're so great!

There's also this one: http://avatars.adorable.io

est• 9 years ago

generative anime avatars.

https://hiroshiba.github.io/girl_friend_factory/index.html

https://makegirlsmoe.github.io/

IgorPartola• 9 years ago

Robohash is fantastic. I have been using its output as my personal avatar for years now. Sad thing is that I can’t remember the input I used to generate the robot I use.

Unlike most of these, the robots are pretty distinctive.

StavrosK2• 9 years ago

Looks like robohash has the cat one: https://robohash.org/lala.png?set=set4

egypturnash• 9 years ago

Oh wow the cat avatars are SO INCREDIBLY CUTE

foxhop2• 9 years ago

I pulled invatar (https://github.com/Bekt/invatar) into my code base for Remarkbox (https://www.remarkbox.com)

invatar generates SVG and the way I use it is slightly different, I inline the SVG directly into HTML!

lasserafn36• 9 years ago

Super cool! I like the SVG support part

lasserafn36• 9 years ago

also, Remarkbox looks nice

foxhop2• 9 years ago

Thanks! Please add yourself to the beta list, I'm launching another group this weekend!

flotillo• 9 years ago

Perhaps I'm missing something here, but isn't this just an API that draws two letters inside a circle?

Why is this at the top of HN and receiving such accolades? It's neither interesting nor technically challenging.

Am I just missing the satire here?

lasserafn36• 9 years ago

I dont get it either :) Yes, that’s basically all it does.

I don’t think theres anything to it

lasserafn36• 9 years ago

However interest is subjective, and it’s obviously interesting to some, considering the traction it’s gotten.

wingerlang2• 9 years ago

Cool to see thai on the header example. However the results doesn't really make sense, for example this "name" โจ เคน (Jo Keen) has the first letters of each word จ (j) and ค (k) despite the order. However the service outputs โ (o) and เ (k).

If you really want to support it, you could maybe put some simple rules (might work in 90% of all cases) that you only grab the 1st consonant in each word. However even that won't be 100% correct because.. well, language rules basically.

nqzero2• 9 years ago

i'm stuck generating avatars server-side in java - anyone know of a good package ?

tyingq3• 9 years ago

Others pointed out doing it with css works fine.

You could also just generate inline SVG in the html, something like this: https://jsfiddle.net/8tfjqjmy/

nqzero2• 9 years ago

i don't control the client (html or javascript) - i'm reimplementing the server side api

so i need to generate the avatar on the server side as a jpeg

kauegimenes• 9 years ago

I like using http://avatars.adorable.io/

OJFord2• 9 years ago

I don't understand why one would prefer an API to a CSS for this?

I'm not even saying don't add the dependency - why should this project be an API instead of some CSS that I load, and then write:

    <div class="ui-avatar-com ui-avatar-com-blue">OF</div>

The only thing I can see is the gravatar callback (which incidentally has to use a different endpoint anyway to work-around gravatar not supporting query params) - is that not as niche of a use as it seemed to me?

t1o5• 9 years ago

Probably because you don't have to have different css styles for many of the options like image size, font size, language, color. Though these can be achieved with css.

One use case I see is for native mobile apps to generate the avatars as an initial profile image during the signup.

lasserafn36• 9 years ago

It’s made to be a gravatar fallback :)

The reason its not CSS is because this api generates the initials for you.

CSS is way faster, so I’d recommend that

OJFord2• 9 years ago

The reason its not CSS is because this api generates the initials for you.

It's been a while since I've written any CSS, but I'm pretty sure you can select first letters? Useful for drop caps, for example.

lasserafn36• 9 years ago

Product Hunt: https://www.producthunt.com/posts/ui-avatars

karmakaze• 9 years ago

Very nice.

Noticed that the combination of background and rounded results in a .png with a non-transparent corners.

https://ui-avatars.com/api/?background=0D8ABC&rounded=true

lasserafn36• 9 years ago

It’s transparent to me, weird.. I’ll have to look into this. Thanks for feedback :)

CM30• 9 years ago

Neat service. Reminds me of this add on for XenForo:

https://xenforo.com/community/resources/dynamic-letters-avat...

That said, I've personally never liked using dynamic avatars on websites I'm involved with. They've always seemed a bit generic, regardless of whether they're gravatars, these letter avatars, gender symbols, etc.

Always felt it'd work better if my services simply took a random avatar from a large gallery of thematically appropriate pictures instead. Like say, on a gaming forum it'd give them a random video game character picture, and on a TV show forum one from the show in question.

But that's just my opinion on the matter. This seems like it'll work well for people who like that stuff.

EthanV2• 9 years ago

Pretty neat but it seems the letters do not line up correctly. In such a small space any slight misalignment is really obvious.

I noticed the <Margin on the left is 16px, on the right is 17px. Similarly from the top is 21px and the bottom is 20px. It makes it look really off (to me).

https://i.imgur.com/NzZ429q.png

lasserafn36• 9 years ago

Ouch, Yeah appears pretty obvious. Will add some rounding to the sizes or similar

aymeric• 9 years ago

I love you for creating this.

lasserafn36• 9 years ago

I’m so glad to hear such feedback! Thanks!

jwatte• 9 years ago

That could also just be done with client local JavaScript, with much less chance of downtime or service load time...

Show HN: Generate avatars from user initials

Related Stories