Cuando publica una noticia en un sitio de comunicación de SharePoint, la imagen destacada a menudo se ve distorsionada o recortada incorrectamente en dispositivos móviles. Esto sucede porque SharePoint aplica una relación de aspecto fija a la miniatura de la imagen, y la imagen que seleccionó no coincide con esa relación. En este artículo, aprenderá por qué ocurre el recorte y cómo preparar sus imágenes para que se muestren correctamente en pantallas móviles.
Puntos clave: Cómo corregir el recorte de imágenes en publicaciones de noticias en dispositivos móviles
- Imagen destacada de la publicación de noticias de SharePoint: Utiliza una relación de aspecto 16:9 para las miniaturas. Cargar una imagen con una relación diferente provoca recortes.
- Preparación de la imagen antes de cargarla: Recorte su imagen a 1200 x 675 píxeles (16:9) con cualquier editor de fotos para garantizar una visualización correcta.
- Configuración de imagen del elemento web de noticias de SharePoint: Puede ajustar el punto focal y elegir entre los modos de imagen de fondo o en línea para controlar el comportamiento del recorte.
Por qué SharePoint recorta las imágenes de las publicaciones de noticias en dispositivos móviles
SharePoint utiliza una relación de aspecto fija de 16:9 para la imagen destacada en las publicaciones de noticias. Cuando carga una imagen que tiene una relación diferente, SharePoint recorta automáticamente la imagen para ajustarla al marco de 16:9. El recorte no es aleatorio: SharePoint intenta mantener visible el centro de la imagen. En dispositivos móviles, el área de la miniatura es más estrecha, lo que puede hacer que el recorte parezca más agresivo o que corte partes importantes de la imagen.
El recorte ocurre en dos niveles. Primero, cuando establece la imagen destacada en el editor de publicaciones de noticias, SharePoint genera una miniatura en 16:9. Segundo, cuando el elemento web de noticias se representa en una pantalla móvil, el navegador escala aún más la imagen para ajustarla al ancho del dispositivo. Si la imagen original tenía una orientación vertical alta, se recortan la parte superior e inferior. Si la imagen era muy ancha, se recortan los bordes izquierdo y derecho.
La característica responsable de esto es el Elemento web de noticias en la página principal de SharePoint o en una página del sitio. Utiliza un estilo de imagen de fondo que llena el contenedor. No hay ninguna configuración en el elemento web de noticias para cambiar la relación de aspecto. El único control que tiene es la imagen que carga y el punto focal que establece en el editor de publicaciones de noticias.
Pasos para preparar imágenes para una visualización móvil correcta
- Abra su imagen en un editor de fotos
Utilice cualquier herramienta que pueda recortar imágenes: Microsoft Photos, Paint, Adobe Photoshop o un editor en línea gratuito como Pixlr o Canva. Debe establecer la relación de aspecto en 16:9 y la resolución en al menos 1200 píxeles de ancho. - Recorte la imagen a 1200 x 675 píxeles
Establezca la herramienta de recorte en una relación de aspecto fija de 16:9. Luego, cambie el tamaño de la imagen para que el ancho sea exactamente 1200 píxeles y la altura sea 675 píxeles. Esto garantiza que SharePoint no necesite recortar nada: la imagen ya coincide con el marco de la miniatura. - Guarde la imagen con un nombre de archivo descriptivo
Use un nombre como “news-header-innovation.jpg” o “event-announcement-16×9.png”. Evite espacios y caracteres especiales. Guarde el archivo en una carpeta de su computadora o directamente en la biblioteca de recursos del sitio de SharePoint. - Cargue la imagen en la biblioteca de recursos del sitio de SharePoint
Vaya a su sitio de comunicación. Seleccione Contenido del sitio > Recursos del sitio. Elija Cargar y seleccione su imagen recortada. Alternativamente, puede cargarla directamente en el editor de publicaciones de noticias. - Cree una nueva publicación de noticias o edite una existente
En la página principal del sitio, seleccione + Nuevo > Publicación de noticias. O abra una publicación existente y seleccione Editar. - Establezca la imagen destacada
En el editor de publicaciones de noticias, seleccione el marcador de posición de la imagen en la parte superior. Elija Cambiar imagen. Navegue hasta la carpeta Recursos del sitio y seleccione su imagen de 1200 x 675. Seleccione Abrir y luego Insertar. - Establezca el punto focal
Después de insertar la imagen, pase el cursor sobre ella y seleccione el icono Establecer punto focal (un símbolo de mira). Haga clic en la parte más importante de la imagen, por ejemplo, el rostro de una persona o un producto. Esto le indica a SharePoint qué área mantener visible si aún se produce recorte en pantallas muy pequeñas. - Publique la publicación de noticias
Seleccione Publicar noticia o Volver a publicar. Abra el sitio en un dispositivo móvil o use las herramientas de desarrollo del navegador para probar la visualización.
Método alternativo: usar el elemento web de imagen en su lugar
- Edite la página del sitio
Abra la página donde se encuentra el elemento web de noticias. Seleccione Editar en la esquina superior derecha. - Elimine el elemento web de noticias
Seleccione el elemento web de noticias y elija Eliminar en la barra de herramientas. - Agregue un elemento web de imagen
Seleccione el icono + en la página. Elija Imagen en la galería de elementos web. - Configure el elemento web de imagen
Seleccione Cambiar imagen y cargue su imagen 16:9. En las propiedades del elemento web de imagen, establezca el Tamaño de imagen en Ajustar o Rellenar. Ajustar conserva toda la imagen sin recortarla. Rellenar recorta para llenar el contenedor pero respeta el punto focal. - Agregue un hipervínculo a la publicación de noticias
En las propiedades del elemento web de imagen, expanda Vínculo. Pegue la URL de la publicación de noticias completa. Seleccione Aplicar y luego Publicar.
Problemas comunes con el recorte de imágenes en publicaciones de noticias
La imagen sigue recortada después de cargar una imagen 16:9
Si cargó una imagen 16:9 pero la miniatura aún parece recortada, verifique las dimensiones de la imagen. Algunas imágenes tienen una relación 16:9 pero son más pequeñas de 1200 píxeles de ancho. SharePoint puede escalarlas y luego recortarlas de nuevo. Use una imagen que tenga al menos 1200 píxeles de ancho. También verifique que haya establecido el punto focal; sin él, SharePoint usa de forma predeterminada el centro de la imagen, lo que puede cortar los bordes.
La miniatura de la publicación de noticias se ve bien en el escritorio pero no en el móvil
Este es un comportamiento normal. Las pantallas de escritorio tienen un diseño más ancho, por lo que la miniatura 16:9 cabe sin recortes visibles. Las pantallas móviles son más estrechas y altas, por lo que la misma miniatura aparece más pequeña y el recorte se nota más. La solución es usar una imagen donde el sujeto principal esté centrado y ocupe al menos el 60 % central del marco. Evite colocar texto o rostros importantes en los bordes de la imagen.
La calidad de la imagen se ve borrosa en el móvil
SharePoint comprime las imágenes para reducir el tiempo de carga de la página. Si la imagen original tiene baja resolución, la compresión la hace ver borrosa. Cargue imágenes con un ancho mínimo de 1200 píxeles y un tamaño de archivo inferior a 2 MB. Use el formato JPEG para fotografías y PNG para gráficos con texto. No use archivos BMP o TIFF: son demasiado grandes y SharePoint los comprimirá agresivamente.
Métodos de visualización de imágenes en publicaciones de noticias: fondo vs. en línea
| Elemento | Imagen de fondo (elemento web de noticias) | Imagen en línea (elemento web de imagen) |
|---|---|---|
| Comportamiento de recorte | Siempre recorta a 16:9, sin opción de cambio de tamaño | El modo Ajustar muestra la imagen completa, el modo Rellenar recorta al contenedor |
| Adaptabilidad móvil | Se escala con el contenedor, puede recortar los bordes | El modo Ajustar conserva la relación de aspecto, el modo Rellenar recorta |
| Compatibilidad con punto focal | Sí, se establece en el editor de publicaciones de noticias | Sí, se establece en las propiedades del elemento web de imagen |
| Hipervínculo a la publicación completa | Automático, haga clic en el título o en la imagen | Debe agregarse manualmente en las propiedades del elemento web |
Ahora puede preparar las imágenes de sus publicaciones de noticias para que se muestren correctamente en cualquier dispositivo móvil. Comience recortando cada imagen destacada a 1200 x 675 píxeles con un editor de fotos. Establezca el punto focal en el área más importante de la imagen. Si el elemento web de noticias aún recorta de forma demasiado agresiva, reemplácelo por un elemento web de imagen que use el modo Ajustar y vincúlelo a la publicación de noticias completa. Para un control avanzado, use el módulo SharePoint PnP PowerShell para actualizar por lotes las imágenes de las publicaciones de noticias con las dimensiones correctas.