Introduction

Making an avatar image circular in a table view is easy; making it stay smooth while dozens of cells scroll by is the real requirement. The good news is that a circular UIImageView is usually cheap enough on modern devices if you apply the effect in the right place and avoid expensive image work during fast scrolling.

The Cheap Part: Rounded Corners

For a small avatar, using cornerRadius and clipping is normally fine. The key is to apply it once per layout pass, not repeatedly during every configuration call.

A custom cell keeps the logic contained:

1import UIKit
2
3final class AvatarCell: UITableViewCell {
4    @IBOutlet private weak var avatarImageView: UIImageView!
5    @IBOutlet private weak var nameLabel: UILabel!
6
7    private var imageTask: URLSessionDataTask?
8
9    override func layoutSubviews() {
10        super.layoutSubviews()
11        avatarImageView.layer.cornerRadius = avatarImageView.bounds.width / 2
12        avatarImageView.clipsToBounds = true
13    }
14
15    override func prepareForReuse() {
16        super.prepareForReuse()
17        imageTask?.cancel()
18        imageTask = nil
19        avatarImageView.image = UIImage(systemName: "person.crop.circle")
20        nameLabel.text = nil
21    }
22
23    func configure(name: String, imageURL: URL) {
24        nameLabel.text = name
25        loadImage(from: imageURL)
26    }
27
28    private func loadImage(from url: URL) {
29        imageTask = URLSession.shared.dataTask(with: url) { [weak self] data, _, _ in
30            guard let self, let data, let image = UIImage(data: data) else { return }
31            DispatchQueue.main.async {
32                self.avatarImageView.image = image
33            }
34        }
35        imageTask?.resume()
36    }
37}

The circle itself is not the performance problem here. The bigger cost is usually image loading, decoding, and cell reuse mistakes.

Where Performance Problems Really Come From

When scrolling becomes janky, the cause is often one of these:

• images are downloaded repeatedly instead of cached
• large images are decoded on the main thread
• cell reuse lets old requests write into reused cells
• layout work is repeated more often than necessary

That means optimization should focus first on the image pipeline, not on trying to avoid cornerRadius at all costs.

Resize or Downsample Before Display

If a remote avatar is 2000 pixels wide and you display it as 44 points, you are paying for much more image data than the UI needs. Downsampling reduces memory use and decode cost.

1import ImageIO
2import UIKit
3
4func downsample(data: Data, to pointSize: CGSize, scale: CGFloat) -> UIImage? {
5    let maxDimension = max(pointSize.width, pointSize.height) * scale
6    let options: [CFString: Any] = [kCGImageSourceShouldCache: false]
7
8    guard let source = CGImageSourceCreateWithData(data as CFData, options as CFDictionary) else {
9        return nil
10    }
11
12    let downsampleOptions: [CFString: Any] = [
13        kCGImageSourceCreateThumbnailFromImageAlways: true,
14        kCGImageSourceShouldCacheImmediately: true,
15        kCGImageSourceCreateThumbnailWithTransform: true,
16        kCGImageSourceThumbnailMaxPixelSize: maxDimension
17    ]
18
19    guard let image = CGImageSourceCreateThumbnailAtIndex(source, 0, downsampleOptions as CFDictionary) else {
20        return nil
21    }
22
23    return UIImage(cgImage: image)
24}

This matters far more than micro-optimizing the mask for a small avatar view.

Make Reuse Safe

A reusable cell must not keep old work alive after it is recycled. Cancelling the old task in prepareForReuse() prevents the wrong image from appearing in the wrong row and reduces wasted network and decode work.

If you are loading many avatars from a server, consider using an image library such as Nuke, Kingfisher, or SDWebImage. Those libraries handle caching, task cancellation, and decompression much better than ad hoc code.

When to Pre-render the Circle

If the same image is shown in many places and performance is still a problem, another option is to pre-render a circular version once and cache that result. This is worth considering for extremely large lists or older devices, but it should be a measured optimization, not a default assumption.

For most apps, a standard UIImageView with clipping is fast enough when paired with proper image sizing and caching.

Common Pitfalls

Setting the corner radius before Auto Layout has given the image view its final size can produce the wrong radius. Applying it in layoutSubviews() or after layout solves that.

Re-downloading images during fast scroll is a much bigger problem than the circular mask itself. Add caching before chasing rendering tricks.

Using synchronous image loading on the main thread will cause visible stutter no matter how the image view is shaped.

Enabling rasterization blindly is not a universal fix. For scrolling lists, it can increase memory cost and sometimes hurt more than it helps.

Summary

• circular avatars in UITableView are usually fine with cornerRadius and clipping
• the real performance costs are image loading, decoding, and reuse errors
• apply the circular mask after layout so the radius is correct
• cancel in-flight requests in prepareForReuse()
• downsample and cache images before looking for more aggressive rendering optimizations