Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

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

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 angostas 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 en tu sitio, asegúrate de que cumplen con nuestros requisitos, los cuales son los mínimos que recomendamos para garantizar que las imágenes se muestren bien en tu sitio. Mantén el tamaño de tu página por debajo de 5 MB para garantizar que tu sitio se cargue rápido. Si notas que se carga lento, consulta Cómo reducir el tamaño de una página para cargarla más rápido.

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. Internet Explorer no puede mostrar .pngs como íconos de favoritos.
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.

Nuestro límite de imágenes de Squarespace Scheduling es de 1,5 MB. Para saber más sobre los requisitos de imágenes de Scheduling, consulta Imágenes en Squarespace Scheduling.

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 tus imágenes si tienen un ancho superior a 2500 px y cumplen con nuestras otras especificaciones. Las imágenes de menos de 1500 px de ancho pueden aparecer borrosas.

Sugerimos diferentes anchos para los logotipos de sitios, íconos del navegador, campañas por correo electrónico y archivos .gif animados.

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 PPP y PPI porque solo afectan la calidad de impresión de una imagen, no su visualización web.

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 agregadas a las galerías se visualizan mejor si todas tienen una forma similar. Por ejemplo, utiliza todas las imágenes horizontales (más anchas que altas) o todas las imágenes apaisadas (más altas que anchas), no unas y otras.
  • Para obtener una vista previa del aspecto de tu sitio en dispositivos móviles, usa la vista en dispositivo.

¿Cómo cambian el tamaño de mis imágenes para 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 ícono del navegador

Bloques de imágenes

Cabeceras

Páginas de Portada

Páginas de Galería

Bloques de Galería

Imágenes en miniatura

Bloques de Producto

Imágenes de fondo para todo el sitio

  • Recorta las imágenes o modifica su estilo.

.gifs animados

Nombres de archivo y texto de imágenes

Nombres de archivo de imagen y texto alternativo

Si no se proporciona ningún otro texto alternativo, el nombre de archivo de una imagen sirve como texto alternativo. Este también indica a los motores de búsqueda de qué trata la imagen, lo que hace más probable que tu sitio aparezca en las búsquedas de imágenes. Los bloques de imagen solo tienen una fuente de texto alternativo

Cuando crees tus imágenes, ten presentes nuestras mejores prácticas sobre el texto alternativo.

Consejo: Si deseas cambiar el nombre de archivo para la mayoría de las imágenes, vuelve a subir la imagen con el nombre nuevo.

Texto en imagen

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árdalo 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.

Solución de problemas de formato de imágenes

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

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

Imágenes en Squarespace Scheduling

Al cargar imágenes a Squarespace Scheduling, 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 Scheduling:

  • El límite de tamaño de archivo es inferior al límite de imágenes de sitios web.
  • Scheduling 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.
  • Scheduling cambia automáticamente el tamaño de las imágenes de más de 600 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:

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 786 de 1365
Ajustar el formato de las imágenes para mostrarlas en la web