Puntos vs Píxeles

Si viajamos en el tiempo algunos años atrás, antes de la aparición del iPhone 4, no estaríamos planteando esta cuestión ya que un punto equivalía a un pixel en todos los dispositivos iOS.

Sin embargo, el desarrollo de nuevos dispositivos por parte de Apple ha supuesto la integración de pantallas con resoluciones muy superiores respecto a las de los modelos más antiguos.

Según la Wikipedia, un Pixel (acrónimo del inglés Picture Element, ‘elemento de imagen’) se define como la menor unidad homogénea en color que forma parte de una imagen digital. Si ampliamos una imagen en una pantalla (coloquialmente le hacemos un zoom), pueden observarse los píxeles que la componen (los píxeles son esos puntos de color que vemos en la pantalla). Las imágenes se forman como una sucesión de píxeles.

Los iPhone de versiones inferiores a la 4 utilizaban imágenes @1x. Los iphone de versiones iguales o superiores a la 6 utilizan imágenes @3x. Los modelos comprendidos entre esos dos intervalos utilizan imágenes @2x. ¿Qué significa esto? Pues que en las pantallas @2x un punto se corresponde con dos píxeles horizontales y dos verticales, en total cuatro píxeles. Por lo tanto en las pantallas @3x cada punto equivale a nueve píxeles.

Esto significa que si tenemos una imagen de 100x100 pixeles está se verá correctamente en las pantallas @1x, pero su calidad será verá deteriorada en pantallas @2x y @3x. La solución es generar tres versiones de la imagen una de 100x100 para pantallas @1x, otra de 200x200 para pantallas @2x y una última imagen de 300x300 para pantallas @3x.

Os compartimos un enlace con una guía de las resoluciones de las pantallas de los iPhone.

https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Igualmente, si quieres consultar las resoluciones e información detallada de los Iphone, iPad y Apple Watch, puedes visitar la siguiente web

http://iosres.com/

Hoy en día Apple dispone en el mercado gran variedad de dispositivos con distintos tamaños de pantalla y de resoluciones, por lo que hay que tener clara esta problemática si no queremos que el diseño de nuestra App sea un verdadero quebradero de cabeza.

Como desarrolladores, agregaremos a nuestra interfaz gráfica distintos objetos como botones, labels, sliders, etc. Todos ellos pertenecen a la Librería UIKit y debes tener en cuenta que esta librería trabaja en puntos en lugar de píxeles, por lo que sólo tendremos que preocuparnos del tamaño en puntos de las distintas pantallas sin importarnos la densidad de píxeles que tengan los puntos en cada caso.

Sin embargo, si eres Diseñador de Apps si tendrás que tener en cuenta la resolución en píxeles de cada pantalla