La relación de aspecto de una imagen es la relación proporcional del ancho con la altura. Lo reconocerá como dos números separados por dos puntos en un formato x: y. Por ejemplo, una imagen de 6 x 4 pulgadas tiene una relación de aspecto de 3: 2. Una relación de aspecto no tiene unidades unidas; en cambio, representa qué tan grande es el ancho en comparación con la altura. Esto significa que una imagen medida en centímetros tendrá la misma relación de aspecto incluso si se midió en pulgadas. La relación entre su ancho y alto determina la relación y la forma, pero no el tamaño real de la imagen.
Sin embargo, la relación de aspecto de una imagen cambiará según el medio en el que se presente. La relación de aspecto de una imagen que se muestra en una computadora será diferente de la relación de aspecto de esa misma imagen que se muestra en un teléfono.
Las relaciones de aspecto son una parte crítica del contenido web porque las imágenes deben cargarse en diferentes relaciones de aspecto para diferentes usos, como escritorio versus móvil o blog vs. redes sociales. Cuando usa las proporciones de aspecto correctas, garantiza que sus imágenes se muestren como se espera sin estiramiento o pérdida de resolución.
Repasemos algunas relaciones de aspecto comunes que generalmente se usan en diferentes espacios.
Relaciones de aspecto comunes
Una relación 1: 1 significa que el ancho y la altura de una imagen son iguales, creando un cuadrado. Algunas proporciones comunes de 1: 1 son una foto de 8 x 8 pulgadas, una imagen de 1080 x 1080 píxeles, o típicamente cualquier plantilla de imagen de perfil en sitios de redes sociales (piense en Facebook). Esta relación de aspecto se usa comúnmente para imprimir fotografías, pantallas móviles y plataformas de redes sociales, pero no es ideal para la mayoría de los formatos de TV o digitales.
Relación 3: 2
La relación 3: 2 tiene raíces en películas y fotografías de 35 milímetros y todavía se usa ampliamente para tamaños de impresión. Las imágenes enmarcadas a 1080 x 720 píxeles o 6 x 4 pulgadas se establecen dentro de esta relación de aspecto.
Relación 4: 3
Una proporción de 4: 3 se usa típicamente para pantallas de TV, monitores de computadora y cámaras digitales. Por cada 4 unidades de ancho, hay 3 unidades de altura, creando una forma rectangular. Una imagen con un tamaño de 1024 x 768 píxeles u 8 x 6 pulgadas se ajusta a una relación típica de 4: 3.
Relación 16: 9
La relación 16: 9 se ve principalmente en diapositivas de presentación, monitores de computadora o televisores de pantalla panorámica. Este estándar internacional reemplazó recientemente la relación 4: 3 para monitores y pantallas de TV, creando una forma rectangular más delgada y alargada en comparación con el formato 4: 3. Las resoluciones comunes en la relación 16: 9 son 1920 x 1080 píxeles y 1280 x 720 píxeles.
Cómo medir el tamaño de la imagen
A diferencia de las relaciones de aspecto, el tamaño de la imagen determina el ancho y la altura real de una imagen en píxeles. El tamaño de la imagen son las dimensiones de una imagen. Puede medir las dimensiones de la imagen en cualquier unidad, pero normalmente verá los píxeles utilizados para imágenes web o digitales y las pulgadas utilizadas para imprimir imágenes.
Es importante darse cuenta de que dos imágenes diferentes que tienen la misma relación de aspecto pueden no tener el mismo tamaño o dimensiones de imagen. Por ejemplo, una imagen con un tamaño de 1920 x 1080 píxeles tiene una relación de aspecto de 16: 9, y una imagen con un tamaño de 1280 x 720 píxeles también tiene una relación de 16: 9.
Tamaños de imagen comunes para la web
Si está cargando imágenes en la web, es crucial comprender las especificaciones de tamaño de imagen porque los tamaños de imagen incorrectos pueden estirarse o distorsionarse para llenar dimensiones fijas.
Cuando trabajas en un creador de sitios web o en un sistema de gestión de contenido (CMS), como WordPress o Squarespace, los requisitos de tamaño de la imagen variarán según el tema o la plantilla que estés utilizando. A menudo, el creador de sitios web cambiará el tamaño de las imágenes para que se muestren correctamente en varios formatos diferentes. Por lo tanto, para satisfacer varios tamaños de imagen estándar diferentes, cargue una imagen que sea lo suficientemente grande como para reducirla sin perder resolución y lo suficientemente pequeña como para ajustarse cómodamente al ancho de una pantalla estándar. Squarespace recomienda cargar imágenes de entre 1500 y 2500 píxeles de ancho. Verifique su plantilla o tema en cualquier CMS que esté utilizando para determinar el tamaño de imagen correcto para cargar. Del mismo modo, los sitios web de redes sociales a menudo cambiarán el tamaño de las imágenes para usted, pero hay un punto óptimo que garantizará que sus imágenes se muestren correctamente en algunos tamaños diferentes.
Nota: No confunda el tamaño de la imagen con el tamaño del archivo de imagen. El tamaño del archivo de imagen se mide en bytes de acuerdo con la cantidad de espacio que ocupa en un disco o unidad (piense en kilobytes o megabytes).
Estos son algunos de los tamaños de imagen más comunes para la web.
1920 x 1080 píxeles
Este tamaño de imagen estándar se ve ampliamente en TV de alta definición, presentaciones y fotos de portada de redes sociales. Sigue la relación de aspecto 16: 9.
1280 x 720 píxeles
Este tamaño sigue el formato HD estándar presentado en fotografía y película. Se ajusta a la relación de aspecto 4: 3.
1080 x 1080 píxeles
Verá este tamaño de imagen de proporción 1: 1 utilizado ampliamente en las redes sociales, a saber, las publicaciones de Instagram y Facebook.
