CODEWITHSUNDEEP
iosxcodesprite-kit
SgtDrPeppers
SgtDrPeppers

Reputation: 45

Understanding image sizes in Xcode

I apologise if this has been answered but I can't seem to understand no matter where I look. I have been trying to make a Chess game using SpriteKit in Xcode. I don't understand the 1x, 2x and 3x options in the assets folder.

It seems like the image is the smallest when I put it in 3x, which seems counter-intuitive. Also, what resolution is best to design for? It doesn't seem like the actual iPhone resolutions are used in the iOS simulator.

Thanks

Upvotes: 0

Views: 474

Answers (3)

tomDev
tomDev

Reputation: 5760

Also, what resolution is best to design for?

The biggest resolution you will need. In most cases, @3x. So if the image "is" 10x10, design it being 30x30 for the @3x files, and scale down to smaller resolutions.

• 30x30 is the [email protected]

• 20x20 is the [email protected]

• 10x10 is the pic.png

The simulator uses the image according to the device it is simulating. So the iPhone 6S+ will use @3x if available.

PNG is the recommended extension, and you can use http://tinypng.com to reduce the file size, including splash screens.

Upvotes: 0

Badal Shah
Badal Shah

Reputation: 7602

1x , 2x , 3x is different size of images according to different phone's resolution.

You can find imagesize according to device resolution in below link.

IconMatrix

Basically,

@1x images are for the iPhone 3GS - 'standard' resolution devices (3.5" screens)

@2x images are for the iPhone 4 and 4S which contain 3.5" Retina screens and  also used for the iPhone 6.

Retina 4 @2x are for the iPhone 5 and 5s (4" Retina screens)

@3x images are for the new iPhone 6+,iPhone 6S+ (5.5" super-Retina [3x] screen)

Note :- As describe by apple in document

For all images and icons, the PNG format is recommended

Upvotes: 0

Jörn Buitink
Jörn Buitink

Reputation: 2916

You get a great overview from apples docs:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html

Basically, you need images with higher resolution for devices with higher resolution. If an icon is 32x32 pixel for iphone 3, you add an 64x64 image for iphone 4 (retina, @2x) and an 96x96 image for iphone 6 (even higher resolution, @3x).

Upvotes: 2

Related Questions