Forum Discussion
Solved
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 ...
Hi Bastiaan, Sorry for the delayed response. I just http://straightenthemaze.com/2018/02/21/how-sharepoint-handles-images/. Please let me know if this clarifies some of the murky-ness. ;-) Beth
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.
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.