Images have different heights and widths. Here we give some guidance which images are best for Carousels.
The problem:
Tall images will look best on a mobile (not great on wide-screen), like this:
Wide images will look best on wide screens (not great on mobile), like this:
How Origami handles images in Carousels?
Origami Carousels have to maintain a fixed height so that each time a new carousel slide rotates, the Carousel doesn’t jump in height making it jarring for the user.
This means Carousels have to cut images if they don’t fit in the screen the user is viewing them on.
What’s the perfect image to use in Carousels?
The best images for Carousels will have these attributes:
- Images are square or rectangular. Statistically, most users, in most companies view SharePoint on a desktop so tailoring your images to wide-screen is more optimal.
- Images don’t include text, as this text will be unreadable if cut off. Use Title and Description fields in Carousel for text. Like this:
- Images with far background. This also makes heading text more readable comparing to background image with high detail:
Heading is easy to read:
Heading is hard to read:
