Forum Discussion
Kathleen Lynch
Oct 11, 2017Brass Contributor
Reference anywhere for SharePoint Modern page image sizes?
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.
Hi Bastiaan, Sorry for the delayed response. I just posted the article. Please let me know if this clarifies some of the murky-ness. ;-) Beth
- bhpittmanCopper Contributor
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/eGFQgBPvThe #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. - Katie Swanson
Microsoft
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. - Katie Swanson
Microsoft
+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-dc510065-b5a5-4654-bc94-e3ecbbb57d8d - moworldCopper ContributorI know this is an old thread and there is an accepted answer, but the OP question was not specifically about creating a home-page mosaic. My issue was with news posts thumbnails, and my search led me here. To answer the OP question, however, there is an [support article on the subject](https://support.microsoft.com/en-us/office/image-sizing-and-scaling-in-sharepoint-modern-pages-dc510065-b5a5-4654-bc94-e3ecbbb57d8d#:~:text=By%20default%2C%20the%20thumbnail%20comes,a%2016%3A9%20aspect%20ratio.).
I made a template to get the sizes for hero webparts, see https://medium.com/@smcollier/hero-webpart-jigsaws-ad59f52deb91
For anything else I use 16:9, for example although the page header is thin, that image is used when the page is displayed in news, or other links.
The actual resolution is managed by sharepoint, I dont really think much about it, as long as youve got a few thousand pixels wide.
- Mike BrunetCopper Contributor
Steven Collier ..Thank you.
- Beth HallIron Contributor
Hi All, I use Steven Collier jigsaw web part all the time, its great! Unfortunately, I've run into a few issues when folks haven't selected the best types of images to use with this technique. I just posted a brief blurb about it with an example of an image that turned into a hot mess. Check it out
(I promise it is brief, no coffee needed)
- Daniel St. HilaireBrass Contributor
Thanks for sharing Steven. I tried this out and the template was great. I had used a similar template for promoted links in the past. I'm still struggling with standard page headers though. Kind regards. Dan
- Colleen ParkerBrass Contributor
I'm also struggling to find the right size image. 16:9 is not so great for the "banner" area at the top. Finding a good "banner" image that carries over to the "News" page without blurry or distorted is my goal. Would love if anyone has advice.
Steven, thank you for your template!