# Avatar Subsystem redesign

**URL:** https://meta.discourse.org/t/avatar-subsystem-redesign/15997
**Category:** Feature
**Created:** [May 27, 2014, 5:23am UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997 "2014-05-27T05:23:14Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [May 27, 2014, 5:23am UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/1 "2014-05-27T05:23:15Z")

</div>

I just deployed the implementation of

> [@Switch from Gravatar to HTML/CSS letters for no-avatar users](https://meta.discourse.org/t/switch-from-gravatar-to-html-css-letters-for-no-avatar-users/15336):
>
> Gravatars for users with no avatar specified use Identicons based on their IP address (or email), which can be kind of noisy – and it also means one image lookup per user. What if we switched to a simpler approach where the first letter of the user’s name was displayed as their default avatar, [ala esotalk](http://esotalk.org/forum/614-need-recaptcha-in-register-dialog) and the Google GMail app on Android? For conflicting letters (there are two users without an avatar that have “A” in their name, above) We could also color the blocks to reduce let…

It is a rather massive change to the way Discourse deals with avatars. We no longer include direct links to gravatar, so for example, this is no longer a concern on Discourse.

[https://meta.discourse.org/t/is-gravatar-indeed-a-privacy-leak/779](https://meta.discourse.org/t/is-gravatar-indeed-a-privacy-leak/779)

Additionally instead of displaying the impersonal squigly identihash we have nice looking letters.

The implementation is also a big perf boon as we no longer need to check avatars every 10 minutes with gravatar (which is a huge privacy leak imo)

Avatars are cached permanently.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [May 27, 2014, 5:39am UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/2 "2014-05-27T05:39:35Z")

</div>

Turns out our docker image is running an old version of image magick, will update the base image in the next week or so, but in the mean time I adjusted my usage. Deploying shortly.

---

<div class="post-metadata">

### Author: ![peey](https://avatars.discourse-cdn.com/v4/letter/p/85e7bf/32.png) [@peey](https://meta.discourse.org/u/peey)
#### Post date: [May 27, 2014, 8:14am UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/4 "2014-05-27T08:14:49Z")

</div>

Looks much cleaner, but shouldn’t HTML/CSS or SVG have been used instead of creating images for every user?  
I think using SVG would have saved much storage space and added more flexibility to avatar creation.

One zero storage example I can think of is where colors are randomly selected taking user’s username as seed in a RNG, and then extracting the user’s name’s first letter from the DB (shouldn’t be expensive since names are already displayed wherever there are avatars), and then inserting it in a SVG template.  
Since SVG images can also be cached, this shouldn’t put much load on servers, while saving precious storage space and adding flexibility to change all avatars in one go if need be.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [May 27, 2014, 8:39am UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/5 "2014-05-27T08:39:57Z")

</div>

> [@peey](#):
>
> I think using SVG would have saved much storage space and added more flexibility to avatar creation.

No very against that for 2 reasons

1. It is hostile to embedding (like @codinghorror has on his blog)
2. It complicates stuff. Now avatars are dead simple… `/user_avtar/sam/{size}/{upload_id}.png` no special code, easy to explain, no complex branch logic.

---

<div class="post-metadata">

### Author: ![Lee\_Ars](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lee_ars/32/1597_2.png) [@Lee\_Ars](https://meta.discourse.org/u/Lee_Ars)
#### Post date: [May 27, 2014, 4:41pm UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/6 "2014-05-27T16:41:25Z")

</div>

I love the fact that on an active forum without many custom avatars (like [Soylent](http://discourse.soylent.me/)), the topic listing has a very real chance of spelling out rude words. This makes me giggle with childish glee 😃

---

<div class="post-metadata">

### Author: ![elberet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/elberet/32/122404_2.png) [@elberet](https://meta.discourse.org/u/elberet)
#### Post date: [May 27, 2014, 8:34pm UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/7 "2014-05-27T20:34:06Z")

</div>

There’s even some abuse potential for creative miscreants, and there’s currently no tool to fix this short of removing inoffensive, on-topic posts for no reason other then that the users’ default avatars “just so happened” to spell out some four letter word… 😕

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [May 27, 2014, 8:35pm UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/8 "2014-05-27T20:35:46Z")

</div>

This is so theoretical. And posting in the topic will mess up the order, as posters get promoted to “most frequent” status and last poster changes all the time.

It’s also trivial to rename users in about 3 clicks if they insist on doing this.

I appreciate the concern, but it’s imagineering a bit.

---

<div class="post-metadata">

### Author: ![elberet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/elberet/32/122404_2.png) [@elberet](https://meta.discourse.org/u/elberet)
#### Post date: [May 27, 2014, 8:46pm UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/9 "2014-05-27T20:46:04Z")

</div>

Yeah, I guess I’ve just had too many bad experiences with forums full of 14 year olds… good thing that my WoW days are far, far behind me, altho it sticks to you… it really does. 😆

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [May 27, 2014, 9:02pm UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/10 "2014-05-27T21:02:25Z")

</div>

I think the current extra-mega-bold font is not a good idea. It is very readable (and _definitely_ better than Gravatar for many technical and visual reasons), but veers too far on the side of being large, so to my eye it looks childish and whimsical :

 ![](https://global.discourse-cdn.com/meta/original/3X/a/1/a172da66b30d509eb72f1774ee988e4c602a7ac8.png) 

I think a thinner, more whitespace friendly design (maybe not quite this thin, but not much fatter) would look a lot better:

 ![](https://global.discourse-cdn.com/meta/original/3X/4/e/4e7e37430941ae71d824ffbcb0fb3385dfa57034.png) 

(Stolen from the Android default color name blocks. Imagine those in different colors, too..)

---

<div class="post-metadata">

### Author: ![Vocino](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vocino/32/85136_2.png) [@Vocino](https://meta.discourse.org/u/Vocino)
#### Post date: [May 27, 2014, 9:19pm UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/11 "2014-05-27T21:19:57Z")

</div>

I like [Asana][1]'s implementation:

![](https://global.discourse-cdn.com/meta/original/3X/e/a/ea0552060332123894da6bd70426921ec28ef9c9.png)

Specifically, smallish thickish type with a lot of room to breathe within the square.  
[1]: [http://asana.com](http://asana.com)

---

<div class="post-metadata">

### Author: ![Lee\_Ars](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lee_ars/32/1597_2.png) [@Lee\_Ars](https://meta.discourse.org/u/Lee_Ars)
#### Post date: [May 27, 2014, 10:01pm UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/12 "2014-05-27T22:01:16Z")

</div>

> [@codinghorror](#):
>
> I think a thinner, more whitespace friendly design (maybe not quite this thin, but not much fatter) would look a lot better:

I’m tellin ya. Proxima Nova or Century Gothic. Dat’s where it’s _at,_ yo.

---

<div class="post-metadata">

### Author: ![elberet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/elberet/32/122404_2.png) [@elberet](https://meta.discourse.org/u/elberet)
#### Post date: [May 27, 2014, 10:38pm UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/13 "2014-05-27T22:38:53Z")

</div>

Nooo, it **must** be Comic Sans! \*ducks\*

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [May 28, 2014, 5:44am UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/14 "2014-05-28T05:44:39Z")

</div>

[http://comicneue.com/](http://comicneue.com/)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [May 28, 2014, 8:38am UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/15 "2014-05-28T08:38:53Z")

</div>

The new thinner version is rolling out now. Here it is for comparison with the older thicker one:

![](https://global.discourse-cdn.com/meta/original/3X/0/7/07b07c6cfa5506f2f220ed1f123b546f7bb40da0.png)

Much, much better to my eye!

---

<div class="post-metadata">

### Author: ![Vocino](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vocino/32/85136_2.png) [@Vocino](https://meta.discourse.org/u/Vocino)
#### Post date: [May 28, 2014, 6:09pm UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/16 "2014-05-28T18:09:59Z")

</div>

I like this though my personal opinion is there should be more room within the square, like this:

![](https://global.discourse-cdn.com/meta/original/3X/9/1/91e5760e1d06b91296bca3fac07193c5a9579863.png)

The above is Proxima Nova Bold with a subtle shadow/dark glow.

---

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [June 1, 2014, 10:11am UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/17 "2014-06-01T10:11:38Z")

</div>

After spending a couple of days getting used to this change, I still feel like the letter-avatars could look better. IMO most of the early mockups looked better than what we have currently. I think it’s that little bit of border that doesn’t feel right.

Border:  
 ![](https://global.discourse-cdn.com/meta/letter_avatar/ashledombos/90/1.png) ![](https://global.discourse-cdn.com/meta/letter_avatar/ashledombos/90/1.png) ![](https://global.discourse-cdn.com/meta/letter_avatar/ashledombos/90/1.png)

No border:  
 ![](https://global.discourse-cdn.com/meta/original/3X/3/7/372eea3642c44e1cc0a8a474ad6dc4cb1b35c171.png) ![](https://global.discourse-cdn.com/meta/original/3X/3/7/372eea3642c44e1cc0a8a474ad6dc4cb1b35c171.png) ![](https://global.discourse-cdn.com/meta/original/3X/3/7/372eea3642c44e1cc0a8a474ad6dc4cb1b35c171.png)  
(Using PT Mono. Dunno if that’s the font in use but it seemed pretty close).

Anyone else feel the same way? (edit: pic fix)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 1, 2014, 10:20am UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/18 "2014-06-01T10:20:08Z")

</div>

I really like the border and am a die hard fan of helvetica, but also think we should probably make this stuff pluggable, so you can have your own fonts and algorithm for your own site.

---

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [June 1, 2014, 10:28am UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/19 "2014-06-01T10:28:14Z")

</div>

+1000 to making it pluggable. Was just about to make a post about it. There is huge potential for bikeshed discussion here, for which ‘user’s choice’ is often a great remedy. I’d absolutely love a simple Avatars Customizer plugin that works in similar fashion to the new themer system.

Just changing up the avatar styling can go a long way to personalising your forum and making it feel less “mass produced”.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 1, 2014, 7:27pm UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/20 "2014-06-01T19:27:08Z")

</div>

I am not a fan of the border at large sizes but I do feel it helps legibility at the small sizes. So for me, it depends.

---

<div class="post-metadata">

### Author: ![Pugwash](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pugwash/32/3760_2.png) [@Pugwash](https://meta.discourse.org/u/Pugwash)
#### Post date: [June 2, 2014, 8:00pm UTC](https://meta.discourse.org/t/avatar-subsystem-redesign/15997/21 "2014-06-02T20:00:48Z")

</div>

Well done with the new Default Avatars, looks fantastic! Much cleaner than the previous kaleidoscopes.

The risk of a rude word popping up adds a certain edginess to my accountancy forum 😛

[Next page](https://meta.discourse.org/t/avatar-subsystem-redesign/15997.md?page=2)
