# Profile Image Looks Blurry After Resizing

**URL:** https://meta.discourse.org/t/profile-image-looks-blurry-after-resizing/104839
**Category:** Support
**Created:** [21 בדצמבר,‏ 2018,‏ 11:58am UTC](https://meta.discourse.org/t/profile-image-looks-blurry-after-resizing/104839 "2018-12-21T11:58:27Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![aronno755](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@aronno755](https://meta.discourse.org/u/aronno755)
#### Post date: [21 בדצמבר,‏ 2018,‏ 11:58am UTC](https://meta.discourse.org/t/profile-image-looks-blurry-after-resizing/104839/1 "2018-12-21T11:58:27Z")

</div>

I was trying to restyle and resize the profile image on user profile page using css. After resizing profile image through css it looks blurry and can’t find a way to fix the issue. Here’s a sample profile link to see the issue: [https://community.biafland.com/u/manik755/summary](https://community.biafland.com/u/manik755/summary)

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [21 בדצמבר,‏ 2018,‏ 12:00pm UTC](https://meta.discourse.org/t/profile-image-looks-blurry-after-resizing/104839/2 "2018-12-21T12:00:33Z")

</div>

You’re upsizing a 120x120 image to 500x500… You should use a higher quality image instead.

---

<div class="post-metadata">

### Author: ![aronno755](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@aronno755](https://meta.discourse.org/u/aronno755)
#### Post date: [21 בדצמבר,‏ 2018,‏ 12:02pm UTC](https://meta.discourse.org/t/profile-image-looks-blurry-after-resizing/104839/3 "2018-12-21T12:02:21Z")

</div>

I’m using a 768x768px image on the sample profile.

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [21 בדצמבר,‏ 2018,‏ 12:03pm UTC](https://meta.discourse.org/t/profile-image-looks-blurry-after-resizing/104839/4 "2018-12-21T12:03:03Z")

</div>

![](https://global.discourse-cdn.com/meta/original/3X/5/3/533eddece2a46ee8d6f92104a687b184bfc2a7ff.jpeg)

is definitely 120x120.

---

<div class="post-metadata">

### Author: ![aronno755](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@aronno755](https://meta.discourse.org/u/aronno755)
#### Post date: [21 בדצמבר,‏ 2018,‏ 12:08pm UTC](https://meta.discourse.org/t/profile-image-looks-blurry-after-resizing/104839/5 "2018-12-21T12:08:00Z")

</div>

Well, the original image is 768x768px. But its getting resized to 120x120 after uploading which should be 500x500 or any of my defined image size for profile. I don’t know how to change the dimension for profile image.

However, its showing a 500x500 image but its originally the system resized image of 120x120.!!

 ![Profile%20-%20manik755%20-%20Biafland%20(1)](https://global.discourse-cdn.com/meta/original/3X/2/b/2bcb4b8bec3c4045c79a9c6675c3846293e32614.png)

---

<div class="post-metadata">

### Author: ![aronno755](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@aronno755](https://meta.discourse.org/u/aronno755)
#### Post date: [21 בדצמבר,‏ 2018,‏ 12:11pm UTC](https://meta.discourse.org/t/profile-image-looks-blurry-after-resizing/104839/6 "2018-12-21T12:11:18Z")

</div>

Here’s the original image.

 ![Robert%20G%20Maines](https://global.discourse-cdn.com/meta/original/3X/a/e/ae87037051adc761d94b5cfe6d559ce849f048a8.jpeg)

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [21 בדצמבר,‏ 2018,‏ 12:35pm UTC](https://meta.discourse.org/t/profile-image-looks-blurry-after-resizing/104839/7 "2018-12-21T12:35:30Z")

</div>

This happens because the avatar size requested in that template is “huge”

> <https://github.com/discourse/discourse/blob/637850d8672855574aea8a43e5e1c1ad40ce0861/app/assets/javascripts/discourse/templates/components/user-profile-avatar.hbs#L2>

“huge” here means 120px for normal DPI screens and 240px for high DPI screens.

> <https://github.com/discourse/discourse/blob/84d4c81a26bb585f67809c6f8af25c2a385de754/app/assets/javascripts/discourse/lib/utilities.js.es6#L19>

If you want to request 500px avatars, you need to override the template [here](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/user-profile-avatar.hbs)

you can do it like so (in the Header section of your theme)

```plaintext
<script type="text/x-handlebars" data-template-name="components/user-profile-avatar">
<div class='user-profile-avatar'>
  {{bound-avatar user "500"}}
  {{#if user.primary_group_name}}
    {{avatar-flair
      flairURL=user.primary_group_flair_url
      flairBgColor=user.primary_group_flair_bg_color
      flairColor=user.primary_group_flair_color
      groupName=user.primary_group_name}}
  {{/if}}
  {{plugin-outlet name="user-profile-avatar-flair" args=(hash model=user) tagName='div'}}
</div>
</script>

```

You can read more about overriding Discourse templates [here](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-b-2)

Please note that if you override a template, and it changes in Discourse core, you need to update your override.

---

<div class="post-metadata">

### Author: ![aronno755](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@aronno755](https://meta.discourse.org/u/aronno755)
#### Post date: [21 בדצמבר,‏ 2018,‏ 12:44pm UTC](https://meta.discourse.org/t/profile-image-looks-blurry-after-resizing/104839/8 "2018-12-21T12:44:06Z")

</div>

That’s great. It worked like a charm. Thank you

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [20 בינואר,‏ 2019,‏ 12:48pm UTC](https://meta.discourse.org/t/profile-image-looks-blurry-after-resizing/104839/9 "2019-01-20T12:48:09Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.