4

So I'm building an app that uses images for buttons. I provided both normal images and @2x images, however I'm not totaly sure which one I should use. There is basicly no diffrence if I use normal.png or normal@2x.png. However I've read that using @2x takes more memory, so I feel like I shouldn't do it. However, when I start my app in the iPad simulator, it looks bad when using normal size images, because it needs to resize them. When I use the @2x image, it looks normal. So any suggestions on how I should approach this?

WDUK
  • 18,870
  • 3
  • 64
  • 72
gabrjan
  • 3,080
  • 9
  • 40
  • 69

2 Answers2

9

You should include images both with .png and @2x.png within your application to support retina devices. This provides a nice user experience for your user.

Throughout your code, you do not explicitly specify the @2x suffix, as the OS will take care of that for you. For example, if you include image.png and image@2x.png in your project, and access it via:

UIImage* image = [UIImage imageNamed:@"image"];

The OS will select the correct image for you (.png for non retina devices, @2x.png for retina devices). You don't need to worry about the memory usage difference for each one, as long as you follow general memory management guidelines.

WDUK
  • 18,870
  • 3
  • 64
  • 72
  • ok i kina understand that, but when i try my app on ipad simulator it looks bad using image and using image@2x it looks ok. To be understand i mean that when i run it into 2x. So how about that? – gabrjan Nov 12 '12 at 15:23
  • Are you sure the normal image is of the correct size? `image.png` should be the correct size as to look normal and correct on standard resolution devices, whereas @2x should have double the resolution so that it looks correct and normal on retina devices. – WDUK Nov 12 '12 at 15:25
  • yes it's all totaly normal. And 2x are twice bigger i mean 4 times because of 2*2. and it looks fine on retina iphones however on ipad it cant be scaled to 2x – gabrjan Nov 12 '12 at 15:35
  • "however on ipad it cant be scaled to 2x", yes it can, Retina iPad devices exist. Change your device type to "iPad (Retina)" in iOS simulator. – WDUK Nov 12 '12 at 15:36
  • i mean on normal ipad when u push the 2x button it looks wierd. – gabrjan Nov 12 '12 at 15:38
  • I don't understand what you mean, can you clarify? – WDUK Nov 12 '12 at 15:40
  • Is the simulator showing the @2x image at the computer's full resolution? If it is, then it means that the normal (not @2x) images will be pixel doubled. – SomaMan Nov 12 '12 at 15:43
  • so to clarify, when i run my app on ipad5.1 simulator it looks fine, however it only takes like half of it's size, and there is a 2x button and when i click it my app resize to full simulator size however all my buttons are blury because they were risezed. If i use buttons at 2x they look ok because they are shrink before and normal there... – gabrjan Nov 12 '12 at 15:54
  • So you're doubling the size of the button **within the application**? If so, then you'll need 4 sets of images, `image.png` `image_large.png` and their @2x counterparts. It's coincidence that `image_large.png` and `image@2x.png` are effectively the same image, but it will make it clear in the code what's going on. – WDUK Nov 12 '12 at 16:00
  • I think you are running an iPhone app in the iPad simulator. If it is an iPad 1 or 2 it will always show the non-retina graphics (even when you hit the 2x button). If you want it to look good on iPad too create a universal app. – James P Nov 12 '12 at 16:29
  • Oh that "2x" button! Yes, as James stated, running an iPhone application on a non retina iPad will always use normal images, and retina iPad will just use `@2x` images. The 2x button will simply stretch the view, and it will always look a bit blurry. If you want it to look nice, create a Universal app with views for both iPhone and iPad. – WDUK Nov 12 '12 at 16:32
3

You should:

  • Include both regular and @2X images in your app.
  • Once you're finished with the app check it's memory footprint (is the app running out of memory or getting frequent memory warnings? Once compressed is the app exceedingly large and takes too long to download for your tastes?)
  • If memory is an issue start removing the @2X assets. You should eliminate the assets based on how large the asset is and how much worse it looks when resized. For example, a full-screen solid color background is not going to look much different when resized and might save you some memory. A small button with lots of intricate line work is going to look distinctly worse when resized but doesn't take a lot of RAM.
Mattia
  • 2,251
  • 1
  • 22
  • 27