Cuando crea una publicación de noticias de SharePoint, la imagen que carga a menudo aparece perfectamente en el escritorio pero se recorta de forma incómoda en dispositivos móviles. La parte superior o inferior de la imagen se corta, o el sujeto queda fuera del encuadre. Esto ocurre porque SharePoint aplica una relación de aspecto fija y un comportamiento de recorte centrado a las imágenes de las publicaciones de noticias en pantallas pequeñas. En este artículo, aprenderá por qué se produce el recorte y cómo solucionarlo preparando sus imágenes correctamente.
Puntos clave: Cómo solucionar el recorte de imágenes de publicaciones de noticias en móvil
- Relación de aspecto de imagen de publicación de noticias de SharePoint 2.35:1: Utilice siempre esta relación para evitar el recorte automático en móvil.
- Centre el sujeto en la imagen: Mantenga el punto focal dentro del 50% central del encuadre para evitar que se corte.
- Utilice la herramienta de recorte del Editor de imágenes de SharePoint: Cambie el tamaño de la imagen a la relación de aspecto correcta antes de publicar la publicación de noticias.
Por qué SharePoint recorta las imágenes de las publicaciones de noticias en móvil
Los elementos web de noticias y las publicaciones de noticias de SharePoint utilizan un diseño adaptable que se ajusta a diferentes anchos de pantalla. En el escritorio, la imagen se muestra en un tamaño de banner ancho. En móvil, la misma imagen debe caber en un contenedor más estrecho. En lugar de escalar la imagen proporcionalmente y dejar espacio vacío, SharePoint aplica una relación de aspecto fija de 2.35:1 y utiliza una técnica de recorte centrado. Esto significa que la imagen se escala para llenar el ancho del contenedor, y las partes superior e inferior se cortan para mantener la relación. Si su sujeto está cerca del borde superior o inferior de la imagen, quedará oculto en móvil.
El comportamiento de recorte está controlado por CSS background-size: cover aplicado al contenedor de la imagen. Esto asegura que la imagen llene el espacio sin distorsión, pero también significa que la imagen siempre se recorta para ajustarse. SharePoint no proporciona una configuración visible para el usuario para cambiar este comportamiento de recorte. La única solución fiable es preparar la imagen de modo que su sujeto quede dentro de la región central que sobrevive al recorte.
Pasos para preparar imágenes que no se recorten mal en móvil
- Abra un editor de imágenes
Utilice cualquier herramienta de edición de imágenes como Microsoft Paint, Photoshop, GIMP o un editor en línea como Pixlr. Debe recortar la imagen a la relación de aspecto 2.35:1 antes de cargarla en SharePoint. - Establezca el lienzo en relación 2.35:1
Por ejemplo, use 1200 píxeles de ancho por 510 píxeles de alto. Esta relación coincide exactamente con la que utiliza SharePoint en móvil. Si su imagen original es más grande, redúzcala para ajustarla a estas dimensiones manteniendo el sujeto centrado. - Centre el sujeto principal
Mueva o recorte la imagen para que el elemento más importante esté en el centro horizontal y dentro del 50% central del espacio vertical. Evite colocar texto o rostros cerca del borde superior o inferior. - Guarde la imagen como JPEG o PNG
Utilice una configuración de alta calidad para evitar artefactos de compresión. Nombre el archivo con una etiqueta clara como news-header-1200×510.jpg. - Cargue la imagen en SharePoint
En el editor de publicaciones de noticias, haga clic en el marcador de posición de la imagen o use el comando Insertar > Imagen. Seleccione su archivo preparado. No utilice el Editor de imágenes de SharePoint para recortar más a menos que verifique nuevamente la relación de aspecto. - Obtenga una vista previa en móvil
Después de publicar, abra la publicación de noticias en un dispositivo móvil o use las herramientas de desarrollador de su navegador para simular una ventana gráfica móvil. Verifique que el sujeto sea completamente visible y no esté recortado.
Uso del Editor de imágenes de SharePoint para corregir una imagen ya cargada
Si ya cargó una imagen que se ve mal en móvil, puede usar el Editor de imágenes integrado dentro del elemento web de la publicación de noticias. Haga clic en la imagen, seleccione Editar y luego elija Recortar. Establezca la relación de aspecto en 2.35:1. Arrastre el área de recorte para que el sujeto quede centrado. Aplique los cambios y vuelva a publicar la publicación. Este método funciona pero puede reducir la calidad de la imagen si recorta una imagen muy grande a un tamaño pequeño.
Si la imagen de la publicación de noticias aún se recorta incorrectamente
El sujeto de la imagen aún se corta después de recortar a 2.35:1
Si el sujeto permanece parcialmente oculto, el problema probablemente sea que el sujeto no está lo suficientemente centrado. SharePoint siempre recorta desde el centro hacia afuera. Vuelva a realizar el recorte con más espacio arriba y abajo del sujeto. Procure una composición en la que el sujeto ocupe el 60% central del espacio vertical.
La imagen aparece borrosa en móvil después del recorte
Las imágenes borrosas ocurren cuando la imagen de origen es demasiado pequeña. SharePoint escala las imágenes hacia arriba para llenar el ancho del contenedor, lo que causa pixelación. Use una imagen de origen que tenga al menos 1200 píxeles de ancho. Para pantallas retina, use 2400 píxeles de ancho con la misma relación de aspecto.
La imagen se ve bien en el escritorio pero mal en móvil
Este es el síntoma estándar del problema de recorte centrado. La vista de escritorio muestra la imagen completa porque el contenedor es lo suficientemente ancho. En móvil, el contenedor es estrecho y el recorte se vuelve agresivo. Pruebe siempre en móvil después de cada cambio. No confíe solo en la vista previa de escritorio.
El Editor de imágenes de SharePoint no muestra opciones de relación de aspecto
El Editor de imágenes de SharePoint en las publicaciones de noticias modernas ofrece una herramienta de Recorte con un menú desplegable para relaciones de aspecto. Si no ve el menú desplegable, es posible que su navegador esté ampliado o que el elemento web esté en un modo restringido. Actualice la página e inténtelo de nuevo. Si la opción aún no aparece, recorte la imagen en un editor separado y vuelva a cargarla.
| Elemento | Visualización en escritorio | Visualización en móvil |
|---|---|---|
| Ancho del contenedor de imagen | Ancho completo del área de publicación de noticias (normalmente 800px o más) | Ancho completo de la pantalla del dispositivo (normalmente de 360px a 414px) |
| Relación de aspecto aplicada | Relación de imagen original preservada si cabe en el contenedor | Forzada a 2.35:1 por CSS background-size: cover |
| Comportamiento de recorte | Sin recorte si la relación de la imagen coincide con el contenedor | Recorte centrado: se cortan las partes superior e inferior |
| Mejor preparación de imagen | Cualquier relación de aspecto funciona siempre que la imagen sea lo suficientemente ancha | Debe ser 2.35:1 con el sujeto centrado |
Ahora puede preparar imágenes de publicaciones de noticias que se muestren correctamente tanto en escritorio como en móvil. Recorte siempre su imagen a una relación de aspecto 2.35:1 antes de cargarla y mantenga el sujeto principal en el centro del encuadre. Para publicaciones existentes, use la herramienta Recortar del Editor de imágenes de SharePoint configurada en 2.35:1. Pruebe en un dispositivo móvil real o en las herramientas de desarrollador del navegador para confirmar la solución. Como consejo avanzado, agregue un degradado o textura de fondo sutil arriba y abajo del sujeto para que cualquier recorte restante parezca intencional.