Forum Discussion
Reference anywhere for SharePoint Modern page image sizes?
- Feb 21, 2018
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
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 BrunetMay 29, 2019Copper Contributor
Steven Collier ..Thank you.
- Beth HallMar 08, 2018Iron 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. http://straightenthemaze.com/2018/03/08/hero-image-yuck/
(I promise it is brief, no coffee needed)
- Daniel St. HilaireJan 22, 2018Brass 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 ParkerFeb 01, 2018Brass 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!- Beth HallFeb 01, 2018Iron Contributor
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!
- Beth HallNov 15, 2017Iron Contributor
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?
Thanks much!
- Nov 15, 2017
That's weird, I've shared it again and updated the article.
- Beth HallNov 15, 2017Iron Contributor
Steven Collieryour trick worked like a dream, thanks for passing it, and your template along!