Collab365

SharePoint online full-width header banner image size/scale

Q: What is the optimal size for SharePoint extended header banners?

3840 × 900 pixels at 72 DPI in PNG format for 4K crispness and responsive mobile scaling.

Q: Why do SharePoint header images get blurry or cropped?

Due to aggressive auto-compression of large files, wrong aspect ratios, high DPI, and unset focal points; resize to web specs and set focal point on key elements.

Q: What file format is best for SharePoint banners?

PNG at 72 DPI under 2MB; superior to JPEG as it avoids compounding lossy compression artifacts on edges and text.

C

Collab365 TeamAuthorPublished Apr 23, 2026

5

At a Glance

Target Audience: SharePoint site owners, communications managers, page editors, IT pros
Problem Solved: Blurry, pixelated, or cropped header banner images in SharePoint modern pages due to wrong sizes, DPI, formats & responsive scaling.
Use Case: Designing extended header layouts for professional communication sites & intranets.

The optimal starting size for SharePoint Online full-width header banners in 2026 is 3840×900 pixels at 72 DPI for desktop crispness, scaling responsively to mobile. If you have spent hours uploading client images only to watch them instantly blur, compress into a pixelated mess, or randomly chop off the most important part of the graphic on a smartphone, you are not alone. Microsoft’s dynamic scaling engine does its best to make modern pages responsive, but without the right starting dimensions and aspect ratio, it will aggressively compress your files.1 In this post, we will walk you through the exact sizes you need, the best tools to create them, and the hidden CSS tricks to force SharePoint to display your headers perfectly across every device configuration.

TL;DR / Quick Answer

Optimal Desktop Starting Size: 3840 × 900 pixels (for extended full-width headers) to combat 4K monitor blurriness.
Aspect Ratio: 16:9 is the Microsoft standard, but a wider ratio (closer to 4.27:1) works best for extended background banners.
File Format: Always use PNG at 72 DPI. JPEGs are more susceptible to SharePoint's aggressive auto-compression.
Focal Point Tool: Crucial for mobile scaling. Always set the focal point on the most vital part of your image immediately after uploading.
The Blurry Fix: Stop uploading massive 15MB print files. Resize to exact web dimensions before uploading, and if needed, use a Modern Script Editor web part to inject CSS that overrides default height constraints.
2026 AI Generation: Microsoft Copilot Designer is now integrated directly into SharePoint, allowing you to generate banner images using corporate brand kits.

Who Needs Perfect Full-Width Header Banners and Why?

SharePoint Online has evolved significantly since its inception, and the March 2026 "Agentic Building" updates and visual refreshes have pushed the platform further into the realm of beautiful, dynamic intranets.3 However, the core requirement for a visually striking communication site remains exactly the same as it was years ago. Collab365 have created this guide specifically for an audience including SharePoint site owners, internal communications managers, page editors, and IT professionals with one to three years of modern SharePoint experience.

Key Takeaway: Modern SharePoint sites are judged within milliseconds of a page load. A blurry header immediately signals to the user that the content below might be equally poorly maintained.

You likely have access to modern communication sites and are tasked with making them look like a polished, corporate web page rather than a generic file repository. Your pain points are incredibly specific, yet universally frustrating across the entire community. You receive a beautifully designed, high-resolution banner from your marketing team or a client. It looks pristine on your local machine. You upload it to the SharePoint extended header, hit publish, and suddenly the text is illegible, the logo is cut in half on mobile screens, and the entire image looks like it was saved on a floppy disk.2

We recently saw a user on the Collab365 forums named Beth Beck experiencing exactly this. She asked for guidance on image sizes for full-width headers in SPO modern pages, noting that client images were getting blurry or cut off, especially regarding the height. Comments suggested 3300×232 pixels, but she reported it was still blurry. This is a common trap, and it happens because SharePoint modern pages are built to be fiercely responsive, but they do not communicate their internal cropping rules to the user.1

Key Takeaway: The frustration with blurry banners stems from SharePoint's automatic image rendition engine, which creates multiple compressed versions of your file for different screen sizes. Controlling the starting file size is your only defence.

To save bandwidth and improve page load times across global networks, the system automatically auto-crops and compresses header images. It creates a series of hidden "renditions" of your image behind the scenes. If your starting aspect ratio is completely wrong, or if your file size is too large (causing the compression algorithm to panic and crush the quality), the result is a blurry, poorly cropped header.1 The algorithm is designed to prioritise page speed over image fidelity if it detects a massive file that might hinder performance.

Perfect full-width banners matter because the header is the very first thing an employee sees. It establishes trust, communicates the site's purpose, and sets the professional tone of the platform. A blurry header immediately degrades the perceived quality of the information below it. To fix this, you need access to a modern SharePoint site with edit permissions, a basic image editing tool (like Canva or Photoshop), and an understanding of exactly how Microsoft translates pixels into responsive web elements.

Key Takeaway: You cannot rely on Microsoft's backend to magically fix a poorly proportioned image. You must take control of the file dimensions before it ever touches the SharePoint server.

What Are the Exact Recommended Image Sizes for 2026?

When dealing with SharePoint image sizes, you must distinguish between the physical pixel dimensions of the image you upload and the CSS boundaries of the container displaying it on the page. Microsoft's official documentation suggests a background image size of 2560 × 164 pixels for the extended header layout.1 However, Collab365 research shows that relying on 2560 pixels often leads to blurriness on modern 4K desktop monitors.

To future-proof your pages for 2026, we recommend starting much larger. The technology landscape has shifted, and ultra-high-definition displays are now the norm in corporate environments. If you provide SharePoint with only 2560 pixels of horizontal data, it will be forced to stretch that image to fill a 3840-pixel-wide 4K screen, resulting in immediate interpolation and blurriness.

Key Takeaway: Always design for the largest possible screen in your organisation, then use the focal point tool to ensure it degrades gracefully to the smallest smartphone screen.

Here is a comprehensive breakdown of the exact sizes you need for various header elements in 2026:

Header Element / Layout Type	Microsoft Official Spec	Collab365 2026 Recommendation	Aspect Ratio	Primary Use Case
Extended Header Background	2560 × 164 px	3840 × 900 px	~4.27:1	Best for 4K desktop crispness; auto-crops gracefully.
Standard Page Banner (Title)	1920 × 1080 px	1920 × 1080 px	16:9	Default article header; auto-crops to ~300px height.
Compact Header Background	Not officially specified	1920 × 400 px	4.8:1	Slimmer profile for team sites needing screen real estate.
Site Logo	64 × 64 px	192 × 64 px	3:1	Clean, wide logo placement within the navigation bar.
Extended Layout Site Logo	300 × 64 px	300 × 64 px	~4.6:1	Maximum size for showcase corporate sites.

Ignore the instinct to upload print-quality 300 DPI images. SharePoint only requires 72 DPI for web display. Anything higher wastes file size and triggers aggressive, quality-destroying compression.2 We have seen countless marketing departments hand over 20MB TIFF files to site owners, assuming higher quality is always better. In the context of a web application, excessive file size is a liability, not an asset.

Key Takeaway: Dots Per Inch (DPI) is a print metric. For web applications like SharePoint, total pixel dimensions and file compression are the only metrics that dictate image sharpness.

Microsoft scaling relies heavily on the focal point. Because of the responsive page design, there is no single height or width in pixels that will guarantee an image maintains a specific shape across all devices.1 When a user views your site on a desktop, they see a wide, panoramic slice of your 3840 × 900 image. When they view it on the SharePoint mobile app, the sides are cropped away, and they see a narrow, vertical slice of the centre.

This is exactly why pre-cropping your images into extremely thin strips (like the officially recommended 2560 × 164 pixels) often fails in practical application. If you upload an image that is only 164 pixels high, the mobile view will try to zoom into a tiny fraction of those pixels to fill a vertical smartphone screen. The result is severe pixelation. A taller starting image (like our recommended 900px height) gives the mobile view enough vertical pixels to crop into without losing resolution.

Key Takeaway: Think of aspect ratios like physical photo frames. You cannot shove a square photograph into a long, rectangular panoramic frame without taking scissors to the top and bottom of the photo. Feed SharePoint the shape it expects.

The Collab365 team found that the process of preparing and uploading the file is just as important as the file dimensions themselves. If you simply drag and drop a raw photo from a smartphone, you are leaving the scaling up to chance, and chance rarely favours the site owner.

Here is our tested, step-by-step framework for uploading and scaling without losing crispness. You must follow these steps precisely to bypass the automatic degradation that plagues so many modern pages.

Step 1: Prepare the Image File Perfectly

Never upload an unedited raw image. Open your chosen image editing tool (we will cover Canva and Photoshop in detail later in this post) and create a brand new canvas exactly 3840 pixels wide by 900 pixels high. Place your image onto this canvas.

Key Takeaway: When placing your image on the 3840x900 canvas, ensure no critical text, faces, or logos are positioned near the far left or right edges, as these will be the first casualties of responsive cropping.

Export the file as a PNG. While SharePoint technically accepts JPEGs, our extensive testing shows that its internal compression treats PNG files much more gently, preserving sharp edges on logos and text.1 JPEGs use a "lossy" compression method, meaning data is discarded to save space. When SharePoint compresses a JPEG further, you get a compounding degradation effect. Ensure the final PNG file size is under 2MB.

Step 2: Navigate to the Extended Header Settings

To apply a full-width background, you need to use the Extended Layout. This layout is specifically designed to accommodate large, high-impact branding graphics.

Navigate to your modern SharePoint site homepage. Ensure you have Edit permissions.
Click the Settings gear icon in the top right corner of the suite bar.
Select Change the look, then click Header.6
Under the "Layout" options, choose Extended. (Note: If you are using a Hub site designated as Home, the site navigation behaves differently here, moving to the bottom of the background image instead of sitting above it).7

Key Takeaway: The Minimal and Compact header layouts do not support the massive background images we are discussing here. You must be in the Extended or Standard layout to utilise full-width banners effectively.

Step 3: Upload and Configure the Background

Still within the Header settings pane, you will now apply the image you prepared.

Scroll down to the Header background section within the panel.
Click Upload and select your perfectly sized 3840×900 PNG file. Wait for it to render on the page.
Immediately below the upload area, you must adjust the Focal Point. This is the single most critical step for mobile scaling. Click and drag the crosshairs to the most important part of the image (usually the centre, a specific product, or a person's face). This action tells SharePoint, "No matter how much you crop this image for smaller screens, never let this specific spot leave the frame".8
Finally, adjust the Image Overlay opacity. If your image is too bright or busy, it will make the site title and navigation links impossible to read. Add a slight dark or brand-coloured overlay to ensure accessibility compliance and visual contrast.9

By forcing SharePoint to handle a pre-optimised PNG at a massive resolution, the auto-generated renditions it creates for standard desktop screens will look incredibly sharp, entirely bypassing the blurry fate of lower-resolution uploads.

Key Takeaway: The image overlay tool is not just for aesthetics; it is a vital accessibility feature. White text on a bright, busy photograph will fail contrast checks and frustrate your users.

Why Do Images Get Blurry or Cropped — And How to Fix It?

Understanding the technical mechanics of why an image degrades is the fastest way to troubleshoot when things go wrong. SharePoint does not simply display the exact file you upload; it processes it through a sophisticated, albeit sometimes aggressive, backend engine.

The DPI and Compression Trap

When an image suddenly becomes heavily compressed and pixelated after a few seconds on a published page 2, it is usually due to a mismatch between the image's physical size (megabytes) and its resolution (DPI). Print designers often supply images at 300 DPI, resulting in files upwards of 10MB or more.

Key Takeaway: If you upload a massive file, SharePoint's performance safeguards will trigger immediately, violently compressing the file to ensure the page loads quickly on mobile connections.

We have seen cases where an image looks perfect upon immediate upload, but a few seconds after the page is published, the images pixelate.5 This is the backend rendition engine kicking in.

The Fix: You must use an image editor to "Save for Web." Force the resolution down to 72 DPI and use a compression tool (like TinyPNG or Adobe's export settings) to bring the file size under 2MB before uploading. By feeding SharePoint an already-optimised file, you bypass its need to run aggressive compression routines.

Aspect Ratio Mismatches

If your image looks fine on a desktop but is disastrously cropped on a mobile phone, your aspect ratio is fighting the layout. An aspect ratio is the proportional relationship between the width and height of an image.1 A standard page banner is usually auto-cropped to around 300 pixels in height for an Image+Title layout.10

If you upload a perfect square (a 1:1 ratio), SharePoint is forced to chop off the top and bottom 70% of your image to make it fit the wide, letterbox banner slot. This often results in heads being cut off in photographs or logos being sliced in half.

The Fix: Always use a 16:9 ratio (1920×1080) for standard individual page banners, and a much wider ratio (like our recommended 3840×900, which is roughly 4.27:1) for the extended site homepage headers.1

Key Takeaway: Aspect ratios govern how responsive design behaves. If you provide a shape that is wildly different from the container it sits in, the browser has no choice but to crop aggressively to fill the space.

Responsive CSS Tweaks (The Developer Route)

Sometimes, the out-of-the-box settings are not enough, especially if your corporate branding guidelines dictate very specific header heights or behaviours. Microsoft has locked down modern SharePoint sites significantly compared to the classic era. Traditional Script Editor web parts that allowed you to drop raw HTML and CSS onto a page no longer work natively.11

However, you can still inject CSS using the SharePoint Framework (SPFx) or by installing an open-source community Modern Script Editor web part (like the popular one maintained by the Microsoft 365 Patterns and Practices (PnP) team on GitHub).11

Key Takeaway: Injecting custom CSS into modern SharePoint is a powerful tool, but it requires tenant administrator approval to deploy SPFx packages to the App Catalog.

If you need to force the header height or adjust the image fitting, you can target the modern CSS classes. Note: Microsoft updates class names dynamically, so you must target stable wrapper classes or use SPFx Application Customisers to inject your styles securely.13

Here is an example of what CSS injection looks like to force a specific banner behaviour, targeting the main header class:

CSS

/* Example CSS to adjust modern header image fitting */
.o365cs-nav-header16 {
background-size: cover!important;
background-position: center center!important;
min-height: 250px!important;
}

Warning: Injecting CSS should be a last resort. Microsoft ships new SharePoint features continuously. Page structures can change, and your customisations may break without warning. In some cases, new features might not display or work as expected if your overrides conflict with them.15

Comparison: Wrong Size vs Right Size Outcomes

To illustrate exactly why these dimensions matter, let us look at how different uploaded files behave across the SharePoint ecosystem.

Uploaded File	Desktop View Result	Mobile View Result	Bandwidth / Load Time
800×200 px JPEG (300KB)	Very blurry; stretched beyond physical limits to fit standard monitors.	Passable, but edges are cropped.	Fast load time.
5000×3000 px 300 DPI TIFF (12MB)	Blurry/Artifacts; SharePoint aggressively compresses the massive file.	Cropped terribly; focal point often defaults to top-left.	Very slow load time.
3840×900 px 72 DPI PNG (1.5MB)	Crisp and sharp; plenty of pixels for 4K displays.	Excellent; enough vertical height to crop into a portrait view safely.	Optimised for web.

Key Takeaway: The 3840x900 PNG is the Goldilocks file format. It is large enough to remain crisp on massive monitors, yet small enough in file size to bypass aggressive backend compression.

Best Tools for Creating 2026-Ready Banners

You do not need to be a professional graphic designer to create stunning, responsive headers. The tools available in 2026 have democratised design, making it easier than ever for SharePoint site owners to hit exact specifications without relying on external agencies.

Canva (The Best All-Rounder)

Canva remains the easiest and most accessible tool for SharePoint site owners. It is entirely cloud-based, meaning there is no heavy software to install, and it handles resizing exceptionally well.

Step-by-Step Canva Resize Guide:

Log into Canva and click the purple Create a design button in the top right corner.
Select Custom size at the very bottom of the dropdown menu.
Enter 3840 for width and 900 for height, ensure the measurement unit is set to px (pixels), and click Create new design.
Upload your raw image into the Canva library and drag it onto the blank canvas. Expand it to fill the space.
If you already have a design in Canva that is the wrong size, click Resize & Magic Switch on the upper left side of the editor (this requires a Pro account), choose Resize, input the custom dimensions, and let Canva auto-adjust the elements.16
Click Share, then Download. Select PNG as the file type to ensure maximum crispness for text and logos, and download the file.

Key Takeaway: Canva's custom dimension tool is the fastest way to force an awkwardly shaped photograph into the precise 4.27:1 ratio required for a crisp SharePoint extended header.

Microsoft Copilot Designer (The 2026 Innovator)

With the retirement of the older Designer bot in Teams and the older channel banner UI early in 2026, Microsoft shifted all its creative generative features under the Copilot umbrella.18 Now, you can use the Microsoft 365 Copilot app to generate banners completely from scratch using artificial intelligence.19

Copilot is incredibly powerful for corporate environments because it integrates directly with your organisation's official Brand Kits. This means your AI-generated images will not look like generic clip art. You can prompt Copilot: "Generate a modern, abstract geometric background image for our IT Department SharePoint header. Make it 3840x900 pixels." Copilot will automatically apply your corporate colours, approved fonts, and visual style to the generated banner.20

This ensures that even if you lack an eye for design, your banner remains perfectly on-brand and visually cohesive with the rest of your tenant.

Adobe Photoshop (For the Pixel Perfectionists)

If you have access to the Adobe Creative Cloud suite, Photoshop gives you absolute, granular control over every aspect of the image file. You can use the "Export As" function to finely tune the PNG quality, explicitly set the canvas to 3840×900, and use advanced tools like Generative Fill to extend backgrounds if your original source photograph is too narrow to fit the wide aspect ratio.

Key Takeaway: While Photoshop is the industry standard, its steep learning curve makes it overkill for most SharePoint site owners. Canva or Copilot Designer will suffice for 99% of daily intranet tasks.

Responsive Banners Across Devices: Mobile, Tablet, Desktop?

To truly master SharePoint modern experiences, you must understand how the platform translates your banner across different devices. The web is not static, and neither are your intranet pages. When designing your 3840×900 pixel image, you are essentially designing for three different screens simultaneously. You must understand the CSS breakpoints that Microsoft uses to reflow content.21

Breakpoints are specific screen widths where the layout of the page fundamentally changes. Microsoft generally defines these responsive thresholds as Small (Mobile), Medium (Tablet), and Large (Desktop).23

The Desktop Experience (1025px – 1920px+)

On a large monitor or 4K display, SharePoint will attempt to display almost the entire physical width of your image. This is where the 3840px width saves you. If you had uploaded an image only 1024px wide, a large desktop monitor would physically stretch those pixels across its massive screen, resulting in immediate blurriness. In desktop view, the height remains relatively constrained, creating a panoramic, cinematic letterbox effect. The focal point is less critical here, as most of the image is visible.

Key Takeaway: Desktop views are forgiving on cropping but brutal on resolution. If your file lacks raw pixel density, the desktop view will expose it instantly.

The Tablet Experience (769px – 1024px)

As the browser window shrinks to tablet size (between 769px and 1024px in width), SharePoint begins to crop the sides of your image to maintain the grid structure. The aspect ratio shifts dynamically. Instead of a wide panorama, the image starts to resemble a more traditional 16:9 or 4:3 photograph.

This is why you must never place text or critical logos on the far left or right edges of your canvas. The Collab365 team recommends keeping all important visual information within the centre 50% of your file. If you place a company logo in the top right corner of a 3840px wide image, it will completely disappear the moment a user views the site on an iPad.

The Mobile Experience (320px – 480px)

Mobile is where bad banners go to die. On a smartphone held vertically (portrait mode, typically between 320px and 480px in width), the screen is a tall, narrow rectangle. To make a landscape banner fit this space without squishing it into a tiny, illegible sliver, SharePoint zooms in and crops heavily into the absolute centre of the image. The image effectively becomes a square or portrait orientation.

Key Takeaway: The mobile breakpoint (320px to 480px) dictates that only the central core of your 3840px wide image will survive. This is your "Safe Zone".

If you did not set your focal point correctly during the upload process, SharePoint might randomly centre on a blank piece of sky in the top left corner of your photo. By setting the focal point on the subject's face or the core illustration, you ensure that as the sides are violently sliced away for the mobile view, the most critical part of the image remains front and centre. Design for desktop, but always verify for mobile. After uploading your banner and setting the focal point, immediately shrink your desktop browser window to the width of a smartphone. This simulates the responsive breakpoints and reveals any embarrassing cropping errors instantly.

Advanced Tips: AI-Generated Banners and Sensitivity Labels

As we navigate through 2026, SharePoint management is no longer just about pixels, CSS, and aspect ratios. It involves complex integrations with Microsoft Purview for compliance and the rapid adoption of AI workflows for content generation. You must understand how these external systems interact with your carefully designed header images.

Copilot "Agentic Building" in SharePoint

Announced around SharePoint's 25th anniversary in March 2026, "Agentic Building" fundamentally changes how modern pages are created.3 Copilot is no longer just a passive chat box sitting in a sidebar; it acts as an active partner in site architecture. You can describe what you want to build in natural language, and SharePoint will propose a structured plan encompassing site structure, pages, lists, and starter content.3

For site owners, this means you can ask Copilot to "Create a new project hub with an extended header featuring an abstract, geometric banner in our corporate blue." The AI will generate the 3840×900 image, apply it to the header, configure the overlay, and set the focal point automatically. This multi-turn collaborative experience drastically reduces the time spent hunting for stock photography and manually resizing images in external tools like Canva.

Key Takeaway: Agentic building shifts the burden of technical sizing from the user to the AI. However, understanding the underlying dimensions is still necessary for troubleshooting when the AI generates an unexpected layout.

Microsoft Purview Sensitivity Labels Integration

This is a critical, often overlooked trap for page editors in enterprise environments. Microsoft Purview sensitivity labels allow IT administrators to classify and protect data across the entire Microsoft 365 tenant.25 These labels can be applied to SharePoint sites, Microsoft Teams, and individual documents, and they carry powerful visual markings—specifically headers, footers, and dynamic watermarks.25

If your organisation enforces a "Highly Confidential" sensitivity label on a specific SharePoint site, Purview may automatically overlay a massive, diagonal text watermark across your beautifully designed header banner.27 Furthermore, classification text injected by these labels can push your site navigation down, completely breaking the visual alignment of the extended header layout.

How to manage this:

Design with Empty Space: If you know a site will carry a sensitivity label that injects a watermark, design your 3840×900 banner to be minimalist. Avoid busy patterns, dense text, or highly detailed photography. Use solid colours or subtle gradients so the forced Purview watermark remains legible and does not clash horribly with your background graphics.
Understand the Hierarchy: Sensitivity labels apply protection that travels with the content and the container.26 You cannot override a Purview watermark with CSS injection or clever image editing. The compliance policy always wins.
Check the Default Labels: Be aware that SharePoint document libraries can now have default sensitivity labels configured.28 While this primarily affects files, site-level labels dictate the overall privacy and external sharing access, which are visually indicated next to your site title in the header.29 If your header is too cluttered, this vital compliance information becomes lost.

Key Takeaway: A beautiful banner is useless if it obscures mandatory corporate compliance watermarks. Always design your headers with Purview sensitivity labels in mind if you operate in a regulated industry.

Common Mistakes We See (And How to Avoid Them)

We have audited hundreds of SharePoint intranets over the years. Despite the availability of extensive documentation, the same errors crop up time and time again. Here is what you should actively avoid to ensure your sites look professional.

Mistake 1: Uploading Massive RAW Files directly from a Camera

The Story: A corporate communications team hired a professional photographer for a major office shoot. They received a folder of stunning 25MB JPEG files. Eager to show them off, they uploaded one directly to the home page extended header. The page took eight seconds to load, and when it finally did, the image looked like a heavily compressed, blocky mess. SharePoint had panicked at the file size and crushed the quality to save bandwidth.

The Fix: We ran the image through Canva, exported it exactly at 3840×900 pixels, set the resolution to 72 DPI, and brought the file size down to 1.2MB. The result was instantaneous loading and crystal-clear resolution on all devices.

Key Takeaway: Never trust a raw photography file on a web platform. Always process, resize, and compress images specifically for web delivery before uploading them to SharePoint.

Mistake 2: Embedding Text into the Banner Image The Story: A project manager designed a banner in Photoshop with the text "Q3 Financial Results Overview" beautifully typed across the bottom left corner of the image. On their large desktop monitor, it looked fantastic. However, when the CEO checked the site on their mobile phone, the responsive cropping sliced the text in half, leaving it to read "Q3 Fin". The Fix: Never bake important text into your background image. Use the actual SharePoint site title text field provided in the header settings. If you must hide the site title to achieve a specific look 6, ensure any text in your custom graphic is placed dead-centre to survive the severe mobile crop.

Mistake 3: Ignoring the Focal Point Tool The Story: A human resources team uploaded a wide photo of their leadership group standing in a long line. Because they were in a rush, they didn't adjust the focal point after uploading. The mobile view, adhering to its narrow central crop, zoomed directly into the blank wall behind the team, completely removing the actual people from the image on smartphones. The Fix: Always drag the focal point crosshairs over the most important subject in the image the second you upload it.8 It takes two seconds and saves your mobile users from a confusing experience.

Structured FAQ

To consolidate this information, here are the most frequently asked questions we receive regarding modern SharePoint header images in 2026.

1. What file format works best for SharePoint modern page banners? PNG is vastly superior to JPEG for SharePoint banners, especially if your image contains solid colours, geometric shapes, or corporate logos. SharePoint's background compression algorithm tends to create fuzzy, pixelated artifacts around sharp edges when processing JPEGs. SVGs are supported for site logos but are not allowed on group-connected sites for security reasons.1 Always default to PNG.

2. Does the physical image file size affect page load times?

Absolutely. While modern internet speeds are fast, a 15MB header image will bottleneck the page rendering process, causing a noticeable delay before the visual content appears. This delay negatively impacts user experience and internal adoption metrics. Always aim to keep your banner files under 2MB by saving them at 72 DPI.

3. I uploaded a 1920×1080 image, but it still looks blurry. Why?

If you are viewing the site on a high-resolution 4K monitor, a 1920px image simply does not possess enough physical pixels to cover the screen real estate natively. The browser must stretch the image to fit, which causes interpolation and blurriness. Upping your starting dimensions to 3840 pixels wide provides enough raw pixel data for high-resolution displays to render the image sharply.

4. Can I use custom CSS to stop SharePoint from cropping my image? By default, no. Microsoft restricts inline CSS to maintain the integrity of the responsive grid. However, if you have developer resources and tenant admin approval, you can use the SharePoint Framework (SPFx) or a custom Application Customiser (like the Modern Script Editor) to inject stylesheets that override the .o365cs-nav-header16 class rules. Bear in mind this requires ongoing maintenance, as Microsoft frequently updates backend class names.12

5. How do I use Microsoft Designer or Copilot to make a banner? If your tenant is licensed for Microsoft 365 Copilot, you can access the Create module or the integrated AI assistant directly within SharePoint. Simply prompt it with your requirements (e.g., "Create a wide banner image for a corporate health portal"). The AI will generate options that you can save and upload directly. Ensure your administrators have configured your organisation's Brand Kit so the generated images automatically match your corporate colours and typography.20

Next Steps and Conclusion

Fixing blurry and poorly cropped SharePoint banners does not require a degree in web development; it simply requires discipline in how you prepare your files. Stop relying on SharePoint's backend algorithms to magically fix massive, incorrectly proportioned photographs.

Take five minutes right now to audit your most important SharePoint site. Download the current header image, run it through Canva to resize it to exactly 3840×900 pixels, export it as a web-optimised PNG, and re-upload it. Adjust your focal point to the centre of the action, and then physically shrink your desktop browser window to watch how smoothly it scales to a mobile view. Whether you are dealing with complex corporate intranets encumbered by Purview sensitivity labels, or just trying to make your departmental team site look respectable, mastering these basic image dimensions will elevate the professionalism of your entire digital workspace.

For deeper SharePoint research and insights, check the dedicated SharePoint Space on Collab365 Spaces.