10-11-2017 10:12 AM
10-11-2017 10:12 AM
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.
10-11-2017 01:40 PM
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.
11-15-2017 06:38 AM
@Steven CollierThis is great info, thanks for sharing! The link you provide in the blog article, to download your template, is no longer active. Would you mind reactivating?
11-15-2017 02:14 PM
@Steven Collieryour trick worked like a dream, thanks for passing it, and your template along!
01-22-2018 11:52 AM
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
02-01-2018 12:46 PM
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!
02-01-2018 03:36 PM - edited 02-01-2018 03:36 PM
I know exactly what you're talking about. I did some testing with different sized images that were horizontally oriented, like a banner typically is. My results confirmed that 16:9 is really best. When you use a horizontal image, what happens is that anytime a page thumbnail is used, the banner gets horizontally scaled to 16:9, with a whole bunch of white space to fill the frame. Your banner will be so small that the image is completely lost.
In this sketch representing a thumbnail, the banner is in red.
I'm in the process of writing an article on the results of my testing, and the logic behind the best practices of using 16:9 images everywhere. I'll post it to this thread when I get it complete.
Hope this helps!
02-15-2018 07:45 AM
Did you manage to publish an article about the most ideal dimensions for a banner image?
02-21-2018 02:08 PM
I just published an extensive article about how SharePoint handles page image scaling and cropping. The research and testing sure clarified a lot of the related question marks I had in my head.
You'll want to grab a cup of coffee, and relax for a minute before you dive in.
02-21-2018 02:10 PM - edited 02-21-2018 02:12 PMSolution
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
02-21-2018 07:17 PM
Wow, thank you for this very detailed post. Your efforts are appreciated and I'll be sharing with my SharePoint leads in my company.
02-26-2018 01:35 PM
Wow Beth, you are a rock star!
It looks like the net/net is 16:9 with a number of caveats and best practices.
Will run a few tests on my end and hopefully we can find a happy solution here.
03-05-2018 08:11 AM
03-05-2018 08:11 AM
I should have taken your advice on the cup of coffee, that was more than I was bargaining for!
03-08-2018 01:14 PM
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)