Search code examples
xcodeuser-interfacegraphicsretina-display

Adapting OSX Application's Images for Retina


We have an application in development that is currently only utilizing standard display resolution. How do we modify the @2x images for Mac Retina displays?

Say I have a button that is 50 x 100 px. Would I just double the dimensions and add a @2x extension?


Solution

  • Say I have a button that is 50 x 100 px. Would I just double the dimensions and add a @2x extension?

    You should at minimum find the original high resolution artwork, then scale that down to the destination size. In some cases, you will also want a slightly different (e.g. more detailed) image for the high res.

    Simply upscaling the existing resource is what one should avoid; it would accomplish nothing when finally drawn (apart from larger app and more memory consumption). That is to say, it would not be "Hi-Res", it would just be a larger image that would look the same to the end user -- rescaling is just happening at a different point in time and the results would both be pixelated (or equally blurred, depending on how it were rescaled). The only reason I can think of where you would ever do this would be if you lost (or never had a larger) the original HQ artwork, and wanted to use a rescaled image which was rescaled using a high quality rescaler -- in the event you also do no rescaling when drawing these images.