Odd Scaling that makes your Hero image go Yuck

Caution when using Jigsaw Hero images

Stephen Collier has a great article that provides guidance on how to use a single image to span a multi-image Hero web part in SharePoint. He calls them “Jigsaw” images. It is one of my go-to design elements for a site’s home page. It presents such a nice, clean & contemporary design when paired with the right image. I encourage everyone to check it out.

Jigsaw image from Stephen’s article

Take care with certain types of images

Due to how SharePoint scales and crops images, and how Parallax adds shading and motion when you mouse-over jigsaw images, you need to be careful when you select images to use in this manner. Unfortunately, if you’re not careful, you can get some really strange results.

In this extreme example, our cutie-patootie starts to look a bit like a bubbling freak show. The issue is easily solved in this case, by simply flipping the image, as shown here.

Original image
Flipped to move face out of jigsaw zone


Don’t forget that a Hero web part switches to a carousel when viewed in mobile. As a result, each of the elements of the jigsaw needs to be able to stand on its own as a complete image.

Steven’s example of a city horizon, is a great type of image to use, since none of the elements rely on the other pieces, for the user to understand what it is.

Bottom-line advice:

  • Stay away from anything that can’t be squished or mis-aligned
  • NO FACES, especially if the model is the daughter of the boss
  • NO WORDS spanning jigsaw image gutters
  • Don’t forget that mobile switches to a carousel


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?