CODEWITHSUNDEEP
ios
Prabhu
Prabhu

Reputation: 13335

iOS image sizes for general purpose images (not navigation and tool bar)

For the navigation bar and toolbar icons, the sizes are specified as 22x22, 44x44 and 66x66. But what if I want to have an icon on my screen that's not on the navigation bar or on the toolbar? For example, a circular upload photo button on a registration page, that is around 100 x 100. So, an image of a camera inside a regular button.

  1. Are there any guidelines around how large these images need to be?

  2. Assuming a 100x100 version looks right on iPhone 6, what are the sizes I need to add in my Assets.xcassets? 50x50, 100x100, and 200x200?

  3. Do these custom images get scaled depending on the screen size?

Upvotes: 0

Views: 247

Answers (1)

FelixSFD
FelixSFD

Reputation: 6092

Answer 1:

Yes. Apple makes guidelines for everything. ;-) You can have a look at the Human Interface Guidelines. It contains some useful tips for designing your app.

It's a really long document and I haven't found information about the minimum size of images. But If your images are tappable, they should be at least 44x44 pt (not necessarily pixels; see "Answer 2") large.

Provide ample spacing for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls.

Source: iOS Human Interface Guidelines -> Visual Design -> Layout

Answer 2:

iOS uses 3 different sizes for images: @1x (which you usually don't put in the file-name), @2x and @3x

The @1x-images should have the same number of pixels in width and height as you are using in the interface builder (pt; points).

The iPhone 6 has a retina display, so it uses @2x. This is twice the resolution of @1x. So if your @2x-image has 100x100 pixels, the @1x-version needs to have 50x50 pixels.

@3x is NOT twice the size of @2x. It's the triple size of @1x. So in your example, you would need 150x150 pixels.

The Technote QA1686 contains some more information about the different resolutions.

Answer 3:

Yes. But especially on older devices and when you are using many images, the performance will be better, if you provide images of the correct size.

This image (a screenshot of the assets catalog, Apple shows in the technote I mentioned), illustrates the calculation of the image-sizes based on the size (in pt) used in the interface builder:

screenshot

Upvotes: 2

Related Questions