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 Propiedades
  • Mac - Presiona Opción mientras haces clic en el archivo de imagen, luego selecciona 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 de Estilos del sitio, 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.

Consejo: 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.

Resolución

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

Consejo: Para calcular los MP de una imagen, multiplica las dimensiones y divídelas por un millón. Por ejemplo, una imagen que mide 1500 px x 1650 px mide 2.475 MP.

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

Tamaño del archivo

Te recomendamos usar archivos de imagen de menos de 500 KB para obtener los mejores resultados, a pesar de que el límite para cada imagen subida es de 20 MB. Cuando se trata del tamaño de la imagen, no siempre más grande es mejor, debido a que subir imágenes más grandes puede afectar el funcionamiento del sitio. Si agregas varias imágenes a una página, también debes tener presente el tamaño general de la página.

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 reajustará el formato de las imágenes grandes hasta un ancho máximo de 2500 píxeles. No obstante, las imágenes cargadas a través de Estilos del sitio (como las imágenes de fondo y las imágenes de banner 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 usar software de terceros para reducir las dimensiones de una imagen. 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. También puedes buscar y agregar imágenes de stock de alta calidad directamente desde tu sitio.

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 de los Estilos del sitio. 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 Imágenes integrado.

Texto en imagen

Siempre que sea posible, te recomendamos que añadas texto superpuesto, en lugar de incluirlo dentro de la imagen. De este modo, podrás usar este texto en las búsquedas y seguirá siendo visible si la imagen se recorta en dispositivos más pequeños. Consulta nuestros consejos para añadir texto superpuesto en Bloques de ImagencabecerasPáginas de GaleríaBloques de Galería.

Si tu imagen contiene texto, es mejor guardarla como un archivo .png. El texto dentro de un archivo .jpg en general queda borroso al comprimir la imagen. Un archivo .png normalmente conserva la nitidez, especialmente si la imagen se verá en su tamaño original.

Nombres de imágenes

El nombre de la imagen actúa como texto alternativo si no se proporciona otro 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 aparezcas en las búsquedas de imagen. 

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. En Bloques de imagen, puedes cambiar el campo Nombre del archivo en la pestaña Contenidos.

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, gírala con un software de edición de imágenes antes de cargarla en tu sitio. 

Si ya agregaste la imagen a tu sitio, puedes girarla usando el Editor de Imágenes integrado.

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 cambiar la altura. Si lo haces, es mejor comenzar con una imagen grande y, luego, reducir el tamaño una vez que la hayas cargado en el 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

Nota: Si necesitas ayuda más avanzada para ajustar el formato de las imágenes de tu sitio, te recomendamos visitar Squarespace Answers, nuestro foro de clientes y desarrolladores. También puedes considerar consultar con un Experto de Squarespace.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 428 de 782
Ajustar el formato de las imágenes para exhibirlas en la web