How Can We Help?
Tamaños de Imagen correctos
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).
