SwiftUI Kingfisher blurry Image on resize

Question

In SwiftUI I’m using Kingfisher dependency for image download / cashing & have a following issue, when image resized it becomes low quality and blurry.

Here’s my implementation:

struct IconView: View {
    
    let frame: CGFloat
    let url: String
    let iconPath: String

    var body: some View {
        if !iconPath.isEmpty {
            KFImage(URL(string: "\(url)\(iconPath)"))
                .placeholder {
                    Circle().fill(Color.primaryBackground)
                        .frame(width: frame, height: frame)
                }
                .setProcessor(ResizingImageProcessor(referenceSize: CGSize(width: frame , height: frame), mode: .aspectFit))
        }
    }
}

can anyone suggest right implementation? How to not destroy image quality.

What are the dimensions of the resized image? – EmilioPelaez Sep 23 '21 at 18:31 — EmilioPelaez, Sep 23 '21 at 18:31
Original Image is 256x256 and resized 30x30 – Hattori Hanzō Sep 23 '21 at 18:52 — Hattori Hanzō, Sep 23 '21 at 18:52

score 0 · Answer 1 · answered Sep 23 '21 at 19:40

I think I solved my problem, issue here is that Kingfisher calculates image size in pixels rather than points in ResizingImageProcessor, so you have to multiply image size to device scale factor.

Useful discussions: IOS Swift Kingfisher Resize processor result blurry image & ResizingImageProcessor return a low quality image

struct IconView: View {
    
    let frame: CGFloat
    let url: String
    let iconPath: String

    var body: some View {
        if !iconPath.isEmpty {
            KFImage(URL(string: "\(url)\(iconPath)"))
                .placeholder {
                    Circle().fill(Color.primaryBackground)
                        .frame(width: frame, height: frame)
                }
                .resizable()
                .setProcessor(ResizingImageProcessor(referenceSize: CGSize(width: frame * scale, height: frame * scale), mode: .aspectFit))
                .frame(width: frame, height: frame)
        }
    }
    
    private var scale: CGFloat {
        UIScreen.main.scale
    }
}

SwiftUI Kingfisher blurry Image on resize

1 Answers1