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 exhibirlas en la web

Squarespace elimina todas las conjeturas sobre cómo ajustar el formato tus imágenes para exhibirlas en la web. Creamos siete variaciones diferentes de cada imagen cargada para asegurarnos de que se vea perfecta en cualquier tamaño de pantalla.

Tenemos algunas recomendaciones sobre cómo ajustar el formato de tus imágenes antes de cargarlas. Para lograr los mejores resultados, sigue las recomendaciones a continuación:

Consejo: visita nuestra serie de videos sobre imágenes para obtener más consejos y ver tutoriales paso a paso sobre cómo añadir imágenes en todo el sitio.

Mira el video

Antes de comenzar

Para encontrar el tamaño y las dimensiones de tu imagen original antes de subirla a tu sitio:

  • PC - Haz clic derecho sobre el archivo de imagen y selecciona Properties (Propiedades)
  • Mac - Presiona Option (Opción) mientras haces clic en el archivo de imagen, luego selecciona Get Info (Obtener información).

Glosario

Esta es parte de la terminología que verás esta la guía.

  • Relación de aspecto: la relación de aspecto de una imagen es su relación entre el ancho y la altura expresada como un número, por ejemplo 3:4. Mantener una relación de aspecto consistente evita que las imágenes se distorsionen. Por ejemplo, si reduces el ancho de una imagen a la mitad, también debes reducir la altura a la mitad.
  • Ancho de la imagen: En esta guía, los tamaños de imagen hacen referencia al número de píxeles que hay en el ancho y en la altura de una imagen. Tu imagen se puede ver más grande o más pequeña en tu sitio según el tamaño del espacio asignado. Para más información, visita Ajustar el tamaño de una imagen.

¿Qué sucede después cargar una imagen?

Cuando cargas una imagen, Squarespace crea hasta siete versiones de la imagen, cada una con un ancho diferente. Los anchos son:

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

La altura cambia en relación con el ancho a fin de preservar la relación de aspecto de la imagen. El diseño adaptable incorporado de Squarespace capta el tamaño de imagen adecuado según la pantalla del visitante.

Nota: las imágenes cargadas a través del Editor de Estilo, como las imágenes de fondo, se mostrarán siempre en el ancho original de la imagen. Te recomendamos cargar estas imágenes con un máximo de 2500 píxeles en el borde más largo. Si quieres ver más consejos, consulta las mejores prácticas para las imágenes a continuación.

Requisitos de la imagen

Al cargar imágenes a tu sitio, sigue estas pautas:

Tipos de archivos

Guarda las imágenes solamente en formato .jpg, .gif o .png.

Los archivos .pdf, .psd, .tff y .doc no son compatibles con la web.

Nota: Puedes crear enlaces de descarga para archivos no compatibles con la web.

Nombre de archivo

Usa solamente letras, números, guión bajo y guión medio en los nombres de archivos. Otros caracteres (como signos de interrogación, signo de porcentaje y el símbolo &) pueden subir la imagen con errores o provocar un comportamiento inesperado en las galerías.

Tamaño del archivo

Te recomendamos usar archivos de imagen de menos de 500 KB para obtener los mejores resultados, aunque el límite para una imagen individual es de 20 MB. Cuando se trata del tamaño de imagen, más grande no siempre es mejor, ya que cargar imágenes más grandes puede afectar el rendimiento del sitio.

Resolución

Hay un límite en la resolución de imagen de 60 MP (megapíxeles).

Modo de color

Guarda imágenes en modo de color RGB. El modo de impresión (CMYK) no funcionará en la mayoría de los navegadores.

Perfil de color

Guarda las imágenes en el perfil de color sRGB. Si las imágenes no se ven bien en los dispositivos móviles, probablemente sea que no tienen un perfil de color sRGB.

Mejores prácticas para las imágenes

Ancho de imagen

Las dimensiones de la imagen original que cargas a tu sitio pueden tener un gran impacto sobre la forma en que se las ve. Te recomendamos que uses imágenes de entre 1500 y 2500 píxeles de ancho.

  • Las imágenes de menos de 1500 píxeles podrían lucir borrosas o pixeladas cuando se las amplíe para llenar el espacio asignado, como en las cabeceras.
  • En la mayoría de los casos, Squarespace reformateará las imágenes grandes hasta un ancho máximo de 2500 píxeles. No obstante, las imágenes cargadas a través del Editor de Estilo (como las imágenes de fondo y las imágenes de cabecera para todo el sitio) se cargarán en las dimensiones originales. Esto puede provocar problemas de carga de la página si la imagen supera los 2500 píxeles en su borde más largo.

Puedes reducir las dimensiones de una imagen en el Editor de imágenes Adobe Creative Cloud o usar un software externo. No recomendamos agrandar una imagen más pequeña, ya que podría lucir pixelada. En lugar de eso, comienza con una imagen que tenga 1500 píxeles como mínimo. Nuestra sociedad con Getty Images puede ayudarte a buscar imágenes de alta calidad.

Consejo: Si observas problemas de carga, como que la imagen de fondo no se carga en dispositivos móviles, intenta reducir el borde más largo de todas las imágenes a 1500 píxeles. Esta es la combinación más segura de calidad de imagen y velocidad de carga para tus visitantes.

Recorte de imagen

Los navegadores cargan la imagen completa para las imágenes recortadas por tu sitio, como aquellas recortadas con el cursor de recorte o con los ajustes de relación de aspecto del Editor de Estilo. Para reducir el tamaño de archivo de las imágenes grandes, es mejor primero recortarlas manualmente hasta un tamaño cercano al deseado con un software de terceros o con el Editor de Imagen Adobe Creative Cloud.

Image text

Whenever possible we recommend adding text as an overlay instead of including it within the image. This makes the text searchable and keeps it visible if the image crops on smaller devices. See our tips for adding overlay text to Image BlocksbannersGallery Pages, and Gallery Blocks.

If your image contains text, it's best to save it as a .png file. Text in a .jpg file often becomes blurry when the image is compressed. A .png file typically retains its sharpness, especially if the image is displaying at its original size.

Relación de aspecto

Te ayuda a asegurarte de que cada imagen que usas tiene la misma relación de aspecto (alto:ancho) antes de cargarla, ya que en general las imágenes se recortan según su ancho y alto. Si todas tus imágenes tienen la misma relación de aspecto, será más fácil anticipar cómo se verán recortadas. Para obtener más información, visita Comprender las relaciones de aspecto.

Orientación

Asegúrate de que tu imagen esté en la orientación correcta antes de cargarla. Si la imagen se guardó invertida, rótala con un software de edición de imagen antes de cargarla a tu sitio. Para ver una lista de programas de edición de imágenes, visita Editar imágenes para tu sitio.

Si ya agregaste la imagen a tu sitio, puedes rotarla si usando el editor de imágenes Adobe Creative Cloud incorporado.

DPI (PPP)

Si te preocupa la resolución de la imagen, no deberás preocuparte por los puntos por pulgada o los píxeles por pulgada, ya que ninguno afecta la calidad de visualización en la web. En lugar de eso, concéntrate en usar dimensiones de imagen que funcionen para tu sitio y en mantener los tamaños de archivo por debajo de 500 KB.

Tamaño de la página

Incluso si todas tus fotos pesan menos de 500 KB, si tienes muchas imágenes en una misma página, eso puede generar problemas como baja velocidad de carga. Revisa el contenido de tu página para asegurarte de que el tamaño de la página sea de 5 MB o menos.

Logos

Cuando añadas un logo, cárgalo en una altura similar a la que quieres que tenga en la página. En algunas plantillas, puedes ajustar la altura de visualización con el ajuste de Height (Altura) de Imagen de Logo en el Style Editor (Editor de Estilo).

Nota: evita tener que aumentar el tamaño de tu logo en el Style Editor (Editor de Estilo). Es mejor comenzar con una imagen grande y luego reducir el tamaño una vez que la cargaste al sitio.
Nota: cada plantilla trata a los logos de manera diferente. Visita nuestras Guías de plantillas para ver cómo mostrará tu logo la plantilla elegida.

Faviconos

Cuando añadas un favicon a tu sitio, asegúrate de que la imagen esté guardada como un archivo .ico o .png.

Las dimensiones recomendadas para un favicon son 100px × 100px hasta 300px × 300px. Los faviconos se mostrarán en los navegadores como 16px × 16px.

Nota: Internet Explorer no puede mostrar .pngs como faviconos.

.gifs animados

Los .gifs animados son una excepción a nuestra regla de 1500-2500 píxeles, sobre todo los .gifs en Bloques de Imagen. Un .gif de 1500 píxeles de ancho probablemente será muy grande, lo que podría reducir la velocidad en que funciona tu sitio. Te recomendamos ajustar el formato de los .gifs animados al tamaño en el que quieras que aparezcan en tu sitio.

Enlaces útiles

Crear y editar imágenes

Visita Editar imágenes para tu sitio si quieres ver enlaces al software recomendado para editar imágenes.

El editor de imágenes Adobe Creative Cloud incorporado

Si necesitas ayuda sobre cómo editar imágenes en tu sitio de Squarespace, visita Editar imágenes con el editor de imágenes Adobe Creative Cloud.

Alta densidad y retina displays

Para ver información sobre cómo ver imágenes en pantallas de alta densidad o retina displays, visita ¿Cómo se verá mi sitio en las pantallas retina?

Imágenes de productos

Al cargar las imágenes de los productos que vendes en el sitio, asegúrate de que la relación de aspecto coincida con la que seleccionaste en las opciones de tamaño de producto en el Style Editor (Editor de Estilo).

Para más información, visita Ajustar el estilo de la página de productos.

Bloques de Imagen

Para obtener más información sobre cómo usar imágenes en Bloques de imagen, visita Usar el Bloque de Imagen.

Bloques de Galería

Para obtener más información sobre cómo usar imágenes en Bloques de Galería, visita Usar Bloques de Galería.

Páginas de Galería

Para obtener más información sobre cómo usar imágenes con Páginas de Galería, visita Usar la Página de Galería.

Nota: si necesitas información más avanzada sobre cómo ajustar el formato de las imágenes para tu sitio, te recomendamos que visites las Squarespace Answers, nuestro foro de clientes y desarrolladores. Tal vez quieras considerar consultar a un Squarespace Specialist (Especialista de Squarespace).
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 210 de 403
Ajustar el formato de las imágenes para exhibirlas en la web