Bento offers a wide range of options for manipulating how images show up in a guide. But for anyone who's worked with images before, they're tricky!
General handling of images
Bento will never distort the aspect ratio of your image.
All guides and layouts have a default image width of 400px. We recommend uploading an image that is less than 600px in all dimensions.
Generally speaking, images with a landscape orientation look nicer in guides.
If you set a fixed width to an image, Bento may enlarge, compress, or even crop it to respect that width. Again, we will never distort the aspect ratio when doing so.
There will be padding around your image unless it is set to "edge to edge". However, setting an image to edge-to-edge may result in cropping especially if you've also defined an image width.
Image manipulation options are available for layouts with horizontal orientation.
This includes:
Onboarding layouts such as: Flat, Compact and Timeline
Embedded contextual layouts such as: Card, Banner and Carousel
Example: landscape image, auto step height, auto image width.
Below is a card set to auto-height. The image is 1000x300. No image width has been defined.
Result: The image shows as 400px wide (default) and the height automatically adjusts to the text in the card. The image is not stretched or cropped and given its aspect ratio, there is lots of top and bottom space. The image has standard padding on the right and is vertically aligned within the card.
If we wanted to remove the top and bottom space, we could set the image to edge-to-edge. However, since image width auto-defaults to 400px, there will be slight cropping on the sides so we don't distort the aspect ratio.
Example: landscape image, fixed step height, fixed image width
Below is a carousel with a relatively short fixed height (150px). The image is 500x300. The carousel has a fixed image width of 400px.
Result: image is 400px wide and has standard padding on the right. The image is top-aligned so it doesn't move when the rest of the step expands (since the text overflows the step height)
Example: portrait image, auto step height and image width.
Below is a card set to auto-height (same one as earlier). This time, the image is 150x250. Again, no image width has been set.
Result: image "spot" is still 400px wide since nothing else was defined (you can see the image spot on hover). Within that "spot", the image is horizontally centered. In order to avoid cropping, the image is shown to be tall and skinny.
If you wanted to make this image "wide" but not tall, you'd have to be okay with top/bottom cropping. One way to achieve that is to set the image to edge-to-edge.
When you set a fixed width (example below is set to 100px), it will change the size of the "spot" and keep it aligned to the right. This doesn't change how tie image shows up, but rather where it's placed.
For maximum control, crop your images to exactly what you want.
Detailed cases
Multiple images
When choosing the horizontal orientation, multiple images in a step will show in a carousel
Image width therefore applies to the entire carousel element, and not an individual image
If some images are set to edge-to-edge, and others are not, the carousel will default to having padding (i.e. ignore the edge-to-edge)
Padding
Padding in embedded cards can be set at the organization level to create a consistent experience. This is currently done via the Styles tab in Bento. If you set your org-level padding to 0px, Bento will still add in padding around text (for accessibility) but will allow images to run to the edge.
Edge-to-edge images will override padding as well.
Branching cards
We support all image formats 9png, jpeg, svg). We recommend svg formats for sharpness. We don't recommend jpeg since the backgrounds aren't transparent.
Size recommendations vary depending on where you want the image to be in the card. Ultimately, size is up to you so feel free to experiment.
For anything other than background images we recommend: 32-48px. Note: We have a size cap at 60px. If you upload a large image it will be resized however the sharpness will be captured.
For background images the image will fill up the entire card size. Card size: 290x106. Images will resize to try and fit as much of the image in the card, for sharpness use a larger image. Keep in mind if you use background images you will need to factor in your text color.
