30/10/24, 21:07 Ajuste de tamaño y ajuste de escala de imágenes en páginas modernas de SharePoint - Soporte técnico de Microsoft

Microsoft 365
Soporte técnicoOffice Todo Microsoft

Productos
Buscary 
SharePoint / Páginas / Crear y editar / Ajuste de tamaño ajuste de escala de imágenes en páginas modernas de ShareP…
Dispositivos

Ajuste de tamaño y ajuste de escala de

Más

imágenes en páginas modernas de

SharePoint
Applies To

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.

¿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
[Link] 1/10
30/10/24, 21:07 Ajuste de tamaño y ajuste de escala de imágenes en páginas modernas de SharePoint - Soporte técnico de Microsoft

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.

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.

[Link] 2/10
30/10/24, 21:07 Ajuste de tamaño y ajuste de escala de imágenes en páginas modernas de SharePoint - Soporte técnico de Microsoft

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 16 x 9 4x3
ASPECTO
Ancho x Alto en píxeles Ancho x Alto en píxeles
DISEÑO

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 380 x 446 para la columna izquierda; 380 x 594 para la columna izquierda;
izquierda 792 x 446 para la columna derecha 792 x 594 para la columna derecha

Una tercera columna 792 x 446 para la columna izquierda; 792 x 594 para la columna izquierda;
a la derecha Columna derecha de 380 x 446 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 Las siguientes relaciones de aspecto para los diseños de mosaicos y capas son las siguientes:
web
Imagen Mosaicos: la altura del elemento web se escala para seguir una relación de aspecto de 8:3 e imágen
prominente 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 ca
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):

[Link] 3/10
30/10/24, 21:07 Ajuste de tamaño y ajuste de escala de imágenes en páginas modernas de SharePoint - Soporte técnico de Microsoft

Elemento 16:9 es la relación de aspecto para los diseños Carrusel, Tira de película y Cuadrícula.
web
Contenido Este es un ejemplo de la relación de aspecto 16:9. La primera imagen muestra el diseño de la tira de imágen
resaltado la segunda muestra el diseño Cuadrícula:

Elemento Las imágenes se expandirán hasta el ancho de la sección que contiene el elemento web.
web
Este es un ejemplo de una imagen del elemento web Imagen que usa la relación de aspecto 16:9.
Imagen

[Link] 4/10
30/10/24, 21:07 Ajuste de tamaño y ajuste de escala de imágenes en páginas modernas de SharePoint - Soporte técnico de Microsoft

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

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

web
Galería de Los diseños Ladrillo y Carrusel respetan las relaciones de aspecto de todas las imágenes: 16:9, 1:1, 4
imágenes 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 aspe
1:1).

[Link] 5/10
30/10/24, 21:07 Ajuste de tamaño y ajuste de escala de imágenes en páginas modernas de SharePoint - Soporte técnico de Microsoft

Elemento Según el diseño, las imágenes del elemento web Noticias pueden ser 4:3, 16:9 o 21:9.
web
Este es un ejemplo de imágenes en un artículo principal y un diseño de carrusel:
Noticias

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

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

[Link] 6/10
30/10/24, 21:07 Ajuste de tamaño y ajuste de escala de imágenes en páginas modernas de SharePoint - Soporte técnico de Microsoft

Miniatura Las miniaturas de página se muestran en lugares como resultados de búsqueda, resultados de contenido
de página resaltados, publicaciones de noticias y mucho más. De forma predeterminada, la miniatura procede del área
título de página o del elemento web que está en el primer orden de la página (por ejemplo, la parte superio
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):

Elemento El elemento web Vínculos rápidos tiene seis diseños diferentes. Estas son las relaciones de aspecto
web preestablecidas:
Vínculos
rápidos 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.

[Link] 7/10
30/10/24, 21:07 Ajuste de tamaño y ajuste de escala de imágenes en páginas modernas de SharePoint - Soporte técnico de Microsoft

Sugerencias:

Al agregar una imagen al área de título de página o al elemento web Imagen prominente, también es
mejor establecer el punto focal en el área de la imagen que desea mostrar siempre. Para obtener más
información sobre cómo establecer un punto focal para estos dos escenarios, vea Usar el elemento
web Imagen prominente y Crear y usar páginas modernas en un sitio de SharePoint.

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 192 x 64
cuadrado y transparente según el diseño
Formato: PNG, JPEG, SVG (SVG
cargado.
no está permitido en sitios
conectados a grupos)

Miniatura del Una miniatura del logotipo cuadrado que se usa 64 x 64

logotipo del sitio si no se carga ningún logotipo del sitio o en
Formato: PNG, JPEG, SVG (SVG
lugares en los que se requiere un formato
no está permitido en sitios
cuadrado.
conectados a grupos)
Este elemento es obligatorio.

[Link] 8/10
30/10/24, 21:07 Ajuste de tamaño y ajuste de escala de imágenes en páginas modernas de SharePoint - Soporte técnico de Microsoft

Elemento Descripción Recomendación

Ancho x Alto en píxeles

Logotipo del sitio El diseño de encabezado extendido tiene un 300 x 64

de diseño ancho de logotipo de sitio extendido.
Formato: JPEG, PNG, SVG
extendido

Imagen de fondo Una nueva imagen de fondo que se puede usar 2560 x 164
Diseño extendido con el encabezado extendido.
Formato: JPEG, PNG

¿Necesita más ayuda?

¿Cómo podemos ayudarte? 

¿Quiere más opciones?

 Descubrir  Comunidad

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

Ventajas de la Aprendizaje de Seguridad de Microsoft Centro de accesibilidad

suscripción a Microsoft Microsoft 365
365

¿Le ha sido útil esta información? Sí No

Novedades Microsoft Store Educación Empresas Desarrolladores y Compañía

Surface Pro Perfil de la cuenta Microsoft Educación Microsoft Cloud
TI Oportunidades de
Centro para empleo
Surface Laptop Centro de descarga Dispositivos para Seguridad de Microsoft desarrolladores
educación Acerca de Microsoft
Surface Laptop Studio 2 Soporte de Microsoft Azure Documentación

[Link] 9/10
30/10/24, 21:07 Ajuste de tamaño y ajuste de escala de imágenes en páginas modernas de SharePoint - Soporte técnico de Microsoft
Store
Surface Laptop Go 3 Microsoft Teams para Dynamics 365 Microsoft Learn Noticias de la compañía
Educación
Devoluciones
Microsoft Copilot Microsoft 365 Microsoft Tech Privacidad en Microsoft
Microsoft 365 Educación Community
Seguimiento de pedidos
Microsoft 365 Microsoft 365 Copilot Inversores
Office Educación Azure Marketplace
Reciclar
Explora los productos de Microsoft Teams Sostenibilidad
Microsoft Formación y desarrollo AppSource
Garantías comerciales
de educadores Pequeñas empresas
Aplicaciones de Windows Microsoft Power
11 Ofertas para estudiantes Platform
y padres
Visual Studio
Azure para estudiantes

 Español (España, alfabetización internacional) Tus opciones de privacidad Privacidad de la salud del consumidor

Ponte en contacto con Microsoft Privacidad Condiciones de uso Marcas registradas Sobre nuestra publicidad Docs de cumplimiento de la UE
© Microsoft 2024

[Link] 10/10