How SharePoint Handles Images

Images in Responsive Page Design

Images in Responsive Page Design

There are a number of approaches that can be taken for the technical design of 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.  Each of these pages has a unique framework and content.

On the other end of the scale you have pages that are given a framework, and content and then they essentially build the page on the fly to the spec of each visitor’s screen size.

Responsive Page Design Options


Design multiple layouts for common sizes

Sense and feed the closest page size to the browser

Images are delivered as defined


Pages use a fluid grid, stacking items when “break-point” is reached

Sense size & scale the closest layout as needed

Scale images within defined %. Switch to alternative crop/scale beyond that %


Maintain perspective by modifying each item’s height & width

Define focus point(s) for image

Crop & Scale images, maintaining focus points

SharePoint logo
Modern SharePoint

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.

Modern SharePoint is at the far right of this scale. It has a very contemporary 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 of 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.

Spend 10-minutes and gain important hands-on familiarity with images in an adaptive system

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.


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?