Resolución y tamaño de imagen en móviles

 

Las pantallas de los móviles son un derroche de pixeles para un tamaño total tan pequeño. Lejanos parecen los años en los que las cámaras digitales de fotografía daban 640 x 480 px.

Para colocar el contenido en la pantalla, iOS emplea un sistema de coordenadas de mediciones en puntos, que se asignan a píxeles en la pantalla. Una pantalla de resolución estándar tiene una densidad de píxeles 1: 1 (o @ 1x), donde un píxel es igual a un punto 72 pixeles por pulgada. 

Las pantallas de alta resolución tienen una mayor densidad de píxeles y ofrecen un factor de escala de 2.0 o 3.0 (denominado @ 2x y @ 3x). Como resultado, las pantallas de alta resolución exigen imágenes con más píxeles, para entregar la calidad.

Por ejemplo, supongamos que tenemos una imagen de resolución estándar (@1x) que es 100px × 100px. La versión @2x de esta imagen sería 200px × 200px, y la versión @3x sería 300px × 300px.

Deben conseguirse las  imágenes de alta resolución para todas las ilustraciones de su aplicación o web, para todos los dispositivos. Dependiendo del dispositivo, puede lograrse esto multiplicando el número de píxeles en cada imagen por un factor de escala específico.

Factores de escala según el dispositivo

• iPad Pro @2x
• iPad @2x
• iPad mini 4 @2x
• iPhone X, XS y XS Max@3x
• iPhone XR @2x
• iPhone 6s Plus, 7 Plus, 8 Plus @3x
• iPhone 6s, SE, 7, 8 @2x

Consejos para ilustraciones en alta resolución

Utiliza una cuadrícula de 8 px por 8 px. La cuadrícula mantiene las líneas nítidas y garantiza que el contenido sea lo más nítido posible en todos los tamaños, lo que requiere menos retoques. Ajuste los límites de la imagen a la cuadrícula para minimizar los medios píxeles y los detalles borrosos que pueden producirse al reducir la escala.

Guarda o exporta las obras en el formato apropiado. En general, usa archivos PNG desentrelazados para gráficos de mapa de bits / ráster.

PNG admite transparencia y, dado que no tiene pérdidas, los artefactos de compresión no difuminan los detalles importantes ni alteran los colores. Es una buena opción para efectos como sombreado, texturas y resaltados.

Utiliza JPEG para las fotos. Su algoritmo de compresión generalmente produce pesos en los archivos más pequeños que los formatos sin pérdida y se puede graduar para mejorar la vista de la imagen. Sin embargo, los iconos de aplicaciones fotorrealistas se ven mejor como PNG.
Emplea PDF para glifos, textos y otras ilustraciones vectoriales planas que requieran una escala de alta resolución.
Formatos y compresión aquí

Usa la paleta de colores de 8 bits para gráficos PNG que no requieren color completo de 24 bits. El uso de una paleta de colores de 8 bits reduce el tamaño del archivo sin reducir la calidad de la imagen. Esta paleta no sirve para fotos.

Optimiza los archivos JPEG para encontrar un equilibrio entre tamaño y calidad. La mayoría de los archivos JPEG se pueden comprimir sin una degradación notable de la imagen resultante. Incluso una pequeña cantidad de compresión puede ahorrar mucho espacio en disco. Experimenta con la configuración de compresión en cada imagen para encontrar el valor óptimo que produzca un resultado aceptable.

Proporciona etiquetas de texto alternativas para imágenes e iconos. Las etiquetas de texto alternativas no están visibles en la pantalla, pero permiten que otros programas lean lo que está en pantalla, lo que facilita la navegación para las personas con discapacidad visual.