Requisitos y mejores prácticas para subir imágenes.

Squarespace hace que ajustar el formato de tus imágenes para mostrarlas en la web sea fácil. Creamos siete variaciones diferentes de cada imagen cargada para garantizar una visualización óptima en cualquier tamaño de pantalla.

Utiliza esta guía para comprender cómo se muestran las imágenes en la web, obtener información sobre los requisitos de Squarespace para las imágenes y encontrar pautas de formato para tus imágenes. Para conocer los pasos de solución de problemas, visita Solución de problemas de carga y formato de imágenes.

Después de subir imágenes a tu sitio, conserva todos los archivos de imagen en tu computadora para reducir el riesgo de perder los archivos originales.

Consejo: Haz que tu sitio destaque con imágenes de alta calidad y bien ubicadas. Para obtener más información, consulta nuestra guía sobre cómo elegir imágenes atractivas.

Mira el video

Cómo se muestran las imágenes en la web

Varios factores influyen en la visualización de las imágenes en los sitios web:

• Especificaciones de archivo de imagen: revisa nuestros requisitos de imágenes para asegurarte de que puedes cargar imágenes en tu sitio. De manera predeterminada, todas las imágenes que subas a tu sitio se convierten al formato WebP.
• Ancho de imagen: las imágenes estrechas pueden verse muy bien en dispositivos móviles pero borrosas en un equipo, porque la pantalla es más ancha.
• Forma de la imagen: también conocida como relación de aspecto, es la relación entre la altura y el ancho de tu imagen. Las imágenes añadidas a las galerías suelen verse mejor si todas tienen una forma similar. Para obtener más información, visita Comprender las relaciones de aspecto. También contamos con ejemplos de relaciones de aspecto comunes.
• Contenedores y recorte de imágenes: todas las imágenes de tu sitio están en un contenedor, que es un cuadro invisible que controla cómo se muestra la imagen en relación con el resto del contenido de la página. Por ejemplo, los banners tienen un contenedor rectangular. Para minimizar el recorte, asegúrate de que la forma de tu imagen coincida con la del contenedor. Para informarte mejor, visita Solución de problemas de recorte.
• Diseño adaptable: cada sitio de Squarespace tiene un diseño adaptable, que cambia automáticamente el tamaño de las imágenes, según el dispositivo del visitante.

Requisitos de la imagen

Antes de subir imágenes a tu sitio, asegúrate de que tus imágenes cumplan con nuestros requisitos para las imágenes. No puedes cambiar el archivo de imagen en sí mismo después de cargarlo, solo alterar su aspecto usando nuestro editor de imágenes integrado . Para cambiar los atributos de la imagen, formatea la imagen en tu computadora y súbela de nuevo.

Atributo de imagen	Especificación	Nota
Tipo de archivo	Solo se aceptan archivos .jpg, .gif, .png o .webp	Los archivos .pdf, .psd y .doc no son compatibles.
Tamaño del archivo	Límite de 20 MB	Para que tu sitio cargue rápido, recomendamos subir imágenes de 500 KB o menos.
Nombre de archivo	Usa únicamente letras, números, guiones bajos y guiones.	Es posible que las letras acentuadas, los signos de interrogación, los signos porcentuales y los símbolos & no se carguen o puedan causar problemas inesperados.
Ancho de imagen	Un ancho de 2500 píxeles es ideal para la mayoría de las imágenes.	Subir imágenes con un ancho de 2500 píxeles te da acceso a toda la gama de imágenes redimensionadas que creamos y minimiza tus tiempos de carga. Puedes subir imágenes con anchos menores para limitar la resolución máxima que se mostrará en tu sitio. Esto puede ayudar a disminuir el tiempo de carga del sitio en algunos dispositivos, o a limitar la calidad de la imagen que los visitantes pueden descargar, pero las imágenes de menos de 1500px de ancho pueden verse borrosas. Sugerimos diferentes anchos para los logotipos del sitio, los íconos del navegador y las campañas de email marketing.
Resolución	Límite de 120 MP (megapíxeles)	Para encontrar la resolución de la imagen, utiliza esta calculadora o multiplica las dimensiones y divide por 1 millón. Por ejemplo, una imagen de 1500 px x 1650 px es de 2,47 MP.
Modo de color	RGB (rojo, verde, azul)	El modo de color CMYK es solo para materiales impresos y no aparece correctamente en la mayoría de los navegadores. En Mac, este atributo puede denominarse Perfil de color o Espacio de color.
Perfil de color	sRGB	Si las imágenes no se ven bien en dispositivos móviles, es posible que no tengan un perfil de color sRGB.
DPI y PPI	n/a	No tienes que preocuparte por los DPI (puntos por pulgada) o PPI (píxeles por pulgada) porque solo afectan la calidad de impresión de una imagen, no su visualización web.

Estos requisitos y recomendaciones ayudan a garantizar que tus imágenes se vean bien en tu sitio. Si tienes muchas imágenes grandes en tu sitio y notas que se carga lentamente, consulta Cómo reducir el tamaño de una página para que cargue más rápido.

Consejo: optimiza el tamaño de las imágenes conectando la extensión TinyIMG. TinyIMG reemplaza las imágenes de gran tamaño por versiones comprimidas, lo que garantiza una carga de página más rápida sin perder calidad de imagen. Si bien trabajamos con servicios de terceros para garantizar que Squarespace Extensions funcione correctamente, las extensiones quedan fuera del alcance de nuestra atención al cliente. Podemos ayudarte a conectar o desconectar tus extensiones. Si tienes cualquier otra pregunta, comunícate directamente con el proveedor de las extensiones.

Formato de archivo WebP

Para optimizar el rendimiento de tu sitio, todas las imágenes de tu sitio de Squarespace se muestran automáticamente con el formato WebP. El formato de imagen WebP mejora el tiempo de carga mientras mantiene la calidad. En comparación con los archivos .jpg y .png de calidad similar, los archivos WebP son más pequeños, lo que los hace útiles para mostrar muchas imágenes. 

Cuando subes una imagen a Squarespace, la convertimos al formato WebP y mostramos esa versión en el contenido de tu sitio. El archivo original permanece en tu biblioteca de recursos, y cualquier edición que hagas en el archivo se aplicará a la versión WebP en tu sitio. También puedes cargar archivos WebP directamente en tu sitio.

Si no quieres que tus imágenes se conviertan en archivos WebP, puedes desactivar esta configuración:

1. Abre el panel de Rendimiento del sitio.
2. Haz clic en el control formato de imagen WebP para desactivarlo.

Cualquier imagen en tu sitio volverá a su formato original dentro de 24 horas.

Busca los detalles de la imagen

Para saber si tu imagen cumple con nuestros requisitos, revisa la información del archivo de imagen.

Mac

Para encontrar la información de un archivo de imagen:

1. Selecciona el archivo de imagen en tu equipo.
2. Presiona Command + I.
3. En la ventana que se abre, haz clic en Más información.

Windows

Para encontrar la información de un archivo de imagen:

1. Selecciona el archivo de imagen en tu equipo.
2. Pulsa Alt + Enter.
3. En la ventana que se abre, haz clic en Detalles.

Dispositivos móviles

Los pasos para mostrar la información de la imagen varían según la aplicación, el dispositivo y el sistema operativo. Revisa la documentación de la aplicación que utilizas para ver o editar fotografías en tu dispositivo móvil.

Nota: Los iPhones y iPads en iOS 11 y posteriores capturan imágenes en un formato de alta eficiencia (HEIF) que produce archivos .heic. Se convierten automáticamente a .jpg cuando se importan o comparten en muchos lugares, incluida la aplicación de Squarespace, pero puedes ajustar la configuración de tu teléfono para capturar imágenes como .jpg de forma predeterminada. Para obtener más información, consulta la documentación de Apple.

Fondos transparentes

Si necesitas una imagen sin fondo o un color de fondo (por ejemplo, para un logotipo), usa un archivo .png. con fondo transparente. Puedes usar software de terceros para lograrlo, o usar Squarespace Logo para crear uno con un fondo transparente automáticamente.

Si editas tu imagen con nuestro editor de imágenes integrado, se guardará como un archivo .jpg y se elimina toda transparencia. Si quieres conservar el formato .png, edita la imagen con software de terceros.

Texto en imágenes

Para agregar texto sobre la imagen, recomendamos hacerlo como superposición en lugar de insertarlo en la imagen. Esto permite hacer búsquedas en el texto y lo mantiene visible si la imagen se recorta en dispositivos más pequeños. Consulta nuestros consejos para agregar texto superpuesto a bloques de imagen, banners, páginas de galería y bloques de galería.

Si la imagen contiene texto, guárdala como un archivo .png. El texto de un archivo .jpg suele verse borroso cuando la imagen se comprime. Por lo general, un archivo .png conserva su nitidez, especialmente si la imagen se muestra en su tamaño original.

Texto alternativo

Cuando crees tus imágenes, ten presentes nuestras mejores prácticas sobre el texto alternativo. Es importante agregar texto alternativo a tus imágenes, ya que ayuda a que tu contenido sea más accesible para los visitantes que usan lectores de pantalla. El texto alternativo también les indica a los motores de búsqueda de qué se trata la imagen, lo que hace que sea más probable que tu sitio aparezca en las búsquedas de imágenes.

Si no agregas texto alternativo a tus imágenes, el nombre del archivo se usará como texto alternativo, excepto para los bloques de imagen y los diseños inteligentes. Puedes cambiar el nombre de archivo de una imagen que ya hayas subido a la biblioteca de recursos.

¿Cómo cambia el tamaño de mis imágenes en distintos dispositivos?

Cuando cargas una imagen, Squarespace crea hasta siete versiones de esa imagen, cada una con un ancho diferente. La altura cambia en relación con el ancho para preservar la forma de la imagen. El diseño adaptable integrado de Squarespace elige automáticamente el tamaño de imagen adecuado en función de la pantalla del visitante. Los anchos que creamos son:

• 100 píxeles
• 300 píxeles
• 500 píxeles
• 750 píxeles
• 1000 píxeles
• 1500 píxeles
• 2500 píxeles

Para obtener una vista previa del aspecto de tu sitio en dispositivos móviles, usa la vista en dispositivo.

¿Es necesario que mis imágenes tengan dimensiones exactas?

No. Nuestro sistema cambia automáticamente el tamaño de tus imágenes para que sean más grandes o más pequeñas para adaptarse a diferentes anchos de dispositivo, por lo que no es necesario formatear las imágenes a dimensiones exactas, como 750px × 500px. Por ejemplo, no existe un requisito específico de alto y ancho para los bloques de imágenes ni un requisito diferente para las imágenes de las secciones de galería. Sigue nuestros consejos sobre el ancho de imágenes para asegurarte de que tus imágenes no estén borrosas.

Si tus imágenes no se muestran de la forma que te gustaría:

• Asegúrate de seguir nuestros requisitos de imágenes
• Modifica el estilo de tus imágenes.
• Resuelve los problemas de formato de imágenes.

Más ayuda

Para obtener más información sobre cómo agregar imágenes en Squarespace, consulta estas guías:

• Serie de videos: Todo sobre imágenes
• Agregar y cambiar el tamaño de imágenes
• Solución de problemas de carga y de formato de imágenes
• Agregar un logo
• Editar imágenes en tu sitio
• Hacer que el audio, las imágenes y los videos sean más accesibles
• Buscar y agregar imágenes de stock
• Prácticas recomendadas para imágenes de stock
• Cómo importar metadatos de imágenes

Además de las guías anteriores, ofrecemos otros recursos para ayudarte a dar formato a imágenes:

• Recibe consejos de la comunidad en Squarespace Forum.
• Contrata a un Squarespace Expert para que te ayude.