How do you resize a PNG without losing clarity and sharpness?

Question

I need a few icons for my navigation and tab bars on Xcode 6, so I downloaded a few icons from:

https://icons8.com/web-app/new-icons/all

Yet once I download them and open the file, every size seems pixelated and not as clear cut and sharp as it looks on the actual website.

Why is that? What would be a method to download it just as how it looks and resize it to use it for iOS mobile application? Any insight or help would be appreciated.

Answering the question in the title literally: you don't. As bitmap images, you only have a fixed number of pixels. Anything scaling up or down needs to invent 'new' pixels, and that will always change the original data. Perhaps you should take a look at vector illustrations. — Jongware
@Jongware Any site you can recommend me to for downloading iOS mobile icons for free? All prepared just to be used? — Jo Ko

Rutger Rutger · Accepted Answer · 2015-09-05T13:48:25

Try placing them in the 2x or 3x size in your .xcassets

The 1x size is equal to the amount points on your screen (not pixels). The iPhone 3GS has 320 points in the width so the amount pixels are also 320. The iPhone 4 which has a Retina display also has 320 points, but the actual pixels are 640. So retina needs 2x and the image file needs to be 2 times larger than you expect them in points on your screen. Same for 3x.

I usually work with vectors, you can use them in Xcode as .pdf file, you can scale them as you like without getting blurried images.

How do you resize a PNG without losing clarity and sharpness?

1 Answers