Overview of images types in iOS

It’s always good to know what options you have before diving into code. I will leave here short overview of all images types used in iOS development and you can read more about specific ones using separated articles.

1. Xcassets folder itself and what is it for.

.xcassets folder is used to keep all the image resources in one place and separate them from your source files. In your project you can have multiple .xcassets folders if you want, but usually one is enough. Inside this folder you can define any amount of inner folders (groups) to group your images by purpose or any other criteria like “controller” where these images are used. Read More…

2. Standard Images

iOS SDK supports PNG, JPEG and PDF images (about last one we’ll talk later in “Vector images” section). You can simply import any .png/.jpg into your .xcassets folder and use it by name. There is a little difference between these formats that you should know about.

JPEG provides images with compression, and you can notice whenever you exporting image in .jpg format in any design/draw software - it will ask you about what quality it should have (1-10, default usually is 7). It will help you to have a smaller size for big images used as parallax background and other big elements, where it should not look precise. However, JPEG doesn’t support transparency, so it can’t be used as overlay to something.

PNG is format that provides accurate images. It has transparency so can be used as overlay in your UI. However, PNG doesn’t provide much compression, so some background parallax in such format can have really big size. This format is usually used for most of the UI elements like buttons, icons and so on. But it doesn’t work well for big background images (except for patterns).

By standard images are used as Scale Factor: Multiple, that means that you should provide different images for different retina options: x1, x2, x3 versions of the same image. In case you don’t provide image for selected scale - iOS SDK will resize the closest image to use in application, but you don’t want it because it will be way too blurry.

3. Vector Images

iOS SDK doesn’t support vector images, but Xcode does. You can import vector image in .pdf format into your project and Xcode will kindly generate multiple images during the build process: x1, x2, x3 and so on. Read More…

4. Template Images

In iOS SDK you can use image with Render Mode = Template Image and use it as a mask. This usually could be helpful if you want to change image color in runtime or use several images of the same look but different colors. Read More…

5. Stretchable Images

In iOS development you could use stretchable images. It’s good for situations when you don’t know exact size of element or it can vary. For example you can have customized UITextView that grows when user types something into it. That’s when stretchable image will work best as an background.

Stretchable image has 9 regions with stretchable and non-stretchable parts. Based on this areas you should define 4 insets: Top, Left, Bottom and Right. Read More…

6. Animated Images

You can animate sequence of images inside UIImageView. You can name your images using special pattern to load them in one line of code using UIImage.animatedImageNamed() method. However, animated images do not work in combination with template images (initial color will be used instead of tintColor) Read More…

Hope you find this overview helpful and quite detailed.

Updated:

Leave a Comment