Avatars (also known as profile images) are a great way to represent users in web applications (especially in the ones with social or collaborative features). It’s like icons, but for human beings.
But as your application grows, you start to realize that not everyone is quick to upload an avatar for their account.
If your application uses one of those silhouette images as a fallback avatar, then soon you will have more “John Doe” avatars than personalized ones. Not cool to look at when there are 10 avatars side-by-side and they are all this grey human silhouette.
Using letter avatars is one way of providing diverse fallback avatars.
You usually use the first letter of the username or the two-letter initials of a user’s full name to generate the avatar. To add some flair, you pick a colour from the predefined palette based on the hash of some user data that is unlikely to change.
For a long time, on Toph, letter avatars were generated on the fly. Although the images were cached, there was still a lot of unnecessary work happening on the backend around this.
Late last year this was changed. The images are now being generated as a part of Toph’s build process and stored alongside other static assets.
- There are 10 images for each of the 26 letters in upper case, each with a different background colour.
- A grey ‘-’ for temporary accounts.
The code serving avatars was updated to pick one of these images deterministically based on the handle of the user.
To generate these images, I wrote a small Go program.
Running this program will generate 261 images.
You can shave off some additional bytes from these generated images using a program like
optipng. By running
optipng -o7 on these images we see the size go down from 1.9 MB to 1.1 MB.
comments powered by Disqus