Debido a los recientes eventos que estan afectando las empresas a nivel mundial, estamos respaldando su negocio con un descuento del 60% y mas durante el primer año de servicio

Tamaños de Imagen correctos

You are here:
< All Topics

Tamaños de imagen correctos

Visión general 

Desde el lanzamiento de Cedar en adelante, todas las imágenes se manejarán usando Relleno de aspecto. Esto significa que las restricciones estrictas de la imagen han desaparecido y que la distorsión y la inclinación de la imagen son cosa del pasado.

En este artículo, aprenderá acerca de la relación de aspecto , el relleno de aspecto y los tamaños de imagen recomendados para usar al diseñar su aplicación.

Información

Relación de aspecto

Relleno de aspecto

·       La relación entre el ancho y el alto de una imagen o pantalla. Por ejemplo, ahora estamos usando una relación de aspecto de 16: 9 para dispositivos móviles y una de 4: 3 para tabletas . Todo lo que utilice esta proporción se verá genial en la plataforma.

·       Nuestro tamaño de fondo recomendado ya utiliza una relación de aspecto de 16: 9 y 4: 3 (por ejemplo, 640 x 1136: 640/9 = 71; 1136/16 = 71 ), por lo que siempre que sus imágenes de fondo utilicen el tamaño recomendado, deberían no se verá afectado.

·       Para tiempos de carga óptimos, recomendamos usar lo siguiente:

·       750×1334 para móviles

·       1536×2048 para tableta

Este tamaño no es necesario siempre que utilice la relación de aspecto correcta.

·       Cambia el tamaño de la imagen para que se ajuste proporcionalmente hasta que se llene toda la ventana de la imagen. Es por eso que ves un recorte de tu imagen.

·       Básicamente, se trata de acercar una parte de la imagen para que todo el espacio se llene proporcionalmente y no se muestre ningún espacio en blanco alrededor de los bordes.

·       Si la imagen no tiene la relación de aspecto correcta ( 16: 9 o 4: 3 ), recortará partes de la imagen sin importar cuán grande o pequeña sea la imagen.

Muchas de las dimensiones siguientes son tamaños recomendados . No existe una solución perfecta cuando atiende a cientos de tamaños de pantalla diferentes con una plataforma todo en uno, pero estos tamaños lo acercarán a la apariencia ideal de su aplicación. Recomendamos utilizar prueba y error si experimenta problemas de estiramiento en pantallas de dispositivos más grandes.

 

Nota: La sección Teléfono de Imágenes de fondo se aplica a Android y iPhone 5 en adelante. Si prefiere optimizar las imágenes de fondo de la pestaña para el iPhone 6, consulte la columna Teléfono (optimizado para iPhone 6) a continuación. Tenga en cuenta que estas dimensiones darán lugar a imágenes de fondo ligeramente estiradas verticalmente en el iPhone 5.

 

Tipo de imagen: Fondo de pantalla de inicio

Tipo de imagen: Imágenes de fondo de pestaña (restar la altura del encabezado de navegación)

Nota: Debido a que el encabezado de navegación es proporcionalmente más alto en el iPhone 5 que en el iPhone 6, la relación óptima entre ancho y alto para las imágenes de fondo de las pestañas es diferente en los dos dispositivos. 

Tipo de imagen: Imágenes de fondo de la pestaña (reste la altura del encabezado de navegación + la altura de la barra de pestañas superior o inferior)

 

Tipo de imagen: Imágenes de fondo de pestaña (restar altura del encabezado de navegación + altura de la barra de la pestaña superior + altura de la barra de la pestaña inferior)

 

Tipo de imagen: imágenes de encabezado 

 

 

Tipo de imagen: imágenes en miniatura

 

 

 

Tipo de imagen: imágenes de la galería  (estos son los tamaños óptimos para cada tipo de dispositivo. No puede cargar imágenes de la galería específicas del dispositivo).

Previous Personalización de un icono de función
Table of Contents