Image view (system and asset) in iOS Swift - Build, Publish & Deploy

Build & Publish - Image view (system and asset)

Performance Impact

Using image views in iOS apps affects frame rate, memory, and battery life. System images (SF Symbols) are vector-based and lightweight, so they render smoothly at 60fps or higher without much memory use. Asset images (like PNGs or JPEGs) are raster images and can consume more memory, especially if large or uncompressed. Large images may cause frame drops or slow scrolling if not optimized.

Optimization Tips

• Use system images (SF Symbols) when possible for sharp, scalable icons with minimal memory.
• Resize asset images to the exact display size needed to avoid scaling at runtime.
• Use image caching to avoid reloading images repeatedly.
• Prefer vector PDF assets for scalable images to reduce multiple size variants.
• Use UIImageView with content mode .scaleAspectFit or .scaleAspectFill to maintain aspect ratio efficiently.
• Load images asynchronously if fetched from network to keep UI responsive.

App Bundle Size and Startup Time

System images do not add to app bundle size since they are built into iOS. Asset images increase bundle size depending on their resolution and number of variants (1x, 2x, 3x). Large or many asset images increase app download size and can slow startup if loaded immediately. Use asset catalogs to manage image variants efficiently and remove unused images to keep bundle size small.

iOS vs Android Differences

On iOS, system images use SF Symbols, a built-in vector icon set. Android uses Material Icons or custom vector drawables for similar purposes. iOS asset images are managed in asset catalogs with automatic scaling for device resolutions. Android uses drawable folders (mdpi, hdpi, xhdpi, etc.) for different screen densities. iOS apps benefit from vector SF Symbols for sharp icons at any size, while Android apps rely more on multiple bitmap sizes or vector drawables.

Store Review Guidelines

• Ensure images do not contain offensive or copyrighted content.
• Use appropriate image resolutions to avoid blurry or pixelated UI elements.
• Follow Apple Human Interface Guidelines for icon sizes and usage of SF Symbols.
• Do not include excessively large images that increase app size unnecessarily.
• Verify all images display correctly on all supported device sizes and orientations.

Self-Check Question

Your app takes 5 seconds to load this screen with many images. What's likely wrong?

• Loading large asset images synchronously on the main thread blocking UI.
• Not using optimized image sizes causing excessive memory use and slow rendering.
• Missing image caching causing repeated image decoding.
• Using many high-resolution images without vector alternatives.

Key Result

Use system images (SF Symbols) for lightweight, scalable icons to keep UI smooth and memory low. Optimize asset images by resizing and caching to reduce app size and improve load times.

Practice

1. What is the correct way to create an image view that displays an image named "logo" from your app's assets?

easy

A. UIImageView(image: UIImage(named: "logo"))

B. UIImageView(image: UIImage(systemName: "logo"))

C. UIImageView(named: "logo")

D. UIImageView(systemName: "logo")

Solution

1. Step 1: Understand UIImageView initialization

   UIImageView is initialized with a UIImage object, not a string name directly.

2. Step 2: Load image from assets correctly

   Use UIImage(named:) to load an image from app assets by name.

3. Final Answer:

   UIImageView(image: UIImage(named: "logo")) -> Option A

4. Quick Check:

   Load asset image with UIImage(named:) = D [OK]

Hint: Use UIImage(named:) for asset images, not systemName [OK]

Common Mistakes:

• Using UIImage(systemName:) for asset images
• Passing string directly to UIImageView initializer
• Confusing UIImageView(named:) which doesn't exist

2. Which of the following is the correct syntax to create a system image view with the icon named "star.fill"?

easy

A. UIImageView(image: UIImage(named: "star.fill"))

B. UIImageView(systemName: "star.fill")

C. UIImageView(image: UIImage(systemName: "star.fill"))

D. UIImageView(image: "star.fill")

Solution

1. Step 1: Identify system image loading method

   System icons are loaded using UIImage(systemName:).

2. Step 2: Initialize UIImageView with system image

   Pass UIImage(systemName: "star.fill") to UIImageView's image parameter.

3. Final Answer:

   UIImageView(image: UIImage(systemName: "star.fill")) -> Option C

4. Quick Check:

   System image uses UIImage(systemName:) = B [OK]

Hint: Use UIImage(systemName:) for system icons only [OK]

Common Mistakes:

• Using UIImage(named:) for system icons
• Trying to initialize UIImageView with systemName directly
• Passing string instead of UIImage object

3. What will be the result of this Swift code snippet?

let imageView = UIImageView(image: UIImage(systemName: "heart.fill"))
imageView.tintColor = .red

medium

A. An image view showing a red filled heart system icon

B. An image view showing a heart icon with default color (black)

C. A runtime error because tintColor cannot be set

D. An empty image view with no image displayed

Solution

1. Step 1: Load system image "heart.fill"

   UIImage(systemName: "heart.fill") loads a filled heart icon.

2. Step 2: Set tintColor to red

   Setting imageView.tintColor to .red colors the system icon red.

3. Final Answer:

   An image view showing a red filled heart system icon -> Option A

4. Quick Check:

   System icon + tintColor = colored icon [OK]

Hint: System icons respect tintColor for color changes [OK]

Common Mistakes:

• Assuming system icons ignore tintColor
• Confusing asset images with system icons for tinting
• Expecting default black color after setting tintColor

4. Identify the error in this Swift code that tries to display a system image "bell" in an image view:

let imageView = UIImageView(image: UIImage(named: "bell"))
imageView.tintColor = .blue

medium

A. The code is correct and will display a blue bell icon

B. UIImageView does not have a tintColor property

C. The image name "bell" is invalid for assets

D. UIImage(named:) cannot load system images like "bell"

Solution

1. Step 1: Check image loading method

   UIImage(named:) loads images from app assets, not system icons.

2. Step 2: Recognize system image loading requirement

   System images like "bell" must be loaded with UIImage(systemName:).

3. Final Answer:

   UIImage(named:) cannot load system images like "bell" -> Option D

4. Quick Check:

   System images need UIImage(systemName:) = A [OK]

Hint: Use UIImage(systemName:) for system icons, not UIImage(named:) [OK]

Common Mistakes:

• Using UIImage(named:) for system icons
• Assuming tintColor works without correct image loading
• Thinking UIImageView lacks tintColor property

5. You want to display a system image "trash" in red color and an asset image "icon" in your app. Which code snippet correctly creates both UIImageViews with the right images and colors?

hard

A. let trashView = UIImageView(image: UIImage(systemName: "trash"))
trashView.tintColor = .red
let iconView = UIImageView(image: UIImage(systemName: "icon"))

B. let trashView = UIImageView(image: UIImage(systemName: "trash"))
trashView.tintColor = .red
let iconView = UIImageView(image: UIImage(named: "icon"))

C. let trashView = UIImageView(image: UIImage(named: "trash"))
trashView.tintColor = .red
let iconView = UIImageView(image: UIImage(systemName: "icon"))

D. let trashView = UIImageView(image: UIImage(named: "trash"))
trashView.tintColor = .red
let iconView = UIImageView(image: UIImage(named: "icon"))

Solution

1. Step 1: Load system image "trash" correctly

   Use UIImage(systemName: "trash") for system icon and set tintColor to red.

2. Step 2: Load asset image "icon" correctly

   Use UIImage(named: "icon") for asset image without tintColor.

3. Final Answer:

   let trashView = UIImageView(image: UIImage(systemName: "trash"))\ntrashView.tintColor = .red\nlet iconView = UIImageView(image: UIImage(named: "icon")) -> Option B

4. Quick Check:

   System image + tintColor, asset image with UIImage(named:) = C [OK]

Hint: System images use systemName + tintColor; assets use named without tint [OK]

Common Mistakes:

• Mixing UIImage(named:) and UIImage(systemName:) incorrectly
• Setting tintColor on asset images expecting color change
• Using systemName for asset images