Adding and Managing Images in SwiftUI with Xcode's Asset Catalog

In this tutorial, you'll learn how to add images to your Xcode project in SwiftUI. We'll cover how to import images to your Assets.xcassets file, as well as how to use those images in your code. Additionally, we'll go over best practices for image sizing and optimization to ensure your app performs optimally.

Adding Images to Your Xcode Project 

Import images into your project, manage their appearances and variations and load them at runtime.

Create a New Image Set

An image set represents one image that you intend to load at runtime. Each image set contains multiple variations of a single image that you customize to support different device characteristics. 

If you have multiple images in your app, you need to create an image set for each image.

To create an image set, generate an image asset outside of Xcode, then import it into an asset catalog. The system converts the image format into the most appropriate representation when you build the project.

  • In the Project navigator, select an asset catalog: a file with a .xcassets file extension.
  • Drag an image from the Finder to the outline view. A new image set appears in the outline view, and the image asset appears in a well in the detail area.
  • Rename: Double-click the image set name in the outline view to rename the image set with a descriptive name, and press the Return key.


Select Supported Appearances and Variations for Images
By default, Xcode creates each image set with wells for @1x, @2x, and @3x resolutions. If the filename of the image you import ends in @2x or @3x, Xcode automatically places the image into the well with the corresponding resolution. Supply high-resolution images for all images in your app, for all devices your app supports.

In addition to resolution, your image assets might vary based on other device characteristics. Use the Attributes inspector to add, remove, and edit the image variations to include in your image set. You can accomplish this task in an asset catalog or in Interface Builder.

  • In the Project navigator, select the asset catalog.
  • In the outline view, select the image set.
  • In the inspector area, select the Attributes inspector.
  • In the Attributes inspector, add, remove, and edit the device characteristic settings to show additional image wells for the variations you want to customize.


Screenshot of the Attributes inspector with the default Universal option selected.

For more information about image size and resolution, see Image Size and Resolution in the Human Interface Guidelines.

Drag Images to the Variant Wells
After you select the desired characteristic settings for your image set, provide image variations by dragging additional images into the corresponding wells in the image set.

  • In the Project navigator, select the asset catalog.
  • In the outline view, select the image set.
  • In the Finder, drag other variations of the image to the wells in the detail area that match their resolutions or other characteristics.

Load the Image Asset from Your Code
To use the image from the code, initialize an image with the name of the image set. Don’t include the file extension.

// SwiftUI
let image = Image("ImageName")

JPG 

There are four types of images that are common in iOS. JPG is great for photos that are in full size and require no transparency. For best optimizations, it is recommended to generate 1x, 2x, and 3x.

PNG 

If you need transparency in your image, use the PNG. It can move on top of any background. Depending on the number of colors that you have in your image, you may have a very large file size. Just like the JPG, you'll need to export at 1x, 2x, and 3x from the design tool.

PDF 

The PDF is great for glyphs and vectors that are infinitely scalable. They remain sharp regardless of the resolution. This is the preferred way since you only need a single image asset at 1x. iOS will take the scalable vector and generate the appropriate resolutions for you.


Custom Image Asset

Image("Illustration")


SF Symbols

You can also use icons from the SF Symbols library using the Image view. Without having to import anything, you have access to 2,400+ icons in different size, stroke width and colors.

Image(systemName: "xmark")


Comments

Post a Comment