How SharePoint Handles Images

Header Image Testing Results

Header Image Testing Results

Banner shaped image

When SharePoint introduced News pages and I first started playing with page images, my instinct was to use a traditional (long & skinny) header image. While that works OK for the page, it doesn’t work at all for page thumbnails. SharePoint tends to show either the full width or the full height to scale this shape of an image.

Using a banner shaped image produced the worst results of all my testing.

Examples of different view results and their location

Image Scaling Grid
News page showing full image
Example image scaling
Card view on SP Home
Example image scaling
News Web Part TOP STORY view
Example image scaling
News Web Part List View

Common Image Sizes / Proportions

Remember, The widgets on the Right & Left sides of the page are configured exactly the same, they are just in different width columns.  This should be a vastly simplified way to compare a desktop view to a mobile view.

The contents of the testing page shown in this screen capture includes details on the web part being used and its view configuration.

I’ve added notes to the screen captures to explain what size/shape/proportion image is being used.

I’ve outlined the cropping used in the condensed column, and overlaid it on the wide column, this quickly demonstrates scaling that occurs in the same exact configuration of web part, used in different widths.

Anamorphic scaling is non-proportional scaling, this is called-out as well.


How useful was this information?

Click on a star to rate it

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?