Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Qué es la relación de aspecto

La relación de aspecto es la relación proporcional entre el ancho y el alto de una imagen. En esencia, describe la forma de una imagen.

Las relaciones de aspecto se expresan como una fórmula de ancho por altura, como esta: 3:2.

Por ejemplo, una imagen cuadrada tiene una relación de aspecto de 1:1, debido a que la altura y el ancho son iguales. La imagen podría tener 500px × 500px o 1500px × 1500px, y la relación de aspecto seguirá siendo 1:1.

Otro ejemplo: una imagen vertical podría tener una relación de aspecto de 2:3. Con esta relación de aspecto, la altura es 1.5 veces superior al ancho. Por lo tanto, la imagen podría tener 500px × 750px, 1500px × 2250px, entre otros.

Las relaciones de aspecto y Squarespace

Muchos ajustes de Estilos del sitio te permiten seleccionar las relaciones de aspecto para diferentes tipos de imágenes, como miniaturas de publicaciones de blog, imágenes de galería o productos.

  • Por ejemplo, si eliges una relación de aspecto de 3:2 para las miniaturas de las publicaciones de blog, todas las miniaturas de las publicaciones de blog de tu Página de Blog se recortarán con esa forma.
  • Debido a que las imágenes se amplían o reducen para adaptarse al ancho de los diferentes navegadores, no tienen dimensiones exactas (como 750px x 500px), pero siempre tendrán la misma forma.
  • Empezar con imágenes que tienen la misma relación de aspecto te permite predecir cómo se recortarán.

Las relaciones de aspecto exactas disponibles en Estilos del sitio dependen de tu plantilla. Este es un ejemplo de la Página de Blog en la plantilla Brine:

brine-blog-example.png

Los Estilos del sitio de algunas plantillas te permiten ignorar las relaciones de aspecto. En estos casos, tus imágenes conservarán su forma original. Por ejemplo, en la Página de Blog de la plantilla Skye, puedes elegir Recorte de imágenes: Ninguno.

skye-blog-example.png

Recortar según una relación de aspecto

Además de usar las opciones de Estilo del sitio integradas, tal vez quieras recortar manualmente una imagen según una relación de aspecto determinada. Por ejemplo, si usas imágenes de productos que tienen la misma relación de aspecto, todas se recortarán del mismo modo en tu sitio.

Opción 1: Recortar según una forma predefinida

Usa el Editor de imágenes integrado para recortar imágenes según una forma específica. Después de abrir el editor, usa la herramienta Recortar para seleccionar las relaciones de aspecto predefinidas.

Consejo: Si prefieres hacerlo antes de subir la imagen, algunas herramientas externas tienen opciones de relación de aspecto predefinidas.

Opción 2: Dimensiones personalizadas

Para recortar imágenes según una relación de aspecto personalizada que no ofrece nuestro Editor de imágenes integrado, usa un editor externo.

Debido a que las imágenes no deben tener las mismas dimensiones para tener la misma relación de aspecto, es mejor recortarlas según una relación específica que intentar adaptar sus dimensiones exactas. Para obtener los mejores resultados, recorta el lado más corto.

  • Por ejemplo, si tu imagen tiene 1500px x 1200px y quieres una relación de aspecto de 3:1, recorta el lado más corto para que la imagen tenga 1500px x 500px.
  • No amplíes el lado más largo. Esto puede hacer que tu imagen se vea borrosa.

Para calcular la longitud que debe tener el lado más corto, usa una calculadora de relación de aspecto como esta. Ten presente que se trata de una aplicación externa que no está cubierta por el Soporte técnico de Squarespace.

  1. Busca las dimensiones de la imagen en tu computadora.
  2. En la calculadora de relación de aspecto, ingresa W1 y H1 a la izquierda para identificar la relación de aspecto actual.
  3. Ajusta el lado más corto hasta que encuentres la relación deseada.

Page banners

Los banners de página no tienen una relación de aspecto ni dimensiones predefinidas. Esto se debe a que se amplían y cambian de forma para adaptarse a diversos navegadores.

  • Puede resultarte útil recortar la imagen según la forma del banner (ancha y corta). Puedes medirlo de forma aproximada cuando recortas las imágenes, debido a que no hay dimensiones exactas que debas aplicar en ninguna plantilla. Subir imágenes que tengan la misma relación de aspecto te permite predecir cómo se recortarán para adaptarse al contenedor del banner.
  • La mayoría de las plantillas te dan la opción de ajustar la altura del banner.
  • Para los anuncios con altura fija, como los de las plantillas Montauk o Skye, verificar que todas las imágenes de los banners tengan la misma relación de aspecto creará un aspecto uniforme.

Relaciones de aspecto como porcentajes

En las galerías de Índice en cuadrícula de la familia de plantillas Brine, el ajuste de relación de aspecto aparece como un porcentaje que puedes ajustar con un control deslizante.

  • El control deslizante muestra valores de 0 a 160.
  • Configurarlo en 100 crea imágenes cuadradas.
  • Los valores por debajo de 100 tienen orientación horizontal.
  • Los valores por encima de 100 tienen orientación vertical.

Para crear una relación de aspecto exacta, divide la altura por el ancho. Por ejemplo:

  • Relación de aspecto 2:3: 3 ÷ 2 = 1.5, por lo que puedes ajustar el control deslizante en 150.
  • Relación de aspecto 3:2: 2 ÷ 3 = .667, por lo que debes ingresar 66.7 al lado del control deslizante.

Ejemplos de relaciones de aspecto

Estas son algunas relaciones de aspecto frecuentes y cómo lucen.

1-1.png

2-3.png

3-2.png

4-3.png

16-9.png

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 107 de 160