# How to increase Discourse avatar resolution with JS?
**URL:** https://meta.discourse.org/t/how-to-increase-discourse-avatar-resolution-with-js/41807
**Category:** Support
**Created:** [March 31, 2016, 4:22am UTC](https://meta.discourse.org/t/how-to-increase-discourse-avatar-resolution-with-js/41807 "2016-03-31T04:22:46Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@Drew\_Warwick](https://meta.discourse.org/u/Drew_Warwick)
#### Post date: [March 31, 2016, 4:22am UTC](https://meta.discourse.org/t/how-to-increase-discourse-avatar-resolution-with-js/41807/1 "2016-03-31T04:22:46Z")
I prefer to increase the avatar sizes on Discourse so I can see them better. You’ll run into an issue doing this though because since the avatar images are 45x45 pixels, if you stretch them they get blurry. I had been using a snippet of of javascript (not made by me, and I forgot where I found it) to upscale the resolution of avatars since around last September, but a month or two ago it stopped working. Here is what I was using:
```plaintext
var originalAvatarImg = Discourse.Utilities.avatarImg;
Discourse.Utilities.avatarImg = function(options) {
if (options.size === 'large' || options.size === 45) {
options.size = 120;
}
return originalAvatarImg(options);
}
Discourse.Utilities.avatarImg({size: "large"});
```
What was changed in Discourse in the past month or two that would break this, and how can I change that code to fix it?
---
### Author:  [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [March 31, 2016, 4:41am UTC](https://meta.discourse.org/t/how-to-increase-discourse-avatar-resolution-with-js/41807/2 "2016-03-31T04:41:55Z")
~~Take a peek at this method (and the post above it):~~
Don’t look at this, aparently it’s out of date
[https://meta.discourse.org/t/how-to-change-topic-avatar-size/20689/5?u=deanmarktaylor](https://meta.discourse.org/t/how-to-change-topic-avatar-size/20689/5)
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [March 31, 2016, 4:44am UTC](https://meta.discourse.org/t/how-to-increase-discourse-avatar-resolution-with-js/41807/3 "2016-03-31T04:44:06Z")
That’s out of date with the widget post rendering, I think.
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [March 31, 2016, 4:44am UTC](https://meta.discourse.org/t/how-to-increase-discourse-avatar-resolution-with-js/41807/4 "2016-03-31T04:44:51Z")
From what I see in
`public/uploads/default/optimized/1X/`
there are 16 copies of each uploaded avatar ranging from 20x20 to 360x360
Notice the end of the file names. It might be easier to use the largest?
---
### Author:  [@Drew\_Warwick](https://meta.discourse.org/u/Drew_Warwick)
#### Post date: [March 31, 2016, 5:08am UTC](https://meta.discourse.org/t/how-to-increase-discourse-avatar-resolution-with-js/41807/5 "2016-03-31T05:08:24Z")
> [@Mittineague](#):
>
> It might be easier to use the largest?
It saves internet bandwidth if you’re downloading a smaller image.
> [@Mittineague](#):
>
> there are 16 copies of each uploaded avatar
Yeah, I had discovered that there were multiple sizes and Discourse didn’t just use the biggest one when the avatars were blurry after resizing them. I could watch for each element created in a userscript and update the avatars to use an image URL that pointed to an image with a higher resolution, but manually updating each and every element gets hairy. Prior to some of Discourse’s recent changes, the fix was as simple as changing a Discourse setting, and I assume that’s still possible but is accomplished through a slightly different process now.
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [March 31, 2016, 5:28am UTC](https://meta.discourse.org/t/how-to-increase-discourse-avatar-resolution-with-js/41807/6 "2016-03-31T05:28:06Z")
> [@Drew\_Warwick](#):
>
> slightly different process now.
Perhaps not so “slightly”
With the vdom perf improvement the post template is gone. And as riking mentioned Widgets is the way to go for this.
---
### Author:  [@Drew\_Warwick](https://meta.discourse.org/u/Drew_Warwick)
#### Post date: [March 31, 2016, 5:40am UTC](https://meta.discourse.org/t/how-to-increase-discourse-avatar-resolution-with-js/41807/7 "2016-03-31T05:40:36Z")
> [@Mittineague](#):
>
> Widgets is the way to go for this.
I’m not familiar with Widgets. Any pointers?
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [March 31, 2016, 5:56am UTC](https://meta.discourse.org/t/how-to-increase-discourse-avatar-resolution-with-js/41807/8 "2016-03-31T05:56:44Z")
> [@Drew\_Warwick](#):
>
> Any pointers?
Not many. I’m still going through the “getting familiar” stage for the most part and haven’t had time to try any of it yet.
I have a few topics bookmarked.
The one likely to be of most interest to you is
[https://meta.discourse.org/t/avatar-size-handlebars-script-no-longer-working/29230?u=mittineague](https://meta.discourse.org/t/avatar-size-handlebars-script-no-longer-working/29230)
others are
> [@A tour of how the Widget (Virtual DOM) code in Discourse works](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347):
>
> This is out of date. See [Widgets, the Widget API and their roadmap?](https://meta.discourse.org/t/widgets-the-widget-api-and-their-roadmap/292624) The latest builds of Discourse are much faster at rendering topics thanks to our [re-written post stream](https://eviltrout.com/2016/02/25/fixing-android-performance.html). I’ve written up [our new plugin API](https://meta.discourse.org/t/a-new-versioned-api-for-client-side-plugins/40051) but so far haven’t explained how the code all fits together. The purpose of this topic is to allow Discourse developers to understand how the new code works. What’s a Virtual DOM? A Virtual DOM is a data structure that enables browsers to re-render dynamic content very quickly. The techniq…
.
> [@Updating Discourse Plugins, taking the first step](https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241):
>
> I have to fully read the new plugin api format but my first problem actually has to do with this error: The discourse/components/post-menu object has been removed from Discourse and your plugin needs to be updated. PostMenu is a pretty important one and as far as I can tell does exist upon searching the Discourse repo on github. This is what is in the plugin: import PostMenu from 'discourse/components/post-menu'; import StringBuffer from 'discourse/mixins/string-buffer'; import { iconHTML } f…
.
> [@Using the JS API](https://meta.discourse.org/t/using-the-pluginapi-in-site-customizations/41281):
>
> Discourse’s JavaScript API allows themes and plugins to make extensive customizations to the user experience. The simplest way to use it is to create a new theme from the admin panel, click “Edit Code”, and then head to the JS tab. For file-based themes, the API can be used by creating a file in the api-initializers directory. For theme’s that’s {theme}/javascripts/api-initializers/init-theme.gjs, and for plugins, it’s {plugin}/assets/javascripts/discourse/api-initializers/init-plugin.js. The c…
---
### Author:  [@Yuun](https://meta.discourse.org/u/Yuun)
#### Post date: [March 31, 2016, 11:13am UTC](https://meta.discourse.org/t/how-to-increase-discourse-avatar-resolution-with-js/41807/9 "2016-03-31T11:13:52Z")
If the script in the first topic @Mittineague linked is what you’re looking for, most up to date version if it helps:
```plaintext
```
The effect is the same, but going through the plugin API should be more reliable, I think.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [April 1, 2016, 12:34am UTC](https://meta.discourse.org/t/how-to-increase-discourse-avatar-resolution-with-js/41807/10 "2016-04-01T00:34:17Z")
> [@Yuun](#):
>
> The effect is the same, but going through the plugin API should be more reliable, I think.
Absolutely, always prefer the api method, it will continue working for much longer cause we can add backwards compat as needed.
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [January 2, 2019, 4:54am UTC](https://meta.discourse.org/t/how-to-increase-discourse-avatar-resolution-with-js/41807/11 "2019-01-02T04:54:43Z")
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [January 2, 2019, 5:09pm UTC](https://meta.discourse.org/t/how-to-increase-discourse-avatar-resolution-with-js/41807/13 "2019-01-02T17:09:23Z")
Here are two guides to increase the size of the avatars on posts and on the homepage Latest without the effect blurred:
> [@How to increase avatars size on posts without making them blurred](https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214):
>
> loudspeaker warning This guide is now deprecated in favour of the theme component [Avatar Size and Shape](https://meta.discourse.org/t/avatar-component/106124) warning loudspeakerplay_button Original Content
[https://meta.discourse.org/t/how-to-increase-avatars-size-on-latest-without-making-them-blurred/89606](https://meta.discourse.org/t/how-to-increase-avatars-size-on-latest-without-making-them-blurred/89606)
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [December 4, 2021, 3:53pm UTC](https://meta.discourse.org/t/how-to-increase-discourse-avatar-resolution-with-js/41807/14 "2021-12-04T15:53:55Z")