Ajustar el formato de las imágenes para mostrarlas en la web

Consejos para modificar el estilo a las imágenes y que se vean claramente en pantallas de cualquier tamaño.

Última actualización: 2 de enero de 2025

Squarespace hace que ajustar el formato de las imágenes que quieres mostrar en la web sea fácil. Creamos siete variaciones diferentes de cada imagen cargada para asegurarnos de que se vea perfecta 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 imágenes de Squarespace y encontrar sugerencias de formato para tus imágenes. También se indican pasos para solucionar problemas de formato de imágenes.

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.
  • 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 imagen: también conocida como relación de aspecto, es la relación entre la altura y el ancho de la imagen. La forma de la imagen influye en cómo se muestran las imágenes en el sitio. Para obtener más información, consulta Información sobre relaciones de aspecto. También ofrecemos ejemplos de relaciones de aspecto comunes.
  • Contenedores y recorte de imágenes: 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. Por ejemplo, los banners tienen un contenedor rectangular. Para minimizar o evitar recortes, asegúrate de que la forma de la imagen coincida con la forma del contenedor. Si la imagen aparece recortada, consulta 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 imágenes y prácticas recomendadas

Antes de cargar imágenes a tu sitio, asegúrate de que cumplan con nuestros requisitos. No puedes cambiar el archivo de imagen en sí después de cargarlo; solo puedes cambiar su apariencia con nuestro editor de imágenes integrado.

Atributo de imagen Especificación Nota
Tipo de archivo Solo se aceptan archivos .jpg, .gif, o .png Los archivos .pdf, .psd y .doc no son compatibles.
Tamaño del archivo

Límite de 20 MB

Utiliza imágenes de 500 KB o menos para ayudar a que tu sitio se cargue rápido.

Lo mejor es subir imágenes de alta calidad que sean tan grandes como el tamaño máximo que con el que esperas que la imagen se muestre en tu sitio web, o más grandes. Esto dará como resultado que las versiones de la imagen con el tamaño cambiado aparezcan con la mejor calidad.

Nuestro límite de imágenes en Acuity es de 1.5 MB. 

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 en la mayoría de los casos.

No necesitas cambiar el tamaño de las imágenes si miden más de 2500 px de ancho y cumplen con nuestras otras especificaciones, pero, si estás exportando tus imágenes específicamente para cargarlas a Squarespace, intenta ampliarlas a 2500 px de ancho. Esto te dará acceso a toda la gama de imágenes con tamaños cambiados que creamos, mientras se reducen los tiempos de carga.

Puedes subir imágenes de menos de 2500 px para restringir la resolución máxima de la imagen que se muestra en tu sitio. Esto puede ser útil para aumentar la velocidad a la que los visitantes de tu sitio pueden descargar esa imagen en algunos dispositivos, o para limitar la calidad de la imagen que los visitantes de tu sitio pueden descargar.

Las imágenes que miden menos de 1500 px 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.

Ten en cuenta que, según el tamaño de la imagen original, tal vez no sea posible descargar el archivo original de la imagen desde tu sitio web. Para reducir el riesgo de perder los archivos originales, guarda todos los archivos de las imágenes en tu computadora después de subirlos a tu sitio.

Nuestros requisitos son los mínimos que recomendamos para garantizar que tus imágenes se muestren bien en tu sitio. Mantén el tamaño de la página por debajo de 5 MB para garantizar que tu sitio se cargue rápido. Si observas que se carga lento, visita Reducir el tamaño de la página para una carga más rápida.

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.

Examinar archivos de imagen

Para determinar si la imagen cumple con nuestros requisitos, tendrás que examinar la información del archivo de imagen.

Mac

Para examinar la información de una 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 examinar la información de una 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.

Formato de imágenes

El modo y el lugar en que agregas imágenes influyen en cómo aparecen en tus páginas. Puedes agregar imágenes a tu sitio mediante bloques, secciones y páginas.

Ten en cuenta lo siguiente:

  • Verifica que la imagen esté en la orientación correcta antes de cargarla. Si la imagen se guarda al revés, gírala con el software de edición de imágenes antes de cargarla en tu sitio. Si ya agregaste la imagen a tu sitio, gira la imagen con nuestro editor de imágenes integrado.
  • Las imágenes que añadas a las galerías se ven mejor si todas tienen una forma similar. Por ejemplo, utiliza solo imágenes horizontales (más anchas que altas) o solo imágenes verticales (más altas que anchas), no ambas.
  • Para obtener una vista previa del aspecto de tu sitio en dispositivos móviles, usa la vista en dispositivo.

Fondos transparentes

Para crear una imagen sin color de fondo, asegúrate de que la imagen sea un archivo .png con un fondo transparente. Puedes usar software de terceros para lograr esto o, si necesitas un logotipo, puedes usar Squarespace Logo para crear uno con un fondo transparente automáticamente.

Si editas tu imagen con nuestro editor de imágenes integrado, se guarda como .jpg y elimina toda la transparencia. Para mantener el formato.png, utiliza software de terceros.

¿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

¿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:

Agregar imágenes y modificar su estilo

Puedes utilizar estilos del sitio, paneles de diseño y ajustes de sección de bloques o páginas para realizar cambios de estilo y personalizar el aspecto de las imágenes. La forma de agregar las imágenes y darles estilo depende de la versión en la que se encuentre tu sitio. Consulta la siguiente tabla para saber cómo hacerlo:

Mostrar imagen mediante Cómo dar estilo a tus imágenes

Logo del sitio

Icono de favoritos o icono del navegador

Bloques de imágenes

Banners

Páginas de portada

Páginas de galería

Bloques de galería

Imágenes destacadas

Bloques de productos

Imágenes de fondo para todo el sitio

.gifs animados

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.

Solución de problemas de formato de imágenes

Si tus imágenes aparecen recortadas o distorsionadas, puedes:

¿Por qué mis imágenes se ven borrosas?

Si las imágenes aparecen borrosas o pixeladas, es probable que sea porque son demasiado estrechas para mostrarse bien en la web. En la mayoría de las áreas de Squarespace, recomendamos usar imágenes de más de 1500px. Sin embargo, algunas áreas de contenido tienen otros requisitos:

¿Por qué aparece un mensaje de error al cargar mi imagen?

En primer lugar, revisa nuestros requisitos de imágenes. Si utilizas el tipo de archivo correcto y la imagen es de 20 MB o menos, el problema podría ser la resolución de tu imagen. Esta se mide en megapíxeles y nuestro límite es de 120 MP.

¿Por qué se distorsiona el color de mi imagen?

Es posible que el modo de color o el perfil de color de la imagen no tenga el formato correcto. Revisa nuestros requisitos de imágenes para confirmar que estás utilizando la configuración correcta.

¿Por qué se recortan las imágenes de banner en dispositivos móviles?

Las imágenes de banner casi siempre se recortan en dispositivos móviles porque un banner es ancho y los dispositivos móviles son estrechos. Las imágenes de banner se recortan en dispositivos móviles por diversos motivos. Si notas recortes en dispositivos móviles:

¿Por qué cambia la resolución de mi imagen cuando se ve en diferentes tamaños?

Cuando redimensionas las imágenes en tu sitio, en lugar de eso, que conserva las mismas dimensiones de píxeles, nuestro procesador de imágenes vuelve a hacer una muestra de estas. Esto significa que, a medida que cambia el tamaño del contenedor de imágenes, los píxeles pueden mezclarse, lo que puede resultar en que las imágenes pierdan algo de nitidez. Subir imágenes que cumplan con nuestros requisitos y prácticas recomendadas garantizará que tus imágenes se renderizen con una claridad aceptable en cualquier tamaño, pero se esperan pequeñas discrepancias.

Imágenes en Acuity Scheduling

Al cargar imágenes a Acuity, puedes usar los mismos tipos de archivos de imagen que en el resto de tu sitio. Sin embargo, debes tener en cuenta estas diferencias al dar formato a tus imágenes de Acuity:

  • El límite de tamaño de archivo es inferior al límite de imágenes de sitios web.
  • Acuity cambia automáticamente el tamaño de las imágenes de más de 600 x 120 px cuando se cargan en el campo Logotipo de empresa.
  • Acuity cambia automáticamente el tamaño de las imágenes de más de 600 px x 600 px cuando se cargan como imágenes de un calendario o tipo de cita.
  • Para obtener los mejores resultados visuales, recomendamos utilizar imágenes con forma cuadrada o con una relación de aspecto 1:1.

Más ayuda

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

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

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.

Ajustar el formato de las imágenes para mostrarlas en la web