Create Avatars from Initials

Create Avatars from Initials

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:

https://ui-avatars.com/api/?color=d5d5d5&background=28555D&length=3&rounded=true&size=128&font-size=0.35&bold=true&name=Jeannot+Muller

The above link shows the following result:

Generated Avatar

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)

  • Bold (bold)

  • Font Color (colour)

  • Font Size (font size)

  • Format (format)

  • Image Size (size)

  • Initial Characters (length)

  • Name (name)

  • Rounded Image (rounded)

  • Uppercase (uppercase)

Did you find this article valuable?

Support Jeannot Muller by becoming a sponsor. Any amount is appreciated!