Reference anywhere for SharePoint Modern page image sizes?

[Kathleen Lynch]

Looking for a reference somewhere for ideal image sizes or ratios for the various page elements for Modern pages - such as the page banner, the quick links parts or news page images, etc.

I realize they are trying to be flexible to have "any" image work, but some really don't and I am looking for a guide here so we can make it look as lovely as the default pages.

And I have tried looking at the sizes of the default images that are there, but would love to find an "official" source for this info.

[#2]

@Beth Hall I'm trying to access the link you provided and I am continually redirected to suspicious sites (asking me to install browser extensions or provide detailed info). Super strange. This is the link I'm using.
http://straightenthemaze.com/2018/02/21/how-sharepoint-handles-images/

[#3]

@Katie Swanson  I think the domain is no longer active and the internet gremlins have taken over.

[#4]

+1 on the adaptive handling of assets most people are referencing to in the comments. It's difficult to provide a pixel perfect size for image assets because the scaling of elements to provide the best UX across different screen sizes. That said, there is this documentation we put together that may provide more information: https://support.microsoft.com/en-us/office/image-sizing-and-scaling-in-sharepoint-modern-pages-dc510...

[#5]

Beth Hall's site no longer seems to be regisistered, but I found her article on the WayBackMachine site.

https://web.archive.org/web/20181018115303/http://straightenthemaze.com/2018/02/21/how-sharepoint-ha...

[#6]

As a product designer on the SharePoint team, I too found it odd not having the image sizes published anywhere. But don't fret - I can provide some details, but if you're looking for pixel dimensions well that will depend on the screen size, resolution, location of the image asset in a page section, ect. That latter part is where SharePoint's adaptive handling of content resolves and help you create great layouts.

TLDR; Using a 16:9 image ratio and setting the focal point will help maintain the correct perspective across all breakpoints. Images used in heading don't have to be your news image thumbnail. You can add an image to heading background, then set your news thumbnail in "Page details". And you guessed it - 16:9 works best for this as well. You can even update the descriptive text here too - making your metadata/open graph information exactly what you'd like.

SharePoint uses an adaptive layout where the system managed the reflow and sizing of elements. Images are placed in their elements to "fill" so that they too scale maintaining perspective of each items' height and width. Now while we recommend 16:9 ratio - we also recommend you optimize (compress) your images since file size has a huge impact on page load time. There are tons of great and free image compressing products across the web. And of course - don't forget - alt text. Even if that image is meant to be decorative, add that so that your pages and content are accessible.

[#7]

Quite a bit of time has elapsed since this thread was created but for those who stumble upon it may want to know what's possible as of October 2022.

For ease I've created the SharePoint Content Creators Toolkit, which is 100% free to use. 

:white_heavy_check_mark: Figma Download: https://lnkd.in/e9TvKxEy
:white_heavy_check_mark: PDF Download: https://lnkd.in/eGFQgBPv

The #Sharepoint Content Creator’s Kit contains a number of components, templates, best practices, and other resources for creating your SharePoint site. This design kit shows how to take advantage of SharePoint's user interface capabilities and helps you focus on user experiences and best practice design standards.

Simply paste in your desired image, preview how it will appear in the generator, and export! It couldn't be easier.