Why do I need 1x, 2x, and 3x Images?

If you have been adding any image sets lately, you have probably noticed that more than one version of your image is needed. But why!?!

Once upon a time in 1984, Mac unveiled it’s first computer. It was a marvel and the images were truly stunning.

All of these breathtaking graphics looked the same on every computer.

Why?

Because all of their computers were 72 pixels per inch (ppi)!

What does that mean?

Let’s start by defining a pixel.

A pixel is is the basic unit of programmable color on a computer display or in a computer image. By adjusting the intensity of these tiny lights, any color or brightness can be created.

As time passed, technology advanced, computers got bigger, and then much smaller, and the quality of images improved. How?

Pixels per inch!

As you can see, our IPhones pack in way more pixels per inch than the original computers. This lends to a much clearer, crisper image.

You may have also noticed that not every phone has the same number of pixels per inch.

The screens on the first three generations are set at 163 ppi; those on the iPhone 4 and iPhone 4S, and IPhone 5 are 326 ppi. This is awesome because everyone loves improvements! However, it isn’t exactly easy or efficient to go back and change all of the images on pre existing apps to be compatible with new devices so….

A system was needed to create images that would conform to the various sizes of phones and operating systems.

And this is where Apple’s point system comes in…

What is a point?

A point is a unit of measurement that allows graphics to be scaled regardless of the resolution of the phone.

It is important to note that the point number does not always correspond to the number of pixels.

• When the resolution is 163 ppi, 1 point is equal to 1 pixel.
• At 326 ppi, as on like the iPhone 4, 5 and 6, 1 point is equal to 2 pixels across and 2 pixels down, or 4 total pixels.
• At 401 ppi as on the iPhone 6+, 1 point is equal to 3 pixels across and 3 pixels down, or 9 total pixels.

The point of points (haha) is to provide a consistent scale that is device independent. Instead of thinking about how many pixels per inch your label should be, think about how tall and wide you’d like it.

Types of Images

Bitmap Images which are also known as raster images, are pixel based. Therefore, they are composed of many pixels- each of which contains information about one color. Some fun facts…

• Bitmap images can be scaled down but not up
• The most common formats for these files are… jpg, bmp, png, tiff & gif files
• They are more common than vectors and are usually photos and detailed illustrations.
• If you zoom in on a raster image, you will see the tiny squares.
• It is difficult to convert bitmap to vector images but vector images can be easily converted to bitmap.

Vector Images

Created using mathematical formulas, vector graphics are easily resized.

• Zoom in on vector and the lines will be crisp and smooth
• Vector images are fully scalable. If you make them bigger or smaller, the image will retain it’s quality.
• The most common formats for these files are… eps, pdf, ai, sag, and wmf files
• Vector images are usually illustrations and logos

To use a vector image in your project…

1. Open the XCAsset.
2. Select “New Image Set” from the Editor menu.
3. Drag your image to the pane that has “App Icon” listed.
4. If it does not automatically list as Universal, go to the attributes inspector and check “universal.”
5. This will automatically resize your vector image to the device your app is running on.

Questions?