Organizing your image assets the right way

It’s very important to organize and name your assets in appropriate way, it will result later in less images duplicates and as a result in less application’s size. Also it will be more convenient for everybody in the team to know where each asset is used in a project.

Of course it’s a simple thing that everybody should know, however sometimes we forget about it and spend plenty of time organizing the assets and/or removing duplicates.

Format for naming image assets is simple: ImageAsset.png, ImageAsset@2x.png, ImageAsset@3x.png, and so on for more coming retina displays. Most of UI design software can export multiple images in this format quite easily (Sketch, Photoshop). If you drag and drop these multiple files into your .xcassets folder opened in Xcode - you will instantly import the image. That’s the fastest way of importing image resources to your project.

!Note: Don’t use suffix “@1x” for x1 image, or it will be imported as separated image

Naming ios image assets the right way

The same approach works with multiple assets and subfolders:

Example with multiple files in subfolders

Criteria for grouping assets inside the .xcassets folder should be discussed with the team. It should be clear to everyone, so you could find any asset you need before adding the duplicates. I usually separate assets by where it’s being used, for example it can be controllers folders and some common for widely used assets.

That means that you can organize structure of your assets even before importing it to the project. If you have a UI/UX designer in your team who provides you with assets - just explain to him (her) the easiest format to work with, so they could provide you with right naming and structure, and save your time for more important things.

Updated:

Leave a Comment