# User Avatars - Best practice

**URL:** <https://community.weweb.io/t/user-avatars-best-practice/3067>\
**Category:** How do I?\
**Created:** [June 15, 2023, 1:10pm UTC](https://community.weweb.io/t/user-avatars-best-practice/3067 "2023-06-15T13:10:15Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![rory](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@rory](https://community.weweb.io/u/rory)\
**Post date:** [June 15, 2023, 1:10pm UTC](https://community.weweb.io/t/user-avatars-best-practice/3067/1 "2023-06-15T13:10:15Z")

</div>

What’s the best practice for adding user avatars?

I’ve tried adding a container with 100% Radius  
If the User has a profile pic in the DB, display it.  
If User doesn’t have a profile pic in the DB, show text with users initials and set the background colour.  
For some reason my images won’t populate into the table.

With regards to the background colours, I was going to assign a unique colour to each user when their profile is created but I came across this which would be good to integrate if possible.

> **[string-to-color](https://www.npmjs.com/package/string-to-color)**
>
> Generates color from any string or any object. Latest version: 2.2.2, last published: 3 years ago. Start using string-to-color in your project by running \`npm i string-to-color\`. There are 59 other projects in the npm registry using string-to-color.

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [June 15, 2023, 5:52pm UTC](https://community.weweb.io/t/user-avatars-best-practice/3067/2 "2023-06-15T17:52:09Z")

</div>

Hi @rory, [here’s one way](https://tella.video/rory-profile-avatars-cxbx) you could do it.

Does that help or is it not what you had in mind?

---

<div class="post-metadata">

**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\
**Post date:** [June 16, 2023, 2:59am UTC](https://community.weweb.io/t/user-avatars-best-practice/3067/3 "2023-06-16T02:59:01Z")

</div>

Hey @Joyce ! That’s very helpful! A follow up q: Is there a way to automatically compress these user images so that it takes up less storage?

Example, someone uploads something that’s 3000px x 3000px and we shrink it down to 300px automatically to store.

Just in case some users upload profile pictures that are huge…?

---

<div class="post-metadata">

**Author:** ![rory](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@rory](https://community.weweb.io/u/rory)\
**Post date:** [June 16, 2023, 3:38am UTC](https://community.weweb.io/t/user-avatars-best-practice/3067/4 "2023-06-16T03:38:35Z")

</div>

Thanks @Joyce, that’s a very nice solution and I also learned new formulas today 😄

Unfortunately, for some reason my images aren’t coming through. I’m not sure what I’ve done wrong.  
Is there anything that might prevent them from rendering?

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e0b0d589c092304475c30103623d6024b3954361.png)

Also, is there a way to change the Avatar’s background color dynamically so a list of users can be distinguished from each other?

I tried using some Javascript but I don’t know how to get it to work.  
I’ve tested it in my browser’s console and it is returning a hex value.

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/b6cf6ef388354630ccecb89cb9d2fc2ce0f3eb3e.png)

It’s probably not the most practical way to do this as it doesn’t consider legibility but here’s the original code. It’s supposed to change based on the user email **context.item.data?.[‘email’]**.

```auto
function generateHexColor(itemName) {
  // Generate a hash code based on the input item's name
  let hashCode = 0;
  for (let i = 0; i < itemName.length; i++) {
    hashCode = itemName.charCodeAt(i) + ((hashCode << 5) - hashCode);
  }

  // Convert the hash code to a 6-digit hex color
  let hexColor = (hashCode & 0x00ffffff).toString(16);
  hexColor = "00000".substring(0, 6 - hexColor.length) + hexColor; // Pad with zeros if necessary

  return "#" + hexColor; // Return the hex color with a '#' prefix
}

// Example usage
const itemName = "context.item.data?.['email']"; 
const color = generateHexColor(itemName);
console.log(color);

```

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [June 16, 2023, 6:21am UTC](https://community.weweb.io/t/user-avatars-best-practice/3067/5 "2023-06-16T06:21:57Z")

</div>

you need to add `return color` at the end.  
Also in your code `itemName` is a static string. If you want to make it dynamic select the variable/item from the panel under the code, it will add automatically the right code to retrieve it.

---

<div class="post-metadata">

**Author:** ![rory](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@rory](https://community.weweb.io/u/rory)\
**Post date:** [June 16, 2023, 8:01am UTC](https://community.weweb.io/t/user-avatars-best-practice/3067/6 "2023-06-16T08:01:53Z")

</div>

Thanks @dorilama, that did the trick.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/3b1bd26a0226d364ce37bc9b86290fce576334b5.png)

If anyone else is interesed, I used the following JS to change the background color which takes legibility into account.

No doubt there’s a more elegant approach but this is what chatGPT gave me 😁

```auto
function generateHexColor(itemName) {
  // Generate a hash code based on the input item's name
  let hashCode = 0;
  for (let i = 0; i < itemName.length; i++) {
    hashCode = itemName.charCodeAt(i) + ((hashCode << 5) - hashCode);
  }

  // Convert the hash code to a 6-digit hex color
  let hexColor = (hashCode & 0x00ffffff).toString(16);
  hexColor = "00000".substring(0, 6 - hexColor.length) + hexColor; // Pad with zeros if necessary

  // Calculate the brightness of the generated color
  const red = parseInt(hexColor.substr(0, 2), 16);
  const green = parseInt(hexColor.substr(2, 2), 16);
  const blue = parseInt(hexColor.substr(4, 2), 16);
  const brightness = (red * 299 + green * 587 + blue * 114) / 1000;

  // Adjust the color if it doesn't have sufficient contrast with black
  if (brightness < 80) {
    // Make the color lighter by reducing each RGB component by 50%
    const newRed = Math.floor((red + 255) / 2);
    const newGreen = Math.floor((green + 255) / 2);
    const newBlue = Math.floor((blue + 255) / 2);

    hexColor = (newRed << 16 | newGreen << 8 | newBlue).toString(16);
    hexColor = "000000".substring(0, 6 - hexColor.length) + hexColor; // Pad with zeros if necessary
  }

  return "#" + hexColor; // Return the hex color with a '#' prefix
}

// Example usage
const itemName = context.item.data?.['email']; // Replace with your input item's name
const color = generateHexColor(itemName);
console.log(color);

return color;

```

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [June 16, 2023, 5:13pm UTC](https://community.weweb.io/t/user-avatars-best-practice/3067/7 "2023-06-16T17:13:53Z")

</div>

> [@rory](#):
>
> Is there anything that might prevent them from rendering?

Yes! You need to bind to the URL. So `Item.data.Profile_pic.url`

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [June 16, 2023, 5:19pm UTC](https://community.weweb.io/t/user-avatars-best-practice/3067/8 "2023-06-16T17:19:42Z")

</div>

> [@raelyn](#):
>
> Is there a way to automatically compress these user images so that it takes up less storage?

Mmmm if you use the file upload to WeWeb’s CDN, I don’t think so BUT you could show an error message when the file size is bigger than you want it to be so the user knows to upload a smaller file.

Here’s one way you could do it:

 ![CleanShot 2023-06-16 at 19.17.36@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/285fc3a62d2472dcc23d939abb07dcb9c141296c.png)

To compress it automatically, I think you’d need to upload it directly to your database or CDN and have the compression happen there. We’re currently working on new file storage integration so this can be done more intuitively in the future.

Does that help?

---

<div class="post-metadata">

**Author:** ![lisan](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/lisan/32/13628_2.png) [@lisan](https://community.weweb.io/u/lisan)\
**Post date:** [August 17, 2025, 4:02pm UTC](https://community.weweb.io/t/user-avatars-best-practice/3067/9 "2025-08-17T16:02:27Z")

</div>

This is great, Joyce! I was wondering if things have changed and if there’s now a simpler, more direct way to achieve this?