Terminal: Why are my profile icons blurry

Created on 6 Jun 2019  路  10Comments  路  Source: microsoft/terminal

Environment

Windows build number: 10.0.18362.145

Steps to reproduce

Add icon to profile

Expected behavior

Icon is not blurry

Actual behavior

Icon is blurry

image

Area-User Interface Issue-Question Needs-Attention Needs-Tag-Fix Product-Terminal

Most helpful comment

Hey @isaac2004 - what is your screen scaling set to? We've actually been instructed (by the XAML guidelines) to use 16x16 icons at 100% scale. If you're on a "150%" display, that'll be 24x24... and if you're on a "200%" display (surface, etc.) they'll be 32x32.

Either way, we should set the scaling method to make it look better when we have to render icons at the wrong size.

All 10 comments

Could you share the images you're trying to use as icons? My guess is that they're just really big, and when UWP tries to scale them down to the icon size, they're getting resampled poorly.

cloud-32
cmd-32
pwsh-32
ubuntu-32

They aren't big, but they are bigger than what gets painted

Same when using remote URL
image

Looks terrible

I'm using the 64x64 version of this icon https://www.iconfinder.com/icons/395254/ubuntu_icon

During triage today we measured the actual icon size as about 24px. There's a good chance this is just UWP sampling your icons poorly, and I'm not sure there's too much we can do about that. Does using a smaller icon (like 24x24) look as blurry?

To follow-up, You'll likely want to size your icons at no more than 24px tall. If your icons are larger, they'll get scaled down to ~24px tall which will likely result in significant degradation.

To test this, I created 24px tall icons for my own Terminal profile which avoided the need to scale the icons down, and resulted in much crisper icons in the Terminal's new-tab menu:

image

Please confirm that you see similar improvements by resizing your icons to 24px tall using a tool like Paint.NET.

In the meantime, we'll be sure to update the profile configuration instructions we're working on to clearly state the recommended image sizes.

Thanks @bitcrazed but they are still kinda blurry, can you provide the ones you have?

Hey @isaac2004 - what is your screen scaling set to? We've actually been instructed (by the XAML guidelines) to use 16x16 icons at 100% scale. If you're on a "150%" display, that'll be 24x24... and if you're on a "200%" display (surface, etc.) they'll be 32x32.

Either way, we should set the scaling method to make it look better when we have to render icons at the wrong size.

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment.

Totally forgot to circle back, lowering the resolution per @DHowett fixed my issue, closing

Was this page helpful?
0 / 5 - 0 ratings