Odd Scaling that makes your Hero image go Yuck

Home / Blog / 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 Steven'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.

Mobile

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

One thought on “Odd Scaling that makes your Hero image go Yuck

  1. Hey there, You have done an excellent job. I will certainly digg it and personally suggest to my friends.

    I’m confident they will be benefited from this web site.

Leave a Reply

Your email address will not be published. Required fields are marked *