SwiftUI Image View: Interpolation

Interpolation

SwiftUI provides way to interpolate image with .interpolation modifier. This modifier takes parameter to indicate level of interpolation to the image, values are high, medium and low.

Small images tend to pixellate when scaled beyond their size. Interpolation can help by filling pixel level color gaps with approximation. Let’s start with interpolation value as .none to see the pixelation:

I have included 300x123 image in Assets catalog with name “DTS” and we will use that for our example:

struct ImageExample: View {
    
    var body: some View {
        VStack {
            Image("DTS")
                .resizable()
                .interpolation(.none)
                .scaledToFit()
        }
    }
}

Let’s change interpolation value to .low

struct ImageExample: View {
    
    var body: some View {
        VStack {
            Image("DTS")
                .resizable()
                .interpolation(.low)
                .scaledToFit()
        }
    }
}

Let’s apply all of them and see them in action:

struct ImageExample: View {
    
    var body: some View {
        VStack {
            Image("DTS")
                .resizable()
                .interpolation(.none)
                .scaledToFit()
            
            Image("DTS")
                .resizable()
                .interpolation(.low)
                .scaledToFit()
            
            Image("DTS")
                .resizable()
                .interpolation(.medium)
                .scaledToFit()
            
            Image("DTS")
                .resizable()
                .interpolation(.high)
                .scaledToFit()
        }
    }
}