Architecture | Image assets

Intro

In many large mobile projects, a variety of pictures, both small and large, are commonly used within the app. As more images are added to the project, it becomes necessary to organize them effectively. However, it is common for developers to overlook proper organization and simply place them in a folder or group them without much thought.

The default method

A common method I have observed is categorizing and labeling them according to their features and usage. This approach aligns with our natural thinking process. Supporters of this method argue that it allows for easy icon switching without requiring code updates, only image changes. However, is this truly advantageous, or is updating the name really a significant issue?

The problem with feature based naming for image assets

1. Duplication: In larger projects, people naturally group everything per feature, including image assets. These groups are created based on existing features. As features grow and designers start to reuse icons in different parts of the project, engineers may not go through the trouble of moving images from one feature group to another or renaming assets. It is often easier and faster to simply refer to an existing image from another feature and continue working.
2. Nesting: Big features can be easier to reason about when they are split into smaller sub-features. Therefore, it might seem that organizing images into sub-folders would be simpler, but it is not unless you establish clear rules and constraints for organizing common assets outside of sub-feature folders.

The three big groups: Icons, Graphics, and Backgrounds

The following approach is one way my team is using in production to manage image assets. I came up with this after realizing that our app had become very disorganized with its assets.

1. Icons: To adhere to the content-based naming approach, name each image according to its content. For example, if an image depicts a crown and has a size of 1x scale with a measurement of 40, the appropriate name would be "crown_40.png."
2. Graphics: They contain larger images that are used less frequently than icons, and could depict a character, a company logo, an object, or similar. For instance, the image's name could be "letter_sparks_120x100.png," representing a letter with sparks around it, and it would be used only in a specific location within the app.
3. Backgrounds: This section contains large images primarily used as backgrounds, but it is not limited to that purpose. These images can also be placed between sections or above other elements. An example of a background image name would be "robot_arm_circles_1200x800.png", which depicts a large mechanical arm with circles in the background.

Advantage of the three groups

This approach makes it easier to detect duplication, optimize assets, and even identify similar images with small differences. These images can be sent to the design team for review, to determine if they need those similar images or if they should keep just one. As opposed to a feature-based organization, it simplifies the decision-making process of where to place the image asset, eliminating the need to update the location later if the image needs to be shared or if a feature disappears but the image remains.