How to create “dynamic images”

If you’re aiming to make your app accessible I assume you’re already using Dynamic Type for your copy. But what about image assets that, unlike system images, don’t automatically scale when the text does?

Here are three variations of showing text with an image at three different Dynamic Type settings; 100%, 80% and 190%

When using the default setting, 100%, there is no difference in size for the image and text between the rows. When we chnge the setting to 80% there’s a slight change in size, but when changing to an accessibililty size, AX2 190%, you can really see how unbalanced the image and text are next to eachother on the second row.

Let’s take a closer look when Dynamic Type is set to 190%, and break down the differences between each row.

For the first row we are using fixed values for both image and text, this is the worst case scenario for someone depending on bigger text sizes, but the image and text are balanced.

For the third, and last, row we are using both Dynamic Type and something called Scaled Metric, a property wrapper that scales a value based on the environment.

So how do we implement this?

Give the scaled metric a standard value, and then the value will scale depending on the user’s Dynamic Type setting.

@ScaledMetric var imageSize = 60

If the image is tightly connected with a text, like in the examples above, I personally prefer that the image scales with the font for that text. Simply add the realtiveTo paramater to do that.

@ScaledMetric(relativeTo: .body) var imageSize: CGFloat = 60

Tip! Experiment with different fonts and compare the outcome for the edge cases, you’ll be surprised how they differ!

@ScaledMetric(relativeTo: .body) var imageSize: CGFloat = 60
let headerSize: CGFloat = 13

var body: some View {
    VStack(alignment: .leading, spacing: 32) {
        staticSizeView()
        dynamicFontSizeView()
        scaledMetricView()
    }
    .frame(maxWidth: .infinity, alignment: .leading)
   }