Tamaño de las imágenes maestras en Squarespace [Best Tips]

No hay una curva de aprendizaje con Squarespace, lo que lo convierte en una excelente opción para los no expertos en tecnología que desean un sitio confiable y asequible que aumente las ventas y sea fácil de usar. Incluye muchas plantillas de comercio electrónico, por lo que es natural que los sitios de comercio electrónico que lo utilizan para conectarse rápidamente con su público objetivo lo encuentren tan popular.

Muchos de nuestros clientes quieren intentar implementar fullPage.js en Squarespace, pero no tienen idea de cuál es el correcto. Tamaños de imagen de Squarespace fueron, o las mejores prácticas para las imágenes para ayudarlos a vender sus productos y servicios de manera efectiva.

¡Hoy dejamos esas preguntas de imagen para descansar! En esta publicación, veremos cuál es el mejor tamaño de imagen de Squarespace, el mejor tamaño de imagen de banner de Squarespace, y las mejores prácticas para usar varios tipos de imágenes de productos. Finalmente, le ofreceremos algunos consejos de diseño para maximizar su tasa de conversión.

¿Qué tamaño deben tener las imágenes para el sitio web Squarespace?

Depende de ti. El sitio web de Squarespace crea siete versiones diferentes de cada imagen según el tamaño que cargue, con anchos de 2500, 1500, 1000, 750, 500, 300 y 100 píxeles. Depende de usted decidir qué versión de tamaño de imagen de Squarespace prefiere.

La visualización de imágenes también se verá afectada por el tamaño del contenedor. Se recomienda que cargue imágenes de 1500-2500 píxeles de ancho para que se puedan cambiar de tamaño correctamente y hacer zoom.

Cuando se trata de imágenes de productos, Squarespace ofrece tres tipos de imágenes.

• Imágenes primarias. En muchos casos, estas son las imágenes que aparecen como la primera imagen de cada producto en los resultados de búsqueda.
• Imágenes en miniatura. Los bloques de productos y las páginas de productos con opciones avanzadas muestran estas imágenes.
• Imágenes Adicionales. Cuando los usuarios pasen el mouse sobre una miniatura usando la opción Página de producto avanzada, aparecerán solo en las páginas del producto (hablaremos de esto en un minuto).

Afortunadamente, se pueden usar las mismas dimensiones y relaciones de aspecto en todos los tipos de imágenes, lo que simplifica enormemente el proceso.

¿Qué tamaño debe tener la imagen de mi banner para Squarespace?

El mejor tamaño de imagen de banner de Squarespace es entre 2000px-2500px. Desea que esta imagen sea de la más alta calidad y que sea lo primero que vean los visitantes cuando visitan su sitio. Hacer que la imagen de su banner tenga un ancho de 2000px-2500px evitará que Squarespace tenga que estirar o acercar su imagen para que se ajuste a la página. ¡Asegúrate de que no supere los 500 KB!

Debido al diseño receptivo de Squarespace, siempre habrá un poco de recorte, por lo que puede tomar algunos intentos para cargar y recortar una imagen de banner y verla tanto en el escritorio como en el dispositivo móvil para que quede bien.

¿Cómo se cambia el tamaño de la imagen del banner de Squarespace?

Para cambiar la altura del banner*, sigue estos pasos:

1. Para editar la sección del banner, haga clic en Editar en la pagina.
2. Seleccione una altura preestablecida debajo Altura de la sección en la pestaña Formato, o haga clic en “…” para una altura personalizada.
3. Hacer clic Ahorrar después de pasar el cursor sobre Listo.
4. Tanto en computadoras como en dispositivos móviles, la altura de la sección determina cómo se recorta la imagen de fondo. Para obtener los mejores resultados, pruebe diferentes alturas.

*Cambiar el tamaño o la altura de su banner depende de la versión de su sitio (ya sea VERSIÓN 7.1 o VERSIÓN 7.0)

La altura del banner también depende de la cantidad de contenido de la sección. Puede agregar bloques espaciadores al banner para que parezca más alto sin agregar ningún contenido visible.

Aunque los banners generalmente ocupan el ancho del sitio, puede diseñar la imagen del banner para incluir un borde alrededor. Esto da la impresión de que el banner es más estrecho.

Los mejores consejos para formatear el tamaño de la imagen del banner de Squarespace

Asegúrese de que sus imágenes estén formateadas correctamente antes de cargarlas. Aquí hay algunas pautas para las imágenes de banner:

• Tamaño adecuado. Las imágenes deben tener entre 1500 y 2500 píxeles de ancho. Asegúrate de que el ancho sea mayor que la altura. Usa imágenes sin bordes y con patrones abstractos. No incluya texto en el archivo de imagen.
• Sin Fronteras. Usa imágenes sin bordes y con patrones abstractos. Desea utilizar imágenes que se puedan diseñar fácilmente con el diseñador de Squarespace.
• Sin texto incrustado. Las imágenes con texto no deben incluirse en el archivo de imagen real. El texto debe agregarse a la imagen.
• Barra de anuncios. Agregue una barra de anuncios en lugar de un banner si desea mostrar solo texto en la parte superior de su sitio. La barra de anuncios aún se puede diseñar para que coincida con el diseño de su sitio web, solo que tiene un propósito diferente.

Consejos para formatear el tamaño de otras imágenes de Squarespace

Hay algunos tipos de imágenes que quizás desee incluir en su sitio de Squarespace además de las imágenes de productos, como el icono favorito o la imagen de fondo. A continuación se muestra una lista de los tipos y el tamaño de imagen de Squarespace recomendado para cada uno:

• Favicón. Debe tener un favicon (o un pequeño logotipo que aparece en la barra de direcciones URL) entre 100 × 100 y 300 × 300. Se deben utilizar archivos PNG o ING. Lee este artículo para saber cómo cambiar tu Favicon en Squarespace.
• Imagen de fondo. Es probable que Squarespace amplíe el tamaño de la imagen de fondo de Squarespace a 2500 píxeles de ancho, que es lo que debe buscar.

¿Qué otros requisitos técnicos de tamaño de imagen de Squarespace deben tener Squarespace?

Squarespace requiere lo siguiente para que las imágenes de productos se utilicen en su sitio:

• Formato de imagen adecuado. Las imágenes solo pueden estar en formato JPG, GIF o PNG. Solo se aceptarán estos formatos.
• Nombres de archivos formateados. Utilice únicamente letras, guiones, números y guiones bajos en los nombres de archivo; de lo contrario, es posible que las imágenes no se muestren correctamente.
• Resolución Máxima. No supere los 60 megapíxeles en resolución de imagen. Nota: Para encontrar los megapíxeles en su imagen, multiplique sus dimensiones por 1,000,000.
• Imágenes RGB. La mayoría de los navegadores no mostrarán imágenes en el modo de color CMYK; deberían estar en RGB. Si no utiliza el perfil de color sRGB, es posible que sus imágenes no se muestren correctamente.
• 500 KB o menos. A pesar de que Squarespace permite tamaños de archivo de hasta 20 MB, se recomienda a los propietarios de sitios que mantengan las imágenes en 500 KB o menos para evitar afectar el rendimiento y los tiempos de carga, lo que puede ser un problema con imágenes más grandes. Para lograr un rendimiento óptimo, todo el contenido no debe sumar más de 5 MB por página.

¿Cómo cambiar correctamente el tamaño de la imagen de Squarespace?

Si está utilizando una PC Mac:

1. Abre la imagen en tu computadora en Avance.
2. Luego, haga clic en el Herramientas botón; encontrarás una opción llamada Ajustar la imagen. Pinchalo.

En una PC con Windows:

1. Abre la imagen en el Fotos solicitud.
2. Luego haga clic Editar y crear en la esquina superior derecha.

Aquí podrá seleccionar manualmente las dimensiones de la imagen en una nueva ventana que se abre. La proporción ajustará automáticamente la altura en las proporciones correctas cuando cambie el ancho a 1500.

El escalado se realiza en la proporción correcta, por lo que la imagen no se distorsiona.

También hay una opción para cambiar la resolución en la ventana, así como el tamaño de imagen alterado que se muestra en la parte inferior.

También puede cambiar el tamaño de la imagen de otras formas. Hay toneladas de aplicaciones para cambiar el tamaño de la imagen de Squarespace en Internet.

Si está familiarizado con las herramientas de Adobe, también puede cambiar el tamaño de su imagen con Photoshop antes de cargar la imagen en Squarespace.

¿Squarespace reduce la calidad de la imagen?

Si tu imagen es pequeña, Squarespace podría reducir su calidad. La razón es que Squarespace cambiará el tamaño de su imagen para que pueda mostrarse en cualquier tamaño de pantalla. Es por eso que debes evitar usar algo demasiado pequeño porque es posible que tengas que cambiar el tamaño o estirar la imagen.

Los tamaños de imagen pequeños pueden volverse borrosos fácilmente y arruinar la imagen.

Es mejor usar tamaños de imagen más grandes. Si tiene menos de 1500 píxeles de ancho, es probable que la imagen se pixele.

¿Importa la resolución de imagen de Squarespace a la calidad?

¡Ciertamente lo hace! Debe elegir una resolución de 150, 144 o 72 ppp si solo utilizará la imagen para su sitio web. Sin embargo, este no es el mismo requisito para imprimir imágenes de calidad. Si desea imprimir una imagen, la resolución debe ser de 300 ppp.

¿Cómo puedo hacer que todas mis imágenes tengan el mismo tamaño en Squarespace?

Si tiene la intención de cargar varias imágenes en su sitio web. Asegúrese de que todas las imágenes tengan la misma relación de aspecto. Esto mantendrá todo uniforme.

El ancho y la altura de todas las imágenes deben ser iguales. La forma más común de hacer esto es usar una relación de aspecto de 1:1, que es una imagen cuadrada.

Además, una imagen vertical generalmente se presenta en una relación de aspecto de 3:4, mientras que una imagen horizontal generalmente se presenta en una relación de aspecto de 3:2.

Todas tus imágenes se mostrarán maravillosamente con Squarespace una vez que hayas hecho que todas tengan la misma relación de aspecto.

¿Cómo comprimes tus imágenes de Squarespace?

Una vez que haya fijado la relación de aspecto de las imágenes, puede proceder con el tamaño del archivo. Un buen tamaño es menor o igual a 500kb. De lo contrario, deberá comprimirlo antes de cargarlo. Para hacer esto:

1. Visita www.tinypng.com

2. Sube tu archivo de imagen al sitio. El archivo comenzará a comprimirse automáticamente.

3. Espere a que termine la compresión.. Verá el tamaño del archivo de imagen comprimida después de que haya terminado.

4. Descarga La Imagen. Ahora puede descargar la imagen a su almacenamiento haciendo clic en la imagen. Con suerte, el archivo tendrá menos de 500kb esta vez.

Puede cargar 20 imágenes a la vez en este sitio web. Por lo tanto, puede comprimir los archivos con bastante rapidez.

Para cargar más de 20 imágenes, simplemente abra otra pestaña en su navegador y cárguelas allí.

Crear una nueva carpeta para almacenar los archivos comprimidos es el siguiente paso.

Los archivos comprimidos tendrán el mismo nombre que el archivo principal. Por lo tanto, mantenerlos en una carpeta separada lo ayudará a localizarlos más fácilmente cuando los cargue en Squarespace.

Artículos relacionados