Did you never wanted to serve letter avatars from a fast CDN to take advantage of low network latency, efficient caching strategies and be technology independent?
Using CSS for a basic letter avatar is not always the right solution.
This repository contains pre-generated PNG and SVG images for all single and two letters avatars, including variants with 19 background colors. That's 25,688 avatar images ready to be served from edge nodes and cached efficiently.
You can import any avatar image as follows:
<img src="https://letters.noticeable.io/E0.png" />
<img src="https://letters.noticeable.io/E0.svg" />Images must use https://letters.noticeable.io/ as base URL. Each image is named using one or two uppercase letters followed by a number that ranges between 0 and 18 included. The number depicts one of the 19 background color variants that you can use.
We recommend generating a URL per user when an account is created and to save the generated URL next to other user data.
To create the user avatar URL you need to proceed in 3 steps:
- Extract the single or 2 letters from the user display name, transform them to uppercase and append them to the base URL;
- Hash the user display name or email to get a number, apply modulo 19 and append the value to the URL obtained in 1;
- Append the image type as extension (.png or .svg supported).
Ideally, when a user updates his display name or email you should regenerates his/her default avatar URL.
Do you want rounded corners or a disk as a background image? let's use CSS:
<img src="https://letters.noticeable.io/E0.svg" style="border-radius: 8px" />
<img src="https://letters.noticeable.io/E0.svg" style="border-radius: 50%" />