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 Todo sobre las 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 uniforme 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:

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 obtener los mejores resultados.
Nombre de archivo Usa únicamente letras, números, guiones bajos y guiones. Es posible que las letras acentuadas, y los signos de interrogación, porcentaje y & no se carguen o causen problemas inesperados.
Resolución Límite de 60 MP (megapíxeles) Para encontrar la resolución de la imagen, multiplica las dimensiones y divide por 1 millón. Por ejemplo, una imagen de 1500 px x 1650 px es 2,47 MP.
Modo de color RGB (rojo, verde, azul) El modo de color CMYK es solo para materiales impresos y no se verá correctamente en la mayoría de los navegadores.
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.

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 pesadas 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 pueden aparecer borrosas o pixeladas cuando se estiran para llenar contenedores, como banners. Para saber cómo cambian el tamaño de los banners en diferentes dispositivos y anchos de pantalla, visita Diseño adaptativo.
  • 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 imágenes

Los navegadores cargan la imagen completa de las imágenes recortadas por el sitio, como las recortadas con el controlador de recorte o los retoques de la relación de aspecto de Estilos del sitio. Para reducir el tamaño de archivo de imágenes grandes, es mejor recortarlas primero cerca del tamaño deseado manualmente con software de terceros o el editor de imágenes incorporado.

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 imagen, banners, páginas de galería y bloques 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 y PPI

Si te preocupa la resolución de las imágenes, concéntrate en las dimensiones de la imagen y mantén el tamaño de los archivos por debajo de 500 KB, en lugar de concentrarte en los DPI (puntos por pulgada) o PPI (píxeles por pulgada). Los DPI y los PPI afectan la calidad de impresión de la imagen, pero no cómo se ve en la pantalla.

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

Revisa nuestros requisitos de imagen antes de añadir un logotipo. Da formato a la imagen para que sea similar en altura a la forma en que deseas que se muestre. No necesitamos un tamaño específico para tu logotipo, pero es mejor empezar con una imagen más grande. Cuando la imagen es demasiado pequeña para empezar, puede pixelarse al cambiar de tamaño. Puedes cambiar el tamaño después de subir el logotipo.

Si el sitio está en la versión 7.0, la forma en que cambies el tamaño de un logotipo dependerá de la plantilla.

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.

Más ayuda

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: 727 de 1243
Ajustar el formato de las imágenes para exhibirlas en la web