Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

base64 menu icon with Retina resolution #314

Closed
JayBrown opened this issue Apr 6, 2016 · 6 comments
Closed

base64 menu icon with Retina resolution #314

JayBrown opened this issue Apr 6, 2016 · 6 comments

Comments

@JayBrown
Copy link

JayBrown commented Apr 6, 2016

Using base64 for the menu icon works great… on Macs with legacy resolutions. But is there a way to use a higher icon resolution/size for Retina displays? (I tried by simply doubling the standard 18x18 size to 36x36, but it doesn't work.)

@mm2270
Copy link

mm2270 commented Apr 6, 2016

@JayBrown Have you tried opening the image in Preview.app and changing the resolution to 144 pixels/inch prior to making the base64 data? Don't change the dimensions, just the resolution, from the default 72 to 144. That's what I've been doing and it seems to create a high res image for display in the menu for me.

Some examples. Below are custom icons I made for some menu plugins I'm working on. First one is how they both display on a Mid 2014 MBP Retina.

retina

And how the same icons from the same plug-ins appear on a Mid 2012 MBP (with older display)

non-retina

Quite a big difference, so it seems to work OK for me using the above technique. The OS simply scales the image resolution down accordingly when its being used on a non Retina system, so the trick is to create the image data with the higher display resolution (not size) in mind, and OS X will take care of the rest.

@JayBrown
Copy link
Author

JayBrown commented Apr 6, 2016

I've now encoded the icon at 144 ppi and 36x36 pixels. On my legacy display OS X automatically downscales to 72 ppi, which results in the necessary 18x18 pixels. I think that's what I was looking for. Thank you!

@JayBrown
Copy link
Author

JayBrown commented Apr 7, 2016

Retina works as well. Splendid.

@luckman212
Copy link

Having some trouble generating a "universal" base64-encoded PNG data that has the correct size on non-Retina displays. Can one of you guys post one of the ones that is working for you so I can play around with it?

@JayBrown
Copy link
Author

JayBrown commented Sep 30, 2018

This is one of the PNG data strings that worked on both Retina and older Macs:

iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAqklEQVR4nGL4z0AdSCVj4AZBqH8sMOF/ogz/Of4CRXjhIpxQEUm4CCNUlybcBITB/zhB1F9DJBEpsCYJhMhfE7AIO0LkZRjYDFQ3YvqXOBGCipR/Uckgqrlo1KBRg0YNGjVo1KBRg0aoQT8CEQL/uEAUSiNCGkQhNyL+mIJFOBAi0EYEUFABqokJJvdPCNqI4YKLsENFRBEOgepSxnQhBZBqBgEAAAD//wMA7zsOXl0uqHMAAAAASUVORK5CYII=

@JayBrown
Copy link
Author

Generate actual png with echo -n "$base64_string" | base64 -D -o icon.png

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants