SPO Image Resizing and How to Format New Visual Content

Author by Andrew Jordan

One Question I have been getting asked since SharePoint Online came out is about content images. How should they be formatted? What are the dimensions of a banner image? How do the images look at different window and screen sizes? All of these were Questions I had myself. So I started digging.

First, its good to know what type of program SharePoint Online is from a responsiveness standpoint. There are a few approaches to building a responsive. Webpages can range from standard, developer controlled layouts and static content to adaptive pages where content updates fluidly with the browser window scaling. Currently, SharePoint Online is at the far right of this scale. It has a modern and progressive approach to present pages to-scale. With standard pages, you have complete control over the content sizing but your page might have sizing issues if you don’t account for every screen size. With Adaptive pages, you no longer have individual control but when used correctly, all the elements will be legible, regardless or content or screen size.
Layout_Approaches-1-1024x323-(1).png
 

Because the current version SharePoint Online uses an adaptive design, you don’t have the same control of how it resizes, where it crops, or when It stretches content. While it might feel like you have limited say in how the page utilizes this content visually, you can mitigate many of the issues with proper content creation.

SharePoint Online Allows each page to have an image associated with it. This image represents the page in a number of places and formats. In addition to these uses today, future versions of SharePoint my hold other uses for this image that have not been delivered yet. For this reason, you need to work within the constraints of the logic of the application so your pages and images continue to work in future updates.

Some current uses of images include:

  • Header Images of an article page
  • Page Thumbnails
  • News Aggregation services like:
    • SharePoint Home
    • SharePoint Mobile app
    • News Webpart(top story, list, and side-by-side views)
  • Site Activity Webpart
  • Highlighted Content Webpart(card, list, carousel, and filmstrip views)

There are many different way these images are used, and the dimension/proportions change based on the users window size. There are a few consistent ways these images are utilized but more often then not, there are unique utilizations as well. To truly figure out what the rules of SharePoint Image resizing are, nothing beats testing out these images. In a wonderful article written by Beth Hall of Straighten the Maze [1], She was able to test many different images in all the ways SharePoint uses them. There are great visual examples on what sharepoint does to these images in different scenarios as well so the article is linked at the bottom of this page. After all of this testing, she came away with some key tips and tricks to help the image you chose look consistent throughout the page and sizes. Here are those key takeaways:

  1. You'll get the best results using images proportioned as close as you can get to 16:9
    1. These images will always be cropped, rather than scaled.
    2. Images that are not close to this ration will anamorphically scaled and squished
  1. Stay away from portrait style images
    1. These images will ignore the focal point which can shift the image too far to the top or bottom cropping valuable content.
  1. Stay away from Square images
    1. The more square the image is, SharePoint tends to scale more than crop the image
  2. Stay away from traditional Horizontal Banner/Header-shaped images
    1. These images are handled inconsistently. The either:
      1. Fill the frame based on height--which only shows a small segment of the width
      2. Shows the full width, which leaves most of the frame empty white space.
  3. Select and design around a real focal point rather than using the default image focal point as a way to make your banner appear how you want it when you create the page
    1. The next visitor to your page won’t have the same size window as you
    2. You're just going to distort the images everywhere else they reappear.
  4. Stay away from images with text if you can help it
    1. The text will most likely be cut off somewhere, so its best not to include text directly on the image if you can help it. For many of these webparts, you will be able to add text or a header in front of or next to the image if it needs a textual context.
  5. Lastly, if an image is incredibly important, figure out a way to get to 16:9 proportions.
    1. This may require some Photoshop work

While it may not always be possible to convert all your images to a 16:9 format, you can still add images of other aspect ratios to your webparts. These guidelines are meant to create a smooth image UI across all platforms and window sizes. By following the guidelines, you can help your clients by creating what is needed to better serve your clients.

[1] How SharePoint Handles Images - Beth Hall - http://straightenthemaze.com/2018/02/21/how-sharepoint-handles-images/