Consejos para cambiar el tamaño de las imágenes en tu sitio.

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.

Mira el video

Las relaciones de aspecto y Squarespace

Muchas opciones de estilo te permiten elegir relaciones de aspecto para diferentes tipos de imágenes, como imágenes destacadas de entradas de blog, imágenes de galería o productos.

• Por ejemplo, si eliges una relación de aspecto de 3:2 para las imágenes destacadas de entradas de blog, todas las imágenes destacadas de entradas en tu página de blog se recortarán con esta 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.
• Puedes cambiar la altura de algunos bloques de imagen utilizando el controlador de recorte. Para obtener más información sobre cómo recortar imágenes, visita Solución de problemas de recorte.

Las opciones exactas de relación de aspecto disponibles dependen de tu versión y plantilla. Este es un ejemplo de la página de blog en la plantilla Brine:

Algunos retoques de estilo 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.

Recortar según una relación de aspecto

Además de usar las opciones de estilo 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 con 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 ofrezca 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.

Banners de página

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. Ten en cuenta lo siguiente:

• Antes de subir imágenes a tus banners, sigue nuestras sugerencias de formato de imagen de banner.
• Es posible que desees utilizar nuestro editor de imágenes integrado para recortar la imagen. Para obtener ayuda para recortar banners, visita Solución de problemas de recorte.
• La mayoría de las plantillas dan la opción de cambiar el tamaño del banner, incluida la altura.
• Para los banners 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.

Relación de aspecto para imágenes de productos

Es importante que las imágenes de tus productos sean atractivas para los posibles clientes. Para ayudarte con esto, puedes establecer la relación de aspecto de las imágenes en las páginas de la tienda y de detalles del producto. Para obtener más información sobre cómo aplicar estilo a las imágenes de tus productos, visita Imágenes de productos.

Si las imágenes de tus productos aparecen recortadas, visita Solución de problemas con el recorte de imágenes.

Relación de aspecto para videos

Para los videos que subas a tu sitio directamente, la relación de aspecto coincidirá con la del archivo que subiste. La mayoría de los videos subidos se muestran en un reproductor que tiene una relación de aspecto de 16:9, por lo que las barras negras o el espacio en blanco pueden aparecer en la parte lateral de los videos con otras relaciones de aspecto. Los videos subidos a fondos de sección se recortan y amplían para ocupar todo el tamaño de los fondos.

Para videos insertados, la imagen en miniatura del servicio de alojamiento de video determina la relación de aspecto de cada video. Si colocas bloques de video en filas o usas galerías de cuadrícula, las filas pueden ser desiguales.

Si utilizas bloques de galería y páginas de galería (solo en la versión 7.0) y los videos no aparecen correctamente, cambia los Estilos del sitio:

• En los bloques de galería, habilita Recortar imágenes para proporcionar a los videos una relación de aspecto uniforme.
• Para las Páginas de galería, configura la relación de aspecto en cualquier configuración, excepto Automática.

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.