button image gets pixelated

Question

I have designed a lock icon in Sketch to add to a button in my application:

I exported it both in pdf and png (2x, 3x) to add to Xcode assets. Problem is when I run the app on iPhone (SE), heavy pixelation can be seen around the edges of the icon:

I've tried both pdf and png formats, but result stays the same. Am I missing any settings that need to be applied for image to look sharp on screen?

Answer 1

Bigger is not necessarily better for a UIButton 's image. Try to export your icon in more or less the same size with which it will be used. (Note that this also frees up memory in comparison to a way bigger image).

To adapt to different screens' resolutions, you should provide up to three images (@1x, @2x, @3x). You should read this excellent Apple's documentation on Image Size and Resolution . It explains perfectly how big should the images you provide in Xcode be.

They also have a good explanation on which format you should use according to the purpose of the image.

EDIT: You can also use vector ressources (.pdf files for instance) that will render perfectly for any resolution. You can read this article about how to implement it in your Xcode project (If you do so, please be careful in the attributes of the asset to check Preserve Vector Data and the Scales to Single Scale, otherwise it may not render well).

Answer 2

It will happen if image sizes are not correct

check the size of images. 1x,2x and 3x sizes are should be as followed

• 1x = 24x24 px
• 2x = 48x48 px
• 3x = 72x72 px

If images size are too big than ImageView then pixelate will happen

Hope this will help you