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)