Create avatars from user profile images

[NateWr]

Describe the problem you would like to solve
Several UX mockups for the new submissions lists (#7495) make use of user avatars. These will help editors quickly identify other editorial staff in assignments, discussions, and when using the "logged in as" facility.

Describe the solution you'd like
When a user uploads a photo to their user profile image, create a copy of that photo that is cropped to be square and in appropriate avatar sizes.

For users who don't have a user profile, the system should generate a backup avatar from their initials. These should use different colors so that they can be distinguished by initials and color when they appear alongside other avatars. An example of generating SVG avatars is here: https://tqdev.com/2022-generate-avatars-initials-php.

Who is asking for this feature?
This will enhance the assigned editors in the summary panel (#8890), the discussions in the summary panel (#8896), and the logged-in user profile in the site sidebar (#8879).

Additional information
Ideally, an open source image processing library should be used. This will allow us to generate images in appropriate formats (png, jpeg, webp) and with appropriate compression.

Avatars should be saved in a public directory so that they can be loaded with a URL directly to the file. This will ensure they can be cached by the browser to prevent lots of extra requests for each page.

Avatars should be created at 1x and 2x screen densities. Then <picture> and <source> tags can be used to serve the correct one to save on screen size.

Avatars should be saved as squares, not circles. The circle effect can be applied through CSS.

A migration should be written to generate avatars from any existing user profile images.

Specs Update - Tuesday, October 1st, 2024

Currently, we depend on users to upload their images to provide visual cues alongside their usernames. However, it's common for users not to upload any image, resulting in a list of names that lacks visual appeal and makes recall more difficult. Utilizing initials as avatars adds a touch of character to their profiles, allowing users to leave a unique imprint. Additionally, this approach mitigates security concerns associated with using personal images in the system. When examining certain existing products, such as some of Google's services, we observe a colored circle, the hue of which seems random, accompanied by one or two letters as initials. Apple and Slack follows a similar approach with its Mail and Contacts applications. Given its prevalence among use

How initials should work

1. Short Names

2. Long Names
   Given Name (a string with two or more words separated by space or punctuations) and Last Name (a string with two or more words separated by space or punctuations) will return two initials (first letter of the Given Name and first letter of Last Name)

3. One initial displayed: When the user inputs only their given name or an email address (in cases where the invitation is sent but not yet accepted by the user)

The General Rule of Thumbs are:

• Single names, a string with no spaces, and most email addresses will return one initial
• Given Name (a string with two words separated by space or punctuations) and Last Name (a string with two words separated by space or punctuations) will return two initials (first letter of the Given Name and first letter of Last Name)

Followup Issue
#10489

[asmecher]

See also: #8028

[Devika008]

After reading through a lot of GDPR constraints, I think we should stick to just doing this: the system should generate an avatar from their initials. These should use different colors so that they can be distinguished by initials and color when they appear alongside other avatars. An example of generating SVG avatars is here: https://tqdev.com/2022-generate-avatars-initials-php.

I think this will make the process less complicated and more streamlined