Cuando desarrollas aplicaciones para iOS, uno de los retos más comunes es lograr que las imágenes se vean nítidas en todos los dispositivos. Apple resuelve esto con un sistema de resoluciones automático que selecciona el asset adecuado según la densidad de píxeles de cada pantalla. Aprender a configurar correctamente los assets 1X, 2X y 3X es fundamental para que tu app luzca profesional sin esfuerzo extra.
¿Cómo funciona el sistema de resoluciones 1X, 2X y 3X?
El sistema de assets de Apple permite incluir tres versiones de una misma imagen con diferentes resoluciones [01:07]. Cada versión se identifica mediante un sufijo en el nombre del archivo:
- 1X: resolución base, usada en iPhones antiguos o como fallback cuando no existen versiones superiores.
- 2X: resolución estándar para pantallas retina, la más utilizada actualmente.
- 3X: resolución alta para dispositivos con mayor densidad de píxeles, como los iPhone Pro o iPads de gama alta.
Al arrastrar las tres imágenes al catálogo de assets en Xcode, el sistema las agrupa automáticamente en un único set [01:30]. Por ejemplo, si tienes los archivos platzi.png, platzi@2x.png y platzi@3x.png, Xcode crea un solo recurso llamado "platzi" con sus tres variantes organizadas.
¿Cómo se selecciona automáticamente la imagen correcta?
Cuando declaras una vista Image en SwiftUI y le pasas el nombre del asset, el sistema operativo detecta la densidad de pantalla del dispositivo y elige la versión apropiada sin que tengas que escribir lógica adicional [02:22]. Es importante recordar que el nombre es case sensitive, por lo que debe coincidir exactamente con el registrado en el catálogo.
En el canvas de Xcode, al previsualizar con un dispositivo estándar, la imagen seleccionada es la versión 2X. Esto ocurre porque la mayoría de los dispositivos actuales cuentan con pantallas retina que requieren esa densidad, pero no alcanzan la densidad necesaria para 3X.
¿Qué resolución usa cada dispositivo de Apple?
Para comprobarlo en la práctica, se pueden crear múltiples instancias de preview en SwiftUI apuntando a diferentes dispositivos [02:52].
- iPhone 8 e iPhone 11: utilizan la imagen 2X, ya que comparten una densidad de pantalla retina similar.
- iPhone 12 Pro Max: utiliza la imagen 3X automáticamente, gracias a su mayor densidad de píxeles [03:32].
Este comportamiento demuestra el poder del sistema de puntos (point system) de iOS. En lugar de trabajar con píxeles absolutos, las interfaces se diseñan en puntos lógicos y el sistema traduce esos puntos a la cantidad real de píxeles según el dispositivo.
¿Qué pasa si falta un asset de mayor resolución?
Si solo incluyes la versión 1X, el dispositivo la usará como default, pero la imagen podría verse borrosa en pantallas de alta densidad. Por eso es recomendable siempre proporcionar las tres versiones para garantizar nitidez en cualquier dispositivo.
¿Es suficiente con los assets para que la app se vea bien en todos los dispositivos?
Aunque el sistema de assets automáticos resuelve el problema de la resolución de imágenes, no es la única consideración para lograr interfaces adaptables [03:55]. Existen elementos adicionales como los modificadores offset y position en SwiftUI que permiten acomodar las vistas de forma precisa en pantallas de distintos tamaños.
El flujo de trabajo recomendado es:
- Preparar los assets en las tres resoluciones desde el diseño.
- Organizarlos correctamente en el catálogo de Xcode.
- Referenciarlos por nombre en las vistas de SwiftUI.
- Complementar con modificadores de layout para un resultado óptimo.
Dominar este sistema te permite construir aplicaciones que se adaptan visualmente a la enorme variedad de dispositivos Apple, desde un iPhone SE hasta un iPad Pro. Si quieres profundizar en cómo posicionar elementos con offset y position, comparte tu experiencia configurando assets y sigue practicando con diferentes dispositivos en el canvas.
