Imágenes remotas: AsyncImage y su techo

AsyncImage es una de esas APIs que enamoran en la demo y decepcionan en producción. Una línea y ya tienes una imagen de red con su spinner. Pero en cuanto la metes en una lista que el usuario desplaza, descubres que redescarga, que decodifica en tamaño completo y que no puedes decirle nada. Entender exactamente dónde está su techo es lo que te permite decidir, con criterio y no por moda, cuándo escribir tu propio cargador.

Las fases y su control

La forma corta de AsyncImage acepta una URL y poco más. La forma útil te entrega una fase y te deja decidir qué dibujar en cada una:

AsyncImage(url: url, transaction: Transaction(animation: .easeIn(duration: 0.2))) { fase in
    switch fase {
    case .empty:
        ProgressView()
    case .success(let imagen):
        imagen
            .resizable()
            .scaledToFill()
    case .failure:
        Image(systemName: "photo.badge.exclamationmark")
            .foregroundStyle(.secondary)
    @unknown default:
        Color.clear
    }
}
.frame(width: 120, height: 120)
.clipped()

Tres detalles que casi nadie aplica. El transaction es la única manera de animar la transición entre fases: sin él, la imagen aparece de golpe. El .frame debe ir fuera del cierre y la imagen debe ser .resizable(), porque si no la vista adopta el tamaño en píxeles del recurso descargado y te rompe el layout. Y el caso @unknown default no es burocracia: la enumeración de fases es no exhaustiva por contrato, y Apple ya la amplió una vez.

Lo importante es entender la semántica de vida: AsyncImage arranca su descarga cuando la vista aparece y la cancela cuando desaparece. En una lista larga esto significa que desplazar hacia arriba y volver a bajar puede lanzar la misma petición dos, tres o diez veces.

Lo que URLCache guarda de verdad

La objeción inmediata es: pero URLSession ya tiene cache. Es cierto y es insuficiente, y la distinción es la clave de toda esta lección.

URLCache es una cache de bytes de respuesta HTTP, no de imágenes. Guarda el cuerpo comprimido tal cual llegó, gobernado por las cabeceras del servidor: Cache-Control, ETag, Expires. Eso implica tres cosas incómodas:

• Si el servidor manda Cache-Control: no-store o simplemente no manda nada útil, tu cache no existe. Dependes de la infraestructura de otro.
• Aunque acierte, te devuelve un JPEG comprimido. El trabajo caro —decodificar esos bytes a un bitmap— se repite cada vez. Y decodificar es lo que cuesta milisegundos de CPU y decenas de megabytes de RAM.
• La cache de memoria por defecto de URLCache.shared es pequeña y compartida con todas las peticiones de tu app, incluidas las de JSON.

Una cache de imágenes de verdad guarda dos cosas en dos sitios: bitmaps decodificados y ya reducidos en memoria, y bytes originales en disco. Son niveles distintos con políticas de expulsión distintas.

flowchart LR
V[Vista pide URL y tamano] --> M{Memoria bitmaps}
M -->|acierto| R[Listo para dibujar]
M -->|fallo| D{Disco bytes}
D -->|acierto| DE[Decodificar y reducir]
D -->|fallo| N[Red]
N --> DE
DE --> R
style R fill:#a6e3a1,color:#11111b
style N fill:#f38ba8,color:#11111b

Los cuatro límites

Un cargador propio, mínimo pero correcto

No necesitas una biblioteca de miles de líneas. Necesitas un actor que resuelva los dos problemas que AsyncImage deja abiertos: memoria acotada y peticiones en vuelo deduplicadas.

actor CargadorDeImagenes {
    static let compartido = CargadorDeImagenes()

    private let memoria: NSCache<NSString, UIImage> = {
        let c = NSCache<NSString, UIImage>()
        c.totalCostLimit = 80 * 1024 * 1024   // presupuesto explicito, en bytes
        return c
    }()
    private var enVuelo: [String: Task<UIImage, Error>] = [:]

    func imagen(de url: URL, lado: CGFloat) async throws -> UIImage {
        let clave = "\(url.absoluteString)|\(Int(lado))" as NSString   // URL + tamano

        if let lista = memoria.object(forKey: clave) { return lista }
        if let tarea = enVuelo[clave as String] { return try await tarea.value }

        let tarea = Task<UIImage, Error> {
            let (datos, _) = try await URLSession.shared.data(from: url)
            guard let reducida = reducir(datos: datos, lado: lado) else {
                throw URLError(.cannotDecodeContentData)
            }
            return reducida
        }
        enVuelo[clave as String] = tarea
        defer { enVuelo[clave as String] = nil }

        let imagen = try await tarea.value
        let coste = Int(imagen.size.width * imagen.size.height * imagen.scale * imagen.scale * 4)
        memoria.setObject(imagen, forKey: clave, cost: coste)
        return imagen
    }
}

Cuatro decisiones deliberadas. El actor serializa el acceso al diccionario enVuelo sin un solo lock a mano. La clave incluye el tamaño, porque la miniatura y la versión grande no son intercambiables. El cost es el tamaño real del bitmap, no del archivo, para que NSCache expulse con información veraz. Y NSCache —en vez de un Dictionary— porque libera automáticamente bajo presión de memoria del sistema.

Falta la función reducir(datos:lado:), que es exactamente el tema de la lección siguiente, y falta el nivel de disco. Pero con estas treinta líneas ya has eliminado la redescarga y la duplicación de peticiones.