86

Why do we need these 3 particular image types?

If I have a button on my app with a background image say, 50 pixels x 50 pixels, why do I need 3 versions of this image? What's stopping me from just making one image that's much higher in res, say, 700x700 so when it shrinks down on any iPhone it won't fall under the max res the device would want?

Only thing I can think of is it just takes up more space, but for simple apps / a simple button it seems like it wouldn't cause any issues. I've tried it on a few devices and see no difference between them when I simulate it and do this method. However, as I dive more into apps and stuff I'm sure there is substance behind this technique.

Sulthan
  • 128,090
  • 22
  • 218
  • 270
CodeMark22
  • 1,199
  • 1
  • 9
  • 11
  • 3
    possible duplicate of [Need an explanation on the images in Xcode](http://stackoverflow.com/questions/26569995/need-an-explanation-on-the-images-in-xcode) – Rahul Sep 02 '15 at 13:26
  • 3
    Although this is a duplicate question as mentioned above (and the linked answer is pretty good), it's useful to note that modern versions of Xcode allow pdf files inside xcassets. The idea behind this is that you provide (vector) pdf files instead of pngs with a size as if it was an @1x image (this is the pdf document's dimensions since we're talking about vectors) and you mark it as 'Single Vector'. Then Xcode will produce any `@Nx` pngs needed for any device behind the scenes. – Alladinian Sep 02 '15 at 13:40

6 Answers6

70

If you don't have the exact size, there are two things that can happen:

Upscaling

@3x or @2x can be upscaled from @1x but usually the visual result is blurry, with thick lines and doesn't look good. Upscaling @3x from @2x can be even worse because subpixels must be used.

Downscaling

In general, the results are much better than with upscaling, however, that doesn't apply for all the images. If you have a 1px border on a @3x image, after downscaling it to @1x the border won't be visible (0.33px). The same applies for any small objects in the image. Downscaling destroys all details.

In general - for an image to look perfect, you want to avoid both downscaling and upscaling. You can always go with only @2x or @3x images and add other scales only if you see visual problems. Using higher resolution won't improve downscaling. High resolutions are used only to avoid upscaling. Downscaling from a high scale (e.g. @100x) to @1x won't create better results than downscaling from @3x.

dcow
  • 7,765
  • 3
  • 45
  • 65
Sulthan
  • 128,090
  • 22
  • 218
  • 270
  • I see. This all makes sense to me, but then it brings another question...if I am to have these 3 image types based on device...what happens when i have an app that uses both iPhone and iPad, and the size of the image double for the iPad to scale and look nice? then I have to have 3 images for the iPhone and 3 separate for the iPad....THEN how do you distinguish between which of those to use rather than the 1x, 2x or 3x? – CodeMark22 Sep 03 '15 at 16:01
  • 1
    @CodeMark22 You confuse scale and resolution but yes, you can specify separate assets for iPhone and iPad. – Sulthan Sep 03 '15 at 17:57
  • One important point missing here is, we need 3 sizes of images because we don't want a user having small resolution IPhone 5 to be downloading IPhone 6s images. IPhone 5 user wont notice much difference in quality but he will be downloading a hi-res IPhone 6 size images needlessly. – Muhammad Jan 12 '16 at 11:58
  • 2
    @Muhammad That's not necessarily true. The difference in size of a 10x10 px image and 20x20 px image doesn't have to be very big - few bytes, bigger resolution image can be even smaller than higher resolution image. Note that compression plays a big role in png images. Adding 1x variant for every asset can be an overoptimization. – Sulthan Jan 12 '16 at 12:07
  • 1
    As per apple, there is a concept of app slicing which makes sure the user downloading the app on iPhone 5 variants from app store will get the assets as per 2x resolution. And the user downloading the app on iPhone 6 variants will get the assets of 3x resolution. So @Muhammad needless to say apple has played intelligently and only downloads the assets of app as per the device variants. Hope that clears some doubts. – iAviator Aug 05 '17 at 15:42
  • Is it necessary to write @2x or 3x with every images before adding to Assets.xcassets or we can drop it from 1x to 2x or 3x block? which approach is better??? – iAj Sep 01 '17 at 06:21
  • @iajmeri43 The suffixes come from times before asset even existed and we needed them because otherwise iOS could not recognize which one is the correct resolution. Nowadays they are not needed because assets keeps a JSON with the necessary information. However, if you export your images with the correct suffixes, it is much easier to drag & drop them all to assets, otherwise you will have to do it one image at a time. – Sulthan Sep 01 '17 at 06:51
  • I have images coming from an api at 1024 x 768, does it mean I can use a max height of 256? (768/3) – Paranoid Android Dec 03 '17 at 15:21
  • I'm using phonegap with retina images. The code contains all three images so my app size is big what I do now? – Venka Tesh user5397700 Feb 16 '20 at 17:51
  • @VenkaTeshuser5397700 Use vectors nowadays. – Sulthan Feb 16 '20 at 20:49
  • @Sulthan how to implement this, can you share some link for my reference – Venka Tesh user5397700 Feb 17 '20 at 06:10
66

You need 3 kinds of images in Image Assets because in terms of Scaling or Pixels There are 3 kinds of Apple Devices (iPhone and iPad) that is

Normal device which terms to 1 pixel = 1 point@1x (Older iPhone and iPad devices)

Retina device which terms to 4 pixels(2 x 2) = 1 point@2x (iPhone 4+)

Retina iPhone6 and iPad which terms to 9 pixels (3 x 3) = 1 point@3x (iPhone6+)

Thus for providing same image in 3 scales iOS decides which image to show for which devices.Hope could help you understand this.

EDIT

enter image description here

Saheb Roy
  • 5,899
  • 3
  • 23
  • 35
  • That means if an Image in 1x is 320px, then it will be 1280px in @2x, Are u sure ?? – Mrug Jun 02 '16 at 08:01
  • No No image can have only 1 dimension in 1x if image is 320 px X 480 px then in 2x it will be its double I meantioned 4 pixels as for 1 point they get squared up hence when in dimensions of length x width . they get doubled. – Saheb Roy Jun 02 '16 at 09:33
  • Oh you considered 2 dimensions and gave total pixels. Ok got you !! I just edited to add more clarity. – Mrug Jun 02 '16 at 10:49
  • According to https://en.wikipedia.org/wiki/Retina_Display it seems the first Retina devices were iPhone 4, not iPhone 5 as mentioned in this answer. – Liron Yahdav Aug 30 '16 at 20:21
  • @SahebRoy This not correct. iPhone 4 has Retina display. – Gabriel Nov 21 '16 at 13:59
7

It is because if you provide one high resolution graphic it would be waste of space on a users' device. Thanks to app slicing the device will download (from App Store) only the parts that actually fits the device (so retina device won't download non retina graphics). This is why Apple created assets catalogs and this kind of rules to follow. They describe it in their sessions.

In short it is to decrease memory/disk usage so it is all about increasing performance and user experience

Julian
  • 9,299
  • 5
  • 48
  • 65
5

First of all, you need to know points vs. pixels behaviour. On non-retina devices, point vs pixels ratio is 1point=1pixel. On retina devices, there are two ratios: 1point = 2x2 pixels depending on screen size, and 1point=3x3 pixels, because of pixels density, that is quadrupled watching on non retina.
That's why you need this 3 types of images, to be shown on its highest resolution.

Stefan
  • 1,283
  • 15
  • 33
3

Complementing what Sulthan said:

Because you didn't propitiated proper images for a specific device, it has to downscale or upscale. These processes will use up your memory and processing, resulting maybe in a decrease of performance, depending on how many images at a time you're doing it and the size of image.

NSPunk
  • 502
  • 4
  • 14
2

If you provide only one big image you encounter several problems:

  1. Downscaling leads to the loss of quality (even if it is not huge)
  2. It takes more computational power to downscale the image than to display the already pre-rendered image
  3. The size of your binary gets increased and you are not able to benefit from app thinning which is introduced with iOS 9.

As you can see, producing only one image will impact the performance and quality of your app and it will disproportionately hit those with older devices. This is because:

  1. They need to downscale more. Also, the performance of their devices is not as good as that of the new ones, so they are much more likely to notice the lags with your app
  2. They do not have as much storage space so you really want to be able to use app thinning to help them
  3. The loss of quality will be the highest for them and considering the fact that the resolution of their devices is low, they will notice it.

Due to this users are likely to be unhappy and this is bad for you. Because, from my experience, unhappy users are 10 times more likely to rate your app than happy users. You don't want that, do you? :)

Andriy Gordiychuk
  • 6,163
  • 1
  • 24
  • 59