Xcode images explanation

Question

What makes an image 1x, 2x or 3x (@1x, @2x, @3x)? How can you make a 3x image?

vacawama · Accepted Answer · 2018-07-11T15:13:39.187

iOS uses points instead of pixels in its coordinate systems. In the original non-retina devices (iPhone, iPhone3G, iPhone3GS, iPad, iPad 2, iPad mini, and early iPod touches) one point in the coordinate system mapped to one pixel on the screen of the device. At that time, life was simple, you provided images to your app that mapped to the point size and everything looked great.

When Apple introduced the first retina display devices (iPhone 4, iPad with Retina Display, and iPod touch 4), the devices had 2 pixels for every point. Apple devised a clever way of dealing with this. The programmer just had to add a second image to their program with the increased resolution and add @2x to the name. No changes to the code were needed. If your code loads an image called "house", iOS will load "house" on a non-retina device (such as the iPad 2 or original iPad mini), and it will use "house@2x" for the retina devices. The iPhone 6 Plus has even higher resolution so it uses a @3x version.

So what makes an image @1x, @2x, or @3x? If your "house" image is 120 pixels by 90 pixels, then your "house@2x" image should be 240 by 180 pixels, that is twice the number of pixels in each dimension ("2x" for short). The "house@3x" version should be 360 by 270 (3 times the number of pixel in each dimension).

It's up to you to make sure that the @2x and @3x versions have more detail, and not just more pixels. You can use a program like Photoshop or Pixelmator to create your images. Start by creating the nice highly detailed version of your image (the @3x version), and then scale it down to the @2x resolution and save that version as your @2x version. Then open your @3x version again and scale it to the @1x resolution and save that as your @1x version. Add all three versions to the Assets Catalog in Xcode, and iOS will load the appropriate version for the appropriate devices.

Thank-you for this answer. It makes sense! I have one question and I have photoshop. You said to start creating the @3x version of the image. How do I do this? Are their dimensions? A resolution? Can I make the image any size. Thanks for the answer. — Nathan Schafer, Oct 26 '14 at 11:46
It's up to you how big you want your image to be on the screen. If your image is to be 50 points by 50 points on the screen of the app, make your 3x version 150x150, your 2x version 100x100, and your 1x version 50x50. So in Photoshop, you would create an new image with dimensions 150x150. After creating this image and saving it, you would rescale it by setting the image size to 100x100 and save that under a new name for the 2x version. Then reload the 150x150 version and set the image size to 50x50 and save that under a new name for the 1x version. — vacawama, Oct 26 '14 at 11:56
Thanks I am grateful for your answer and will know tick it. Thanks! — Nathan Schafer, Oct 26 '14 at 21:27

Steve Rosenberg · Answer 2 · 2014-10-26T17:44:42.210

9

Read this to learn about the different resolutions:

http://www.paintcodeapp.com/news/iphone-6-screens-demystified

If you are looking for an inexpensive and easy way to create graphics, that will export in all three sizes, get Sketch 3:

http://bohemiancoding.com/sketch/

With Sketch you can make a graphic and then export it immediately in any size class you need.

Here are Photoshop step by step instructions for changing size. If you have a vector drawing - lines and other shapes - you can start at any size and increase or decrease the size. The three photos below show increasing an image size. If you have an image like a jpeg then you will want to start large and work smaller to avoid distortion.

enter image description here

edited Oct 26 '14 at 17:44

answered Oct 26 '14 at 05:31

Steve Rosenberg

19,348
7
46
53

1

Thanks, but I do not know what I makes a image 1x, 2x or 3x. Can you or anyone help. – Nathan Schafer Oct 26 '14 at 08:54
Added some more help for Photoshop. – Steve Rosenberg Oct 26 '14 at 17:45
1

Thanks for your answer it also helped but I can only tick one answer and that will be the other person. Sorry but thanks! – Nathan Schafer Oct 26 '14 at 21:28
Hey no problem. You got your problem solved. I see you have >15 reputation, so you can upvote each of the responders for 10 reputation additional. – Steve Rosenberg Oct 26 '14 at 21:32
Thanks. What do you mean with the last sentence. – Nathan Schafer Oct 26 '14 at 21:35
1

Click the voting arrows up. The ones on the left side of each answer. Typically you both upvote (10 points) and accept (15 points) your winning answer. The person receives 25 total reputation. You can also, upvote any other helpful answers (10 points). Rep points go to the responder. – Steve Rosenberg Oct 26 '14 at 21:38
Yes @NathanSchafer you should up vote helpful answers. – Naeem Jan 13 '15 at 10:02
I could not do this before because my reputation was too low. – Nathan Schafer Jan 13 '15 at 22:11

score 0 · Answer 3 · answered May 21 '19 at 16:07

0

There are plenty of online tool out there where you put the largest size there (1024x1024) and it will generate resized version for you. e.g. https://www.iconcutter.com

answered May 21 '19 at 16:07

sarunw

8,036
11
48
84

score 0 · Answer 4 · answered Aug 27 '19 at 06:19

0

You can also use Prepo mac application for different size images like 1x, 2x and 3x.

Prepo link of app store

You need to just add your image and you can export with different sizes of those images (Artwork). It also supports app icons also.

answered Aug 27 '19 at 06:19

Vivek Lathiya

76
7

Xcode images explanation

4 Answers4

Linked

Related