Resolver los problemas de imágenes recortadas

Pasos para minimizar los recortes no deseados y consejos para ayudar a que tus imágenes se vean lo mejor posible.

Última actualización: 31 de octubre de 2024

Muchas imágenes de tu sitio se recortarán automáticamente en orientación horizontal, vertical o ambas. Esto ayuda a que tus imágenes se vean mejor dentro de tu sitio y en navegadores de diferentes tamaños.

Esta guía te ayudará a comprender el recorte normal que ocurre en Squarespace y aprenderás a minimizarlo cuando quieras.

Consejo

para recortar la imagen original, utiliza el editor de imágenes o un software de terceros.

Más acerca del recorte

Cada imagen del sitio se encuentra en un contenedor, que es un cuadro invisible que controla cómo se muestra la imagen en relación con otro contenido de la página. Cuando se carga una imagen en un contenedor, según la configuración de este, puede ocurrir cualquiera de las siguientes dos situaciones:

  • La mayoría de las veces: la imagen se ajusta a las dimensiones del contenedor, que varían según el ancho del navegador. Si la imagen no tiene la misma forma que el contenedor, se recorta para llenarlo por completo.
  • A veces, la forma del contenedor se ajusta a las dimensiones de la imagen para que se muestre toda la imagen.

Normalmente, las imágenes de tu sitio se muestran dentro de las dimensiones de los contenedores y se recortarán un poco. Esto ayuda a que las imágenes se vean mejor, a la vez que se adaptan a diferentes tamaños de navegador.

bryler-overlay.png

Bloques de imágenes

Los bloques de imagen muestran las imágenes con su relación de alto y ancho originales, dentro de las restricciones de diseño de tu sitio.

Consejos:

  • En el Editor dinámico, los bloques de imagen configurados en Rellenar se recortan al cambiarse el tamaño. Los bloques de imagen configurados en Ajustar se hacen más pequeños o más grandes mientras se mantiene la relación de aspecto original.
  • En el editor clásico, recorta los bloques de imagen con el controlador de recorte. Para restablecer la imagen a sus dimensiones originales, haz doble clic en el controlador de recorte. Para hacer la imagen más pequeña, agrega bloques de espacio a cada lado.
  • Después de recortar, utiliza el punto focal para centrar la imagen.

Banners

Si las imágenes de banner tienen la misma relación de aspecto, es más fácil predecir cómo se recortarán. Asegúrate de optimizar las imágenes siguiendo nuestros consejos de formato de imágenes de banner.

Existen otras formas de controlar el recorte de banner en tu sitio, dependiendo de la versión de Squarespace en la que esté tu sitio.

Para crear imágenes de banner en la versión 7.1, agrega imágenes de fondo a las secciones de la página. Estas imágenes siempre se recortan hasta cierto grado, especialmente en dispositivos móviles. Para personalizar el banner, puedes:

  • Cambiar la cantidad de contenido que se superpone al banner. Una gran cantidad de contenido aumentará la altura del banner y hará que la imagen se recorte más.
  • Cambiar el tamaño del banner.
  • Utiliza el punto focal para cambiar la forma en que se centra la imagen.

Para saber cómo aparecen tus banners en dispositivos móviles, consulta ¿Cómo aparecerá mi sitio en dispositivos móviles?

Banners de página

Con algunas excepciones, los banners de página siempre se recortarán hasta cierto punto, especialmente en dispositivos móviles. La cantidad de recorte depende de la altura del banner y del ancho del navegador.

Consejos:

Banners en todo el sitio

Las imágenes agregadas a las imágenes de banner de todo el sitio (dentro de los estilos del sitio) pueden repetirse, mostrarse al alto o ancho del banner o llenar el contenedor por completo.

Consejos:

Imágenes de fondo o videos

El modo en que controlas el recorte de imágenes de fondo o videos depende de la versión de Squarespace en la que se encuentre tu sitio.

Si la imagen o el video de fondo de la sección aparecen recortados, cambia la altura o el ancho de la sección para mostrar más de la imagen o el video.

Las imágenes de fondo pueden repetirse, mostrarse a la altura o el ancho del navegador, o rellenar la pantalla del navegador por completo.

Consejos:

  • Utiliza Estilos del sitio para elegir cómo se muestra la imagen del banner.
  • Consulta nuestros consejos de solución de problemas para obtener ayuda con la visualización en dispositivos móviles.
  • Las imágenes de más de 2500 píxeles a lo largo de su borde más largo pueden causar problemas en dispositivos móviles.

Secciones de galería y Páginas de galería

Según qué versión de Squarespace use tu sitio, el sitio tendrá distintas opciones de galería.

Carga y administre imágenes directamente en la sección de galería y, a continuación, utiliza la pestaña Galería para controlar cómo se muestran las imágenes.

Para informarte mejor, consulta Secciones de galería.

La forma en que aparecen las imágenes en la página de galería depende de la plantilla. Consulta la guía de tu plantilla para saber cómo se recortan las imágenes para que se ajusten al diseño de tu página de galería.

Bloques de Galería

La visualización de las imágenes en un bloque de galería depende del formato: Diapositivas, Cuadrícula, Carrusel o Apilado.

Consejos:

  •  Todos los formatos. En el editor clásico, cambia el tamaño de todo el bloque agregando bloques espaciadores a ambos lados.
  • Presentación de diapositivas: la altura de la galería se establece mediante la imagen más amplia. Para evitar recortes o espacios en blanco, utiliza imágenes con relaciones de aspecto similares.
  • Cuadrícula: en la pestaña Diseño, utiliza la relación de aspecto para que todas las imágenes tengan la misma forma y cambia la cantidad de miniaturas por fila para cambiar su tamaño. Utiliza el punto focal para ajustar cómo de centrará la imagen.
  • Carrusel: ajusta la altura con el controlador de recorte.
  • Apilado: cada imagen se expande para llenar el ancho de la página o columna en la que se encuentra el bloque.

Páginas de portafolio y de índice

Las Páginas de portafolio y de índice son tipos distintos de páginas en diferentes versiones de Squarespace, pero funcionan de manera similar:

Posiciona el cursor sobre una sección de portafolio para agregar una imagen y, a continuación, utiliza la pestaña Galería para controlar cómo se muestra.

Para informarte mejor, consulta Páginas de portafolio.

La forma en que aparecen las imágenes en una página de índice depende de la plantilla. Consulta la guía de tu plantilla para obtener más información.

Páginas de la tienda

La forma en que el recorte afecta las imágenes de productos depende de la versión de Squarespace en la que se encuentre tu sitio.

Después de cargar imágenes a tu tienda, usa los ajustes de sección de la tienda para darles estilo. Haz clic en Editar en la página, posiciona el cursor sobre la sección de la tienda y haz clic en el icono de lápiz. Puedes cambiar el espaciado, las columnas, la relación de aspecto y la alineación del texto. Experimenta con diferentes ajustes de estilo para establecer cómo se muestran las imágenes de tus productos. Para obtener más información sobre cómo personalizar tu página de tienda, consulta las secciones de la página de colección.

Relación de aspecto de imágenes de los productos

No es posible recortar automáticamente las imágenes de los productos en las páginas de tienda. Recomendamos utilizar imágenes de productos con relaciones de aspecto similares. Por ejemplo, antes de cargar imágenes en tu sitio web, verifica que tengan una orientación horizontal o vertical coherente.

Si las imágenes de tus productos tienen distintas orientaciones, utiliza nuestro editor de imágenes integrado o herramientas de terceros para recortarlas. También puedes crear un diseño personalizado para tus productos mediante bloques de producto.

El recorte de las imágenes de productos en la página de aterrizaje depende del tipo de página de tienda de la plantilla.

Clásico

Para páginas de tienda clásicas:

  • En Estilos del sitio, utiliza el ajuste Recorte automático de imagen del producto para elegir si las imágenes se recortan de la misma forma o se muestran en sus formas originales.
  • Si vas a recortar, usa el ajuste Tamaño del elemento del producto para establecer la forma.
  • Utiliza el punto focal para ajustar dónde se centra la imagen.
  • Si no vas a recortar, usa el ajuste Color de superposición del producto para elegir el color que se muestra detrás de la imagen.
  • Para obtener más ayuda, consulta Cómo dar estilo a las páginas de tienda.
prodpagebackground.png

Avanzado

Para páginas avanzadas de tienda:

  • Las imágenes siempre se recortan a la misma forma. Esto ayuda a darle a tu página una apariencia cohesiva.
  • Para configurar la forma de todas las imágenes de la página de tienda, utiliza el ajuste Relación de aspecto de imagen en la sección Productos: Diseño de estilos del sitio.
  • Utiliza el punto focal para ajustar dónde se centra la imagen.
  • Para obtener más ayuda, consulta Cómo dar estilo a las páginas de tienda.
advancedprodcutscropping.png

Único

Visita estos enlaces para obtener información sobre los estilos de miniatura de cualquiera de las páginas de tienda exclusivas:

Páginas de Portada

Cómo acceder a esta función

La versión 7.1 no admite páginas de portada.

Las páginas de portada siempre se recortarán hasta cierto punto, especialmente en dispositivos móviles. La cantidad de recorte depende de la altura de la imagen, el ancho del navegador y el diseño que hayas elegido.

Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.