Create Avatars from Initials
2 min read
As a developer, you often face the challenge of having to generate or integrate an avatar image, e.g. for the profile. There are several ways to do this:
You can offer the user an upload option and then save the profile picture.
A user’s email can be matched against services such as gravatar.com.
It is checked whether a profile picture is stored in the authentication service used.
However, if the user does not want to upload a picture, or no picture can be assigned to the user online, it is now expected that the profile picture will be replaced by a placeholder with the initials. Here we have 2 options:
For web applications (Xojo Web, any framework, pure HTML etc., you can generate a profile picture with CSS.
With native apps (e.g. with Xojo, Swift, Java, etc.) you can generate an image with the initials.
At least for web applications, there is a simpler alternative, which with a little local caching can also be used for desktop apps (assuming that almost every computer nowadays has an internet connection at some point).
However, external APIs must meet several requirements:
The service must be high-performing and reliable.
The images should be cached.
Implementation must be effective and simpler.
There should be options to adapt the service to its application (size, design, etc.).
UI Avatars offer a wide range of customization options and integration can be reduced to simply including an image in an tag via a simple URL:
The above link shows the following result:
As you can see, we defined our own background colour and font colour, opted for 3 digits (the default is 2 initials), made the picture rounded, set the font size and handed over a username.
Have fun playing around with the API. By the time of writing you can change the following settings:
Background Color (background)
Font Color (colour)
Font Size (font size)
Image Size (size)
Initial Characters (length)
Rounded Image (rounded)
Did you find this article valuable?
Support Jeannot Muller by becoming a sponsor. Any amount is appreciated!