Squarespace elimina las conjeturas de formatear tus imágenes para mostrarlas en la web. Creamos siete variaciones de cada imagen cargada, para garantizar una visualización perfecta en cualquier tamaño de pantalla.

tenemos algunas recomendaciones sobre cómo formatear tus imágenes antes de subirlas. Para obtener los mejores resultados, siga las sugerencias a continuación.

Consejo: visita nuestra serie de videos All About Images para obtener más consejos y tutoriales paso a paso sobre cómo agregar imágenes en tu sitio.,

Ver vídeo

Antes de empezar

Para encontrar el tamaño y las dimensiones de la imagen original antes de subirlo a su sitio:

• PC – click Derecho sobre el archivo de imagen y seleccione Propiedades.
• Mac-pulse la opción mientras hace clic en el archivo de imagen, a continuación, seleccione Obtener información.

Glosario

He aquí algunos de los términos que verá en esta guía.

• Relación de aspecto-la relación de aspecto de una imagen es su relación anchura / altura expresada como un número, como 3: 4., Mantener una relación de aspecto consistente evita que las imágenes se distorsionen. Por ejemplo, si reduce el ancho de una imagen a la mitad, también debe reducir la altura a la mitad.
• ancho de la imagen: en esta guía, los tamaños de imagen se refieren al número de píxeles a lo largo del ancho y la altura de la imagen. Su imagen puede mostrarse más grande o más pequeña en su sitio, dependiendo del tamaño del contenedor. Para obtener más información, visite redimensionar una imagen.

¿qué sucede después de cargar una imagen?

cuando subes una imagen, Squarespace crea hasta siete versiones de esa imagen, cada una con un ancho diferente., Estos 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 para preservar la relación de aspecto de la imagen. El diseño responsivo incorporado de Squarespace elige el tamaño de imagen apropiado según la pantalla del visitante.

Nota: Las imágenes subidas a través de estilos del sitio, como las imágenes de fondo, siempre se muestran en su ancho de imagen original. Recomendamos cargar estas imágenes con un máximo de 2500 píxeles a lo largo de su borde más largo., Para obtener más consejos, consulte las mejores prácticas de imagen a continuación.

requisitos de imagen

al cargar imágenes en su sitio, siga estas pautas:

tipos de archivo

Guardar imágenes en .jpg, .gif, or .solo en formato png.

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

sugerencia: puede crear enlaces de descarga para archivos no compatibles con la web.

nombre de archivo

solo use letras, números, guiones bajos y guiones bajos en los nombres de archivo., Otros caracteres (como letras acentuadas, signos de interrogación, signos de porcentaje y ampersands) pueden cargarse incorrectamente o causar un comportamiento inesperado en las galerías.

resolución

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

Consejo: para encontrar el MP de una imagen, multiplique las dimensiones y divida por un millón. Por ejemplo, una imagen con dimensiones de 1500px x 1650px es de 2.475 MP.

modo de Color

Guardar imágenes en modo de color RGB. El modo de color CMYK es solo para materiales impresos y no aparecerá correctamente en la mayoría de los navegadores., Si notas variaciones con tus imágenes, revisa tus archivos de imagen para asegurarte de que estén en modo de color RGB.

perfil de Color

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

prácticas recomendadas de imagen

Tamaño del archivo

recomendamos usar archivos de imagen de menos de 500 KB para obtener mejores resultados, aunque el límite para una carga de imagen individual es de 20 MB. Cuando se trata de tamaño de imagen, más grande no siempre es mejor, ya que cargar varias imágenes grandes puede afectar el rendimiento del sitio., Si vas a agregar varias imágenes a una página, ten en cuenta el tamaño general de la página.

ancho de la imagen

Las dimensiones de la imagen original que subes a tu sitio pueden tener un gran impacto en la forma en que se muestra. Recomendamos utilizar 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 cambiar el tamaño de los banners en diferentes dispositivos y anchos de pantalla, visita Diseño adaptable.,
• En la mayoría de los casos, Squarespace reformateará imágenes grandes a un ancho máximo de 2500 píxeles. Sin embargo, las imágenes agregadas a través de los estilos del Sitio (imágenes de fondo e imágenes de banner en todo el sitio) se cargan en sus dimensiones originales. Esto puede causar problemas de carga de la página si la imagen tiene más de 2500 píxeles a lo largo de su borde más largo.

puede utilizar software de terceros para reducir las dimensiones de una imagen. No recomendamos ampliar una imagen más pequeña, ya que esto puede hacer que parezca pixelada. En su lugar, comience con una imagen que tenga al menos 1500 píxeles de ancho., También puede buscar y agregar imágenes de stock de alta calidad directamente desde su sitio.

sugerencia: si estás viendo problemas de carga, como una imagen de fondo que no se carga en el móvil, 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 sus visitantes.

recorte de imagen

los navegadores cargan la imagen completa para las imágenes recortadas por su sitio, como las recortadas con el controlador de recorte o 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 cerca del tamaño deseado manualmente con software de terceros o el Editor de imágenes incorporado.

texto de la imagen

siempre que sea posible, recomendamos agregar texto como una superposición en lugar de incluirlo dentro de la imagen. Esto hace que el texto se pueda buscar y lo mantiene visible si la imagen se recorta en dispositivos más pequeños. Consulte nuestros consejos para agregar texto superpuesto a bloques de imágenes, banners, páginas de Galería y bloques de Galería.

si tu imagen contiene texto, lo mejor es guardarlo como a .archivo png. Texto en a .,el archivo jpg a menudo se vuelve borroso cuando la imagen se comprime. Un .el archivo png normalmente conserva su nitidez, especialmente si la imagen se muestra en su tamaño original.

nombres de imagen

El nombre de una imagen actúa como texto alternativo si no se proporciona ningún otro texto alternativo. También le dice a los motores de búsqueda de qué se trata la imagen, lo que hace que sea más probable que aparezca en las búsquedas de imágenes.

al crear sus imágenes, tenga en cuenta nuestras mejores prácticas de texto alternativo.

sugerencia: para cambiar el nombre del archivo para la mayoría de las imágenes, vuelva a cargar la imagen con el nuevo nombre., En bloques de imagen, puede cambiar el campo Nombre de archivo en la pestaña Contenido.

relación de aspecto

ayuda a asegurarse de que cada imagen que está utilizando tiene la misma relación de aspecto (altura:ancho) antes de cargar, ya que las imágenes generalmente se recortan en función de su ancho y altura. Si todas tus imágenes tienen la misma relación de aspecto, será más fácil anticipar cómo se recortarán. Para obtener más información, visite comprensión de las relaciones de aspecto.

Orientación

Asegúrese de que su imagen está en la posición correcta antes de subirlo., Si la imagen se guarda boca abajo, rote la imagen con el software de edición de imágenes antes de cargarla en su sitio.

si ya ha agregado la imagen a su sitio, puede rotar la imagen utilizando el Editor de imágenes integrado.

DPI y PPI

si le preocupa la resolución de la imagen, concéntrese en las dimensiones de la imagen y mantenga los tamaños de archivo por debajo de 500 KB, en lugar de DPI (puntos por pulgada) o PPI (píxeles por pulgada). DPI y PPI afectan a la calidad de impresión de una imagen, pero no a su visualización web.,

Tamaño de la página

incluso si todas sus fotos tienen menos de 500 KB, si tiene un gran número de imágenes en una página, puede causar problemas como velocidades de carga lentas. Compruebe el contenido de su página para asegurarse de que el tamaño de la página es de 5 MB o menos.

Logos

revise nuestros requisitos de imagen antes de agregar un logotipo. Formatee la imagen para que sea similar en altura a la forma en que desea que se muestre. No requerimos un tamaño específico para su logotipo, pero es mejor comenzar con una imagen más grande. Cuando la imagen es demasiado pequeña para empezar, puede pixelarse al cambiar el tamaño. Puede cambiar el tamaño después de cargar el logotipo.,

si su sitio está en la versión 7.0, la forma de cambiar el tamaño de un logotipo depende de su plantilla.

Favicons

al agregar un favicon a su sitio, asegúrese de que la imagen se guarde como an .ico o a .archivo png.

Las dimensiones de archivo recomendadas para un favicon son 100px × 100px a 300px × 300px. Los Favicons se mostrarán en los navegadores como 16px × 16px.

Nota: Internet Explorer no se puede mostrar .pngs como favicons.

animado .GIF animados

.los GIF son una excepción a nuestra regla de 1500-2500 píxeles, especialmente .gifs en bloques de imagen., 1500 píxeles de ancho .gif probablemente será muy grande, lo que potencialmente podría ralentizar su sitio. Recomendamos formatear animado .gifs en cualquier tamaño que desee que se muestren en su sitio.

más ayuda

• Built-in Image Editor – visita edición de imágenes en tu sitio.
• Imágenes de Stock – antes de agregar una imagen de stock a su sitio, revise nuestras mejores prácticas.
• pantallas de alta densidad y Retina-visita Diseño Responsivo.
• Imágenes de productos-visite los tipos de páginas de la tienda.
• bloques de imagen-visite bloques de imagen.,
• secciones de la galería-visite las secciones de la galería en la versión 7.1.
• bloques de Galería-visite los bloques de Galería.
• páginas de la galería-visite las páginas de la galería.
• metadatos de imagen-visita Importar metadatos de imagen.