SOLVED

Reference anywhere for SharePoint Modern page image sizes?

%3CLINGO-SUB%20id%3D%22lingo-sub-115576%22%20slang%3D%22en-US%22%3EReference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115576%22%20slang%3D%22en-US%22%3E%3CP%3ELooking%20for%20a%20reference%20somewhere%20for%20ideal%20image%20sizes%20or%20ratios%20for%20the%20various%20page%20elements%20for%20Modern%20pages%20-%20such%20as%20the%20page%20banner%2C%20the%20quick%20links%20parts%20or%20news%20page%20images%2C%20etc.%3C%2FP%3E%3CP%3EI%20realize%20they%20are%20trying%20to%20be%20flexible%20to%20have%20%22any%22%20image%20work%2C%20but%20some%20really%20don't%20and%20I%20am%20looking%20for%20a%20guide%20here%20so%20we%20can%20make%20it%20look%20as%20lovely%20as%20the%20default%20pages.%3C%2FP%3E%3CP%3EAnd%20I%20have%20tried%20looking%20at%20the%20sizes%20of%20the%20default%20images%20that%20are%20there%2C%20but%20would%20love%20to%20find%20an%20%22official%22%20source%20for%20this%20info.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-115576%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-169588%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-169588%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20All%2C%20I%20use%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1292%22%20target%3D%22_blank%22%3E%40Steven%20Collier%3C%2FA%3E%20jigsaw%20web%20part%20all%20the%20time%2C%20its%20great!%26nbsp%3B%20Unfortunately%2C%20I've%20run%20into%20a%20few%20issues%20when%20folks%20haven't%20selected%20the%20best%20types%20of%20images%20to%20use%20with%20this%20technique.%26nbsp%3B%20I%20just%20posted%20a%20%3CU%3E%3CSTRONG%3Ebrief%3C%2FSTRONG%3E%3C%2FU%3E%20blurb%20about%20it%20with%20an%20example%20of%20an%20image%20that%20turned%20into%20a%20hot%20mess.%20%3CA%20href%3D%22http%3A%2F%2Fstraightenthemaze.com%2F2018%2F03%2F08%2Fhero-image-yuck%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3ECheck%20it%20out%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E(I%20promise%20it%20is%20brief%2C%20no%20coffee%20needed)%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-168798%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-168798%22%20slang%3D%22en-US%22%3E%3CP%3EAmazing%20job%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F121363%22%20target%3D%22_blank%22%3E%40Beth%20Hall%3C%2FA%3E%26nbsp%3B...%20Just%20fantastic!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-167863%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-167863%22%20slang%3D%22en-US%22%3E%3CP%3EI%20should%20have%20taken%20your%20advice%20on%20the%20cup%20of%20coffee%2C%20that%20was%20more%20than%20I%20was%20bargaining%20for!%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-165395%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-165395%22%20slang%3D%22en-US%22%3E%3CP%3EThis%20looks%20great.%20Thanks%20for%20sharing!!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-165389%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-165389%22%20slang%3D%22en-US%22%3E%3CP%3EWow%20Beth%2C%20you%20are%20a%20rock%20star!%3C%2FP%3E%0A%3CP%3EIt%20looks%20like%20the%20net%2Fnet%20is%2016%3A9%20with%20a%20number%20of%20caveats%20and%20best%20practices.%3C%2FP%3E%0A%3CP%3EWill%20run%20a%20few%20tests%20on%20my%20end%20and%20hopefully%20we%20can%20find%20a%20happy%20solution%20here.%3C%2FP%3E%0A%3CP%3E-kathy%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-162653%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-162653%22%20slang%3D%22en-US%22%3E%3CP%3EWow%2C%20thank%20you%20for%20this%20very%20detailed%20post.%20Your%20efforts%20are%20appreciated%20and%20I'll%20be%20sharing%20with%20my%20SharePoint%20leads%20in%20my%20company.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-162596%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-162596%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Bastiaan%2C%26nbsp%3B%20Sorry%20for%20the%20delayed%20response.%26nbsp%3B%20I%20just%20%3CA%20title%3D%22How%20SharePoint%20Handles%20Images%22%20href%3D%22http%3A%2F%2Fstraightenthemaze.com%2F2018%2F02%2F21%2Fhow-sharepoint-handles-images%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Eposted%20the%20article%3C%2FA%3E.%26nbsp%3B%20Please%20let%20me%20know%20if%20this%20clarifies%20some%20of%20the%20murky-ness.%20%26nbsp%3B%26nbsp%3B%20%3B)%3C%2Fimg%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%20Beth%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-162595%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-162595%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20everyone%2C%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20just%20published%20an%20%3CA%20title%3D%22How%20SharePoint%20Handles%20Images%22%20href%3D%22http%3A%2F%2Fstraightenthemaze.com%2F2018%2F02%2F21%2Fhow-sharepoint-handles-images%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Eextensive%20article%3C%2FA%3E%20about%20how%20SharePoint%20handles%20page%20image%20scaling%20and%20cropping.%26nbsp%3B%20The%20research%20and%20testing%20sure%20clarified%20a%20lot%20of%20the%20related%20question%20marks%20I%20had%20in%20my%20head.%26nbsp%3B%3C%2FP%3E%0A%3CP%3EYou'll%20want%20to%20grab%20a%20cup%20of%20coffee%2C%20and%20relax%20for%20a%20minute%20before%20you%20dive%20in.%20%26nbsp%3B%3C%2FP%3E%0A%3CP%3ECheers!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-159490%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-159490%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Beth.%3C%2FP%3E%0A%3CP%3EDid%20you%20manage%20to%20publish%20an%20article%20about%20the%20most%20ideal%20dimensions%20for%20a%20banner%20image%3F%3C%2FP%3E%0A%3CP%3EThanks%2C%20%3CBR%20%2F%3EBastiaan%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-151489%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-151489%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F547%22%20target%3D%22_blank%22%3E%40Colleen%20Parker%3C%2FA%3E%3C%2FP%3E%0A%3CP%3EI%20know%20exactly%20what%20you're%20talking%20about.%26nbsp%3B%20I%20did%20some%20testing%20with%20different%20sized%20images%20that%20were%20horizontally%20oriented%2C%20like%20a%20banner%20typically%20is.%20My%20results%20confirmed%20that%2016%3A9%20is%20really%20best.%26nbsp%3B%20When%20you%20use%20a%20horizontal%20image%2C%20what%20happens%20is%20that%20anytime%20a%20page%20thumbnail%20is%20used%2C%20the%20banner%20gets%20horizontally%20scaled%20to%2016%3A9%2C%20with%20a%20whole%20bunch%20of%20white%20space%20to%20fill%20the%20frame.%26nbsp%3B%20Your%20banner%20will%20be%20so%20small%20that%20the%20image%20is%20completely%20lost.%3C%2FP%3E%0A%3CP%3EIn%20this%20sketch%20representing%20a%20thumbnail%2C%20the%20banner%20is%20in%20red.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F27861iD83D2D085234961D%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22Banner.PNG%22%20title%3D%22Banner.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EI'm%20in%20the%20process%20of%20writing%20an%20article%20on%20the%20results%20of%20my%20testing%2C%20and%20the%20logic%20behind%20the%20best%20practices%20of%20using%2016%3A9%20images%20everywhere.%26nbsp%3B%20I'll%20post%20it%20to%20this%20thread%20when%20I%20get%20it%20complete.%20%26nbsp%3B%3C%2FP%3E%0A%3CP%3EHope%20this%20helps!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-151399%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-151399%22%20slang%3D%22en-US%22%3E%3CP%3EI'm%20also%20struggling%20to%20find%20the%20right%20size%20image.%2016%3A9%20is%20not%20so%20great%20for%20the%20%22banner%22%20area%20at%20the%20top.%20Finding%20a%20good%20%22banner%22%20image%20that%20carries%20over%20to%20the%20%22News%22%20page%20without%20blurry%20or%20distorted%20is%20my%20goal.%20Would%20love%20if%20anyone%20has%20advice.%3CBR%20%2F%3E%3CBR%20%2F%3ESteven%2C%20thank%20you%20for%20your%20template!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-147531%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-147531%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20for%20sharing%20Steven.%20I%20tried%20this%20out%20and%20the%20template%20was%20great.%20I%20had%20used%20a%20similar%20template%20for%20promoted%20links%20in%20the%20past.%26nbsp%3B%20I'm%20still%20struggling%20with%20standard%20page%20headers%20though.%20Kind%20regards.%20Dan%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-128296%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-128296%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1292%22%20target%3D%22_blank%22%3E%40Steven%20Collier%3C%2FA%3Eyour%20trick%20worked%20like%20a%20dream%2C%20thanks%20for%20passing%20it%2C%20and%20your%20template%20along!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-128249%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-128249%22%20slang%3D%22en-US%22%3E%3CP%3EThat's%20weird%2C%20I've%20shared%20it%20again%20and%20updated%20the%20article.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-128067%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-128067%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1292%22%20target%3D%22_blank%22%3E%40Steven%20Collier%3C%2FA%3EThis%20is%20great%20info%2C%20thanks%20for%20sharing!%26nbsp%3B%20The%20link%20you%20provide%20in%20the%20blog%20article%2C%20to%20download%20your%20template%2C%20is%20no%20longer%20active.%26nbsp%3B%20Would%20you%20mind%20reactivating%3F%20%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20much!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115665%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115665%22%20slang%3D%22en-US%22%3E%3CP%3EI%20made%20a%20template%20to%20get%20the%20sizes%20for%20hero%20webparts%2C%20see%20%3CA%20href%3D%22https%3A%2F%2Fmedium.com%2F%40smcollier%2Fhero-webpart-jigsaws-ad59f52deb91%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fmedium.com%2F%40smcollier%2Fhero-webpart-jigsaws-ad59f52deb91%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFor%20anything%20else%20I%20use%2016%3A9%2C%20for%20example%20although%20the%20page%20header%20is%20thin%2C%20that%20image%20is%20used%20when%20the%20page%20is%20displayed%20in%20news%2C%20or%20other%20links.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20actual%20resolution%20is%20managed%20by%20sharepoint%2C%20I%20dont%20really%20think%20much%20about%20it%2C%20as%20long%20as%20youve%20got%20a%20few%20thousand%20pixels%20wide.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-656509%22%20slang%3D%22en-US%22%3ERe%3A%20Reference%20anywhere%20for%20SharePoint%20Modern%20page%20image%20sizes%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-656509%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1292%22%20target%3D%22_blank%22%3E%40Steven%20Collier%3C%2FA%3E%26nbsp%3B..Thank%20you.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

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.

17 Replies
Highlighted

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.

Highlighted

@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!

Highlighted

That's weird, I've shared it again and updated the article.

Highlighted

@Steven Collieryour trick worked like a dream, thanks for passing it, and your template along!

Highlighted

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

Highlighted

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!

Highlighted

Hi @Colleen Parker

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.

Banner.PNG

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!

Highlighted

Hi Beth.

Did you manage to publish an article about the most ideal dimensions for a banner image?

Thanks,
Bastiaan

Highlighted

Hello everyone, 

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.  

Cheers!

Highlighted
Solution

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

Highlighted

Wow, thank you for this very detailed post. Your efforts are appreciated and I'll be sharing with my SharePoint leads in my company.

Highlighted

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.

-kathy

Highlighted

This looks great. Thanks for sharing!!

Highlighted

I should have taken your advice on the cup of coffee, that was more than I was bargaining for! 

Highlighted

Amazing job @Beth Hall ... Just fantastic!

Highlighted

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)

Highlighted