Ajuste de tamaño y ajuste de escala de imágenes en páginas modernas de SharePoint
Applies ToSharePoint en Microsoft 365

Las páginas modernas y los elementos web están diseñados para ser totalmente sensibles entre dispositivos, lo que significa que las imágenes usadas en los elementos web escalarán de forma diferente en función de dónde se muestran, qué diseño se usa y el dispositivo en el que se visualizan. Por ejemplo, las páginas modernas están diseñadas para que tengan un aspecto excelente en dispositivos móviles, y el escalado automático de imágenes ayuda a crear esa atractiva experiencia.

Ejemplos de páginas entre dispositivos

¿Qué tamaños de imagen funcionan mejor?

Debido al diseño de página que responde, no hay un alto o ancho específicos en píxeles que garanticen que una imagen mantenga una forma específica entre dispositivos y diseños. Las imágenes cambian de tamaño y se recortan automáticamente para mostrar el mejor resultado posible en una variedad de dispositivos y diseños. Sin embargo, hay algunas directrices que pueden ayudarle a asegurarse de que las imágenes tengan un aspecto excelente en las páginas.

Encontrar los mejores tamaños de imagen para la página depende de estos factores:

  • Relación de aspecto: la relación entre el alto y el ancho de las imágenes

  • Diseño de columna: el tipo y el número de columnas de la página

  • Diseño del elemento web: el diseño que elija para el elemento web en el que se usa la imagen

Relación de aspecto

Una relación de aspecto es la relación entre el ancho y el alto de las imágenes. Normalmente se expresa como dos números, como 3:2, 4:3 o 16:9. El ancho siempre es el primer número. Por ejemplo, una relación de 16:9 podría ser de 1600 píxeles de ancho por 900 píxeles de alto. O bien, podría ser 1920 x 1080, 1280 x 720, o cualquier otra combinación de ancho o alto que se pueda calcular como 16:9. Puede encontrar calculadoras de relación de aspecto en línea y en algunas herramientas de edición de fotos para ayudarle a determinar las relaciones de aspecto de las imágenes. 

Ejemplos de relaciones de aspecto 16:9 y 4:3.

En la mayoría de los casos, las imágenes de los elementos web modernos funcionan mejor entre diseños y dispositivos cuando tienen una relación de aspecto de 16:9 o 4:3, según el diseño.

Diseños de columna

Una página se puede distribuir con secciones que incluyen diferentes tipos de columna y diseños, como columnas de ancho completo, una columna, dos columnas, tres columnas, una tercera columna izquierda y una tercera tercera columna derecha. Una regla general para las imágenes que se espera que ocupen el ancho de una columna es que sean al menos tan anchas como la columna en la que se colocan. Por ejemplo, una imagen de un elemento web de imagen en una columna debe tener al menos 1204 píxeles de ancho.

A continuación se muestran las instrucciones de ancho para cada uno de los diseños de columna:

Diseño

Ancho en píxeles

Columna de ancho completo

1920

Una columna

1204

Dos columnas

586 por columna

Tres columnas

380 por columna

Una tercera columna izquierda

380 para la columna izquierda; 792 para la columna derecha

Una tercera columna a la derecha

792 para la columna izquierda; 380 para la columna derecha

Debido a la naturaleza responsiva de las páginas, las imágenes en columnas de ancho completo siempre se mostrarán a ancho completo de la pantalla con un alto automático basado en el tamaño de la pantalla.

La altura de las imágenes colocadas dentro de otros diseños de columna dependerá de su relación de aspecto. Estas son las directrices de alto y ancho para las relaciones de aspecto 16:9 y 4:3 (redondeado hacia arriba/hacia abajo hasta el píxel más cercano). Esto es útil para mantener las imágenes en un ancho y un alto adecuados para dispositivos móviles, por ejemplo:

RELACIÓN DE ASPECTO

DISEÑO

16 x 9

Ancho x Alto en píxeles

4 x 3

Ancho x Alto en píxeles

Una columna

1204 x 677

1204 x 903

Dos columnas

586 x 330

586 x 439

Tres columnas

380 x 214

380 x 285

Una tercera columna izquierda

380 x 446 para la columna izquierda; 792 x 446 para la columna derecha

380 x 594 para la columna izquierda; 792 x 594 para la columna derecha

Una tercera columna a la derecha

792 x 446 para la columna izquierda; Columna derecha de 380 x 446

792 x 594 para la columna izquierda; 380 x 594 para la columna derecha

Diseños de elementos web

Los diseños de los elementos web que use también afectarán a la escala de las imágenes. En los ejemplos siguientes se muestran diferentes elementos web y algunas de las opciones y relaciones de aspecto que puede usar.

Elemento web Imagen prominente

Las siguientes relaciones de aspecto para los diseños de mosaicos y capas son las siguientes:

  • Mosaicos: la altura del elemento web se escala para seguir una relación de aspecto de 8:3 e imágenes dentro de la escala del elemento web a una relación de aspecto de 4:3.

  • Capas: una capa individual se escala a una relación de aspecto de 8:3 e imágenes dentro de cada capa se escalan a una relación de aspecto cercana a 16:9.

  • En dispositivos móviles, se usa un diseño de carrusel a las 16:9.

Este es un ejemplo de una imagen que se muestra en los diseños Capas (arriba) y Mosaicos (inferior):

Ejemplo de imágenes de elementos web Imagen prominente en diseños de capas y mosaicos

Elemento web Contenido resaltado

16:9 es la relación de aspecto para los diseños Carrusel, Tira de película y Cuadrícula.

Este es un ejemplo de la relación de aspecto 16:9. La primera imagen muestra el diseño de la tira de imágenes y la segunda muestra el diseño Cuadrícula:

Elemento web Contenido resaltado con el diseño Tira de película.

Diseño cuadrícula de contenido resaltado con fotos expandida mostradas.

Elemento web Imagen

Las imágenes se expandirán hasta el ancho de la sección que contiene el elemento web. 

Este es un ejemplo de una imagen del elemento web Imagen que usa la relación de aspecto 16:9.

Imagen del elemento web Imagen con la relación Carrusel 16:9.

También tiene la opción de cambiar la relación de aspecto o el recorte a mano libre con la herramienta de edición De imagen o usar los controladores de tamaño para hacer la imagen más grande o más pequeña.

Una foto abierta en la herramienta de edición de SharePoint.

Elemento web Galería de imágenes

Las siguientes relaciones de aspecto se pueden usar en diferentes diseños:

  • Los diseños Ladrillo y Carrusel respetan las relaciones de aspecto de todas las imágenes: 16:9, 1:1, 4:3, etc. 

  • El diseño Cuadrícula permite tres relaciones de aspecto: cuadrado 1:1, 16:9 de ancho y estándar 4:3.

La primera imagen muestra el diseño Ladrillo en elelemento web Galería de imágenes (manteniendo las relaciones de aspecto 16:9 y 1:1). La segunda imagen muestra el diseño Cuadrícula (con la relación de aspecto 1:1).

Elemento web Galería de imágenes con la opción de diseño ladrillo.

Elemento web Galería de imágenes con la opción de diseño de cuadrícula.

Elemento web Noticias

Según el diseño, las imágenes del elemento web Noticias pueden ser 4:3, 16:9 o 21:9.

Este es un ejemplo de imágenes en un artículo principal y un diseño de carrusel:

Ejemplos de imágenes de diseños de noticias

Área de título de página

Las imágenes tienen mejor aspecto cuando son horizontales o 16:9 o superiores en relación de aspecto y cuando tienen al menos 1 MB de tamaño. Además, asegúrese de establecer un punto focal para mantener a la vista la parte más importante de la imagen, especialmente cuando la imagen se usa en miniaturas, diseños de noticias y resultados de búsqueda.

Ejemplo (imagen original 16:9) con punto focal establecido en el altavoz:

Ejemplo de una imagen 16:9 en el área de título de página.

Miniatura de página

Las miniaturas de página se muestran en lugares como resultados de búsqueda, resultados de contenido resaltados, publicaciones de noticias y mucho más. De forma predeterminada, la miniatura procede del área de título de página o del elemento web que está en el primer orden de la página (por ejemplo, la parte superior izquierda de un diseño de página). Puede reemplazar el valor predeterminado y cambiar la miniatura de la página. Si lo hace, es mejor usar una imagen con una relación de aspecto de 16:9.

Ejemplo (imagen original 16:9):

Ejemplo de imagen en miniatura de página en elemento web Contenido resaltado

Elemento web Vínculos rápidos

El elemento web Vínculos rápidos tiene seis diseños diferentes. Estas son las relaciones de aspecto preestablecidas:

  • Compacto, lista, mosaicos: 1:1, 4:3

  • Tira de película, cuadrícula, botón: 16:9

La primera imagen muestra el diseño Compactar en elelemento web Vínculos rápidos. La segunda imagen muestra el mismo elemento web Vínculos rápidos con el diseño Tira de imágenes.

Elemento web Vínculos rápidos que muestra imágenes en miniatura de vínculos.

El elemento web Vínculos rápidos que muestra la relación de 16:9 para las imágenes.

Sugerencias: 

Recomendaciones de imagen de encabezado de sitio

Además de las páginas, es posible que desee agregar logotipos personalizados o imágenes en un diseño extendido. Estas son las recomendaciones de tamaño para esos elementos.

Elemento

Descripción

Recomendación

Ancho x Alto en píxeles

Logotipo del sitio

Logotipo más grande que puede ser no cuadrado y transparente según el diseño cargado.

192 x 64 

Formato: PNG, JPEG, SVG (SVG no está permitido en sitios conectados a grupos)

Miniatura del logotipo del sitio

Una miniatura del logotipo cuadrado que se usa si no se carga ningún logotipo del sitio o en lugares en los que se requiere un formato cuadrado.

Este elemento es obligatorio.

64 x 64 

Formato: PNG, JPEG, SVG (SVG no está permitido en sitios conectados a grupos)

Logotipo del sitio de diseño extendido

El diseño de encabezado extendido tiene un ancho de logotipo de sitio extendido.

300 x 64

Formato: JPEG, PNG, SVG

Imagen de fondo Diseño extendido

Una nueva imagen de fondo que se puede usar con el encabezado extendido.

2560 x 164

Formato: JPEG, PNG

¿Necesita más ayuda?

¿Quiere más opciones?

Explore las ventajas de las suscripciones, examine los cursos de aprendizaje, aprenda a proteger su dispositivo y mucho más.

Las comunidades le ayudan a formular y responder preguntas, enviar comentarios y leer a expertos con conocimientos extensos.