iOS: What resolution do these button images need to be?

Question

I have a button that scales in size depending on the size of the iPhone. For iPhone 6+ the button is about 165 x 165 and for regular iPhone 6 it is about 100 x 100. These buttons need a background image.

Do I make the button images the following sizes? @3x 165 x 165, @2x 110 x 110, @1x 55 x 55? I know the @3x, @2x and @1x need to be proportional with each other. I've started my image sizes at @3x because it is the biggest and I just let it scale down from there so it won't lose quality. I just want to make sure if this is best practice or not.

Answer 1

Those are the sizes I'd use. Unless your images have very distinct pixel-aligned thin lines, I don't think you'll notice the scaling.

Also, if your images are vector-based (or can be), I find it easiest to create them at 1x in Illustrator (or whatever), save them as a PDF, and set the scale factor of the image set to "Single Vector" in the asset catalog. Xcode then handles all the individual image creation at build time. If it turns out that your sizes aren't quite right, it is easy to edit the image... and you don't have to scale and save a bunch of variations.