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.
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.
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.
- 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