In SharePoint, an image is automatically scaled and cropped to deliver the most readable view. How does this work, and how do you best select or design images to work within this automation?
We’re all familiar with the concept of responsive page design, but I doubt that many of us have given any thought to how images are actually handled in responsive framework. The purpose of this article is to help you understand how images are handled in SharePoint and to help define the best practices for managing them.
There are two key concepts that impact images in SharePoint Online:
- Responsive pages & how they work with images via scaling, cropping and focal points
- Single images used for more than one purpose
Responsive Page Design
There are a number of approaches that can be taken for responsive pages. Lets consider them to be a sliding scale of flexibility, modernity, and forward thinking. On one side of the scale you have manually designed pages for a handful of screen sizes. On the other end of the scale you have pages that are given a framework, and essentially build the page on the fly.
On the left, you have work that is all done on the server to deliver the right-sized page for the view. On the right, you’ve got the browser doing the work to scale and size–thus it is quite a more efficient approach.
The current iteration of SharePoint Online is at the far right of this scale. It has a very modern and progressive approach to deliver pages to-scale. When your technology is on the left side of this continuum, you have great control over the design and each element, but you run into issues with legibility when accessing the page from a undefined size. On the right side of the scale, you no longer have individual control, but if you use it correctly, you can be confident all elements are going to be legible, regardless of size.
Gaining familiarity and comfort with an Adaptive system
If you’ve never worked in an Adaptive system before, you need to get comfortable with the concepts first-hand. To do this in SharePoint requires a bit of setup, configuring a test site, creating pages, and publishing example content. I think it is easier to explore these concepts in Sway. They don’t handle images exactly the same, but the adaptive concept is much easier to observe in Sway without setup. Understanding image handling in Sway will provide you with a foundation for on-the-fly scaling, cropping and focal points–all the same concepts in-use with SharePoint. The knowledge you’ll gain by seeing it first-hand is important–and Sway is just easy.
If you go through the exercise recommended in this video, you should see how you really don’t have much control of image display. But…If you set-up your focal points correctly, you can be confident that the important part of the image is always going to be in view, regardless of how the page is framed-up.
For me to get comfortable with it, I found it was all about embracing the new and improved approach, and letting go of my comfort with the controls I used in the past.
In today’s SharePoint online, each page can have an image associated with it. This image is used to represent the page in a number of places and formats. In addition to the purposes that SharePoint has for the image today, I’m sure that the future holds some new ones that haven’t been delivered yet. As a result, it is really important that you work within the parameters of the logic of the application, so your pages and images don’t stop working with some future update.
Here’s some examples of current uses:
- Header Image of the article’s page
- Page Thumbnail
- News Aggregator Services
- SharePoint Home
- Sharepoint mobile app
- News Web Part
- Top Story view
- List view
- Side-by-side view
- Site Activity Web Part
- Highlighted Content Web Part
- Cards view
- List view
- Carousel view
- Filmstrip view
There’s just so many different ways that the image is used, and the proportions change depending on the size of the user’s window at that moment. There are a few consistent utilizations of the image, but for every consistent use, there are multiple unique ones.
A single image, 5 different uses = 5 different scalings & croppings
When the new News pages were released, 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.
Here’s the test banner, and some example thumbnails of how it displays in different views/locations:
Using a banner shaped image resulted in the worst results of all of my testing.
A Picture is worth a bazillion words…
There’s just no substitute for good, old-fashioned testing. To facilitate measuring the scaling that occurs, I created an image grid that is perfectly sized to 16:9, with a dead-center focal point.
I also selected art with a variety of different proportions. Shown here with a grid overlay to demonstrate scale. The red circle shows the selected focal point:
Each of the images was inserted as a news article’s page header. I ended up with 5 news pages, since I also used the master grid for a page.
If this isn’t making sense to you, please e-mail me, I’ll be happy to clarify. I spent a lot of time exploring this, and it is a bit of a challenge to explain.
I then created a page with the “One Third Right Column layout, and inserted every view of the web parts that show image thumbnails. I replicated the web parts in the right and left columns, so we can easily compare what happens when the web part has a lot of width, vs. a restricted width. And finally, I scaled my window to be “Full width.” This is the sweet-spot of window scale/width where the page contents no longer grow, rather white space begins to be added. All of my screen captures were taken at this full-width sweet-spot.
Remember, The widgets on the Right & Left sides of the page are configured exactly the same, they are just in different width columns.
- You’ll get the best results using images proportioned near 16:9
- They’ll be cropped rather than scaled
- Images that are far-off this proportion are anamorphically scaled and squished
- Stay away from Portrait-shaped images
- Portrait-orientation resulted in an ignored focal point
- Stay away from Square images
- The more square an image is, the more scaling (versus cropping) that happens
- Stay away from traditional horizontal banner/header-shaped images
- Horizontal banner shapes are handled inconsistently, either:
- fills the frame based on height–which only shows a small segment of the width
- shows the full width, which leaves the image teeny tiny, and the majority of the frame empty
- Horizontal banner shapes are handled inconsistently, either:
- Select a real focal point rather than using that as a way to make your banner appear how you want it when you create the page
- The next visitor to the page won’t have the same size window as you
- You’re just going to wonk-up the image everywhere else
- Stay away from images with text if you can help it
- It’s going to get cut off somewhere, so it’s best to just not include text if you can get away with it
- If an image is super important, figure-out a way to get to 16:9 proportions
- You may have to do some Photoshop work
I spent a lot of time testing and researching images in SharePoint, this information is only the tip of the iceberg. Drop me a line if you have any questions.