¿Qué son las imágenes 1x 2x y 3x?

En el proceso de diseño de una app es necesario pensar y definir cuáles son los tipos de dispositivos a los que nuestro producto o servicio está destinado, con el propósito de adaptar de forma correcta todos los elementos que le agreguemos. Por ello, en este post, te hablaremos acerca de que son y para qué sirven las imágenes 1x 2x y 3x.

Imágenes 1x 2x y 3x

Las imágenes 1x 2x 3x aparecen cuando debes diseñar una aplicación debes agregar diferentes elementos gráficos, como imágenes, que sirven para orientar o ejemplificar algo al usuario, todo con el fin de lograr generar un gran impacto que permita la predilección del público objetivo sobre nuestra app antes que otras que se encuentren en el mercado, lo que permite diferenciarnos de la competencia.

Apple en su sistema iOS cuenta con varios tamaños de imágenes que facilitan la adaptación de contenido de una app en los diferentes dispositivos que pertenecen a su línea de productos. Estos tamaños contemplan la resolución y densidad en píxeles de cada una de las pantallas de sus dispositivos. Este sistema consta de tres tamaños:

• 1x
• 2x  
• 3x

En otras palabras, las imágenes 1x 2x y 3x hacen referencia a los diferentes tamaños en los que se puede poner una imagen dependiendo de la densidad de píxeles de una pantalla. Estos sirven para mejorar la forma en la que se presentan los diferentes elementos en una aplicación y están orientados a que el contenido sea compatible con los diferentes dispositivos, tanto móviles como de escritorio.

En general, poner las imágenes en alguno de estos tres tamaños (1x 2x 3x) garantiza que los usuarios tengan una buena experiencia sin que importe mucho la resolución de cada pantalla.

La decisión de poner las imágenes en un tamaño determinado se toma pensando en cuáles serán los dispositivos en los que se podrá usar nuestra app, puesto que se considera que una pantalla de resolución estándar cuenta con una densidad de píxeles de 1x, es decir, 100 píxeles x 100 píxeles. Este aspecto significa que, cuanto más resolución tenga una pantalla, mayor es la densidad de píxeles; por esto, las pantallas de resolución alta están entre 2x (200px x 200px) y 3x (300px x 300px).

Si quieres conocer herramientas de diseño gráfico que puedes utilizar para tus propios diseños, te invitamos a leer nuestro post Top 5 de programas más usados en diseño gráfico, en donde te hablamos sobre cinco programas de diseño (tanto de pago como gratuitos) que te serán de gran utilidad para el diseño web o el desarrollo de aplicaciones.

¿Por dónde seguir?

Ahora que sabes qué son las imágenes 1x 2x y 3x, ¿te gustaría aprender más sobre los elementos que se utilizan en el desarrollo y diseño de apps? Si consideras que esto es lo que quieres, te invitamos a consultar nuestro Desarrollo de Apps Móviles Full Stack Bootcamp, con el que, en pocos en cuantos meses, conocerás pautas para diseñar, lenguajes de programación, programas de diseño y muchas cosas más, como la de hoy: 1x 2x 3x.