Why is my custom request icon blurry?

[Amy Bartlett]

I would like to use the same icon set as another application that our company use for consistency across the customer experience.  The icons I have been provided with are 48px by 48px PNG files.  I uploaded one of the icons to use as a custom request icon and the image appears blurry in the customer portal.  I downloaded the image using "save image as..." in the browser from the customer portal and it is still a 48px by 48px PNG but it is visibly blurry.  Like it was processed as part of the upload.  I've seen this sort of change before in image conversion but only when a PNG file has been saved as a JPG.   Here are the 2 images:

• Original: 
• Following Upload

Any thoughts about what could be causing this?  And how I might prevent it?

[Brant Schroeder · Accepted solution]

Amy,

  Welcome to the community.  Atlassian uses SVG files so they can have a very small crisp image.  To get a crisp png file we make our custom icons at 600px by 600px and save them as a PNG file.  This will be small if you optimize it for the web so it loads quickly and should not be blurry when you view it.

[Sussi Åström]

Hi @Brant Schroeder

I am having the same issue as @Amy Bartlett

I've tried making the png 600px by 600px from an svg, but still get a blurry icon.

Any other suggestions?

Cheers, 

=)Sussi

[Brant Schroeder]

Is the icon blurry before you upload it?  Also if you have an svg just use it, don't make it into a png.

[Sussi Åström]

The icon is crystal clear before uploading. I would use svg, if it were an option. Jira SM Cloud infroms "Could not load image, format is not valid," when trying to uplaod a svg.

[Brant Schroeder]

If you change the image size to 64px by 64px and upload what happens?

[Sussi Åström]

Hey, no difference be the image size 64x64 or 600x600.

[Brant Schroeder]

@Sussi Åström I am not able to recreate.  Can you share your icon?

[Sussi Åström]

@Brant Schroeder Here's the image / icon.

[Brant Schroeder]

@Sussi Åström Looks like Atlassian is converting it to a 48x48 pixel png.  Mine also got blurry.  I am wondering if it has to do with the soft edge color on the image even when I dropped it into photoshop at 48x48 pixels it got a little rough on the edges.  what dpi did you create it at?

[Sussi Åström]

@Brant Schroeder The svg has been created 300dpi by our graphic designer and converted to png.

[Sussi Åström]

@Brant Schroeder I've been testing different icon sizes and dpi - the end result is blurry in all. I just don't get what the optimal would be. Frustrating.

[Kasper]

@Sussi Åström Did you manage to solve the issue?

[Sussi Åström]

Hey @Kasper unfortunately not. I  gave up for now.

[Anna Romanova]

Any news on this? I've been having the same issue - doesn't matter how I try to resize the png it's still blurry. Maybe just uploading SVG's would be easier, if it's not possible to sort out the pngs

[Brant Schroeder]

I do not work for Atlassian so I do not have an update.  You can submit a support issue here: https://support.atlassian.com/contact/#/ and see if they can provide some insight.

[Abby Kiesling]

We also have this issue.  Has anyone found a solution?

[Mariano]

Still having this issue on Data Center in 2024, any workarounds?

[David Rodriguez]

+1

[David Rodriguez]

Okay, I've just discovered that if you publish the page still with the blurry emoji and refresh right after, the emoji is then updated reflecting the good quality. At least that was in my case, hope it helps