When you create a SharePoint news post, the image you upload often appears perfectly on desktop but crops awkwardly on mobile devices. The top or bottom of the image gets cut off, or the subject is pushed out of frame. This happens because SharePoint applies a fixed aspect ratio and center-crop behavior to news post images on small screens. In this article, you will learn why the cropping occurs and how to fix it by preparing your images correctly.
Key Takeaways: Fixing News Post Image Cropping on Mobile
- SharePoint news post image aspect ratio 2.35:1: Always use this ratio to prevent automatic cropping on mobile.
- Center the subject in the image: Keep the focal point within the center 50% of the frame to avoid it being cut off.
- Use the SharePoint Image Editor crop tool: Resize the image to the correct aspect ratio before publishing the news post.
Why SharePoint Crops News Post Images on Mobile
SharePoint news web parts and news posts use a responsive design that adapts to different screen widths. On desktop, the image displays at a wide banner size. On mobile, the same image must fit into a narrower container. Instead of scaling the image proportionally and leaving empty space, SharePoint applies a fixed aspect ratio of 2.35:1 and uses a center-crop technique. This means the image is scaled to fill the container width, and the top and bottom are cut off to maintain the ratio. If your subject is near the top or bottom edge of the image, it will be hidden on mobile.
The cropping behavior is controlled by CSS background-size: cover applied to the image container. This ensures the image fills the space without distortion, but it also means the image is always cropped to fit. SharePoint does not provide a user-facing setting to change this crop behavior. The only reliable fix is to prepare the image so that its subject falls within the center region that survives the crop.
Steps to Prepare Images That Do Not Crop Badly on Mobile
- Open an image editor
Use any image editing tool such as Microsoft Paint, Photoshop, GIMP, or an online editor like Pixlr. You need to crop the image to the 2.35:1 aspect ratio before uploading it to SharePoint. - Set the canvas to 2.35:1 ratio
For example, use 1200 pixels wide by 510 pixels high. This ratio exactly matches what SharePoint uses on mobile. If your original image is larger, scale it down to fit these dimensions while keeping the subject centered. - Center the main subject
Move or crop the image so that the most important element is in the horizontal center and within the middle 50% of the vertical space. Avoid placing text or faces near the top or bottom edge. - Save the image as JPEG or PNG
Use a high-quality setting to avoid compression artifacts. Name the file with a clear label such as news-header-1200×510.jpg. - Upload the image to SharePoint
In the news post editor, click the image placeholder or use the Insert > Image command. Select your prepared file. Do not use the SharePoint Image Editor to crop further unless you check the aspect ratio again. - Preview on mobile
After publishing, open the news post on a mobile device or use your browser’s developer tools to simulate a mobile viewport. Verify that the subject is fully visible and not cropped.
Using the SharePoint Image Editor to Fix an Already Uploaded Image
If you already uploaded an image that looks wrong on mobile, you can use the built-in Image Editor inside the news post web part. Click the image, select Edit, then choose Crop. Set the aspect ratio to 2.35:1. Drag the crop area so that the subject is centered. Apply the changes and republish the post. This method works but may reduce image quality if you crop a very large image down to a small size.
If the News Post Image Still Crops Incorrectly
Image Subject Is Still Cut Off After Cropping to 2.35:1
If the subject remains partially hidden, the problem is likely that the subject is not centered enough. SharePoint always crops from the center outward. Redo the crop with more space above and below the subject. Aim for a composition where the subject occupies the middle 60% of the vertical space.
Image Appears Blurry on Mobile After Cropping
Blurry images occur when the source image is too small. SharePoint scales images up to fill the container width, which causes pixelation. Use a source image that is at least 1200 pixels wide. For retina displays, use 2400 pixels wide at the same aspect ratio.
Image Looks Fine on Desktop but Wrong on Mobile
This is the standard symptom of the center-crop issue. The desktop view shows the full image because the container is wide enough. On mobile, the container is narrow, and the crop becomes aggressive. Always test on mobile after every change. Do not rely on desktop preview alone.
SharePoint Image Editor Does Not Show Aspect Ratio Options
The SharePoint Image Editor in modern news posts offers a Crop tool with a dropdown for aspect ratios. If you do not see the dropdown, your browser may be zoomed in, or the web part may be in a restricted mode. Refresh the page and try again. If the option still does not appear, crop the image in a separate editor and re-upload it.
| Item | Desktop Display | Mobile Display |
|---|---|---|
| Image container width | Full width of the news post area (typically 800px or more) | Full width of the device screen (typically 360px to 414px) |
| Aspect ratio applied | Original image ratio preserved if it fits the container | Forced to 2.35:1 by CSS background-size: cover |
| Crop behavior | No crop if image ratio matches container | Center crop — top and bottom are cut off |
| Best image preparation | Any aspect ratio works as long as the image is wide enough | Must be 2.35:1 with subject centered |
You can now prepare news post images that display correctly on both desktop and mobile. Always crop your image to a 2.35:1 aspect ratio before uploading, and keep the main subject in the center of the frame. For existing posts, use the SharePoint Image Editor Crop tool set to 2.35:1. Test on a real mobile device or browser developer tools to confirm the fix. As an advanced tip, add a subtle background gradient or texture above and below the subject to make any remaining crop look intentional.