Image Sizes, Guidelines & Templates
Minimum image size requirements
The minimum image size requirements for BU Banners varies by layout type.
- All images used in BU Banners full width layouts should be a minimum of 3840px wide and 2048px tall.
- All images used in BU Banners half width layouts should be a minimum of 1536px wide and 2048px tall.
- All images used in BU Banners video layouts should be a minimum of 3840px wide and 2160px tall.
Cropping in BU Banners
BU Banners uses the newest HTML and CSS strategies to improve the performance of your website by automatically cropping your photo to the best possible resolution for mobile, tablet, small desktop, and large desktop screens. It will also automatically handle retina images for you. BU Banners does this by creating a vertical crop as well as a horizontal crop of your image. The vertical crop is used on mobile to help accommodate the longer length of banner text on smaller screen sizes, and create a more pleasing mobile experience. The horizontal crop is used for desktop devices, and allows more content below the banner to show because the width of the screen is wider.
Here is an example of how the banner on this page is cropped horizontally and vertically in this plugin.
Full Width Banner Cropping Examples
| Original Image | Vertical Crop (mobile) | Horizontal Crop (Regular desktop) | Horizontal Crop (Extra large) |
 |
 |
 |
 |
Half Width Banner Cropping Examples
| Original Image | Vertical Crop (mobile) | Horizontal Crop (Regular desktop) | Horizontal Crop (Extra large) |
|
|
 |
|
Notice how in the regular desktop horizontal crop, some of the original image is cropped at the top and bottom, making it look “zoomed in”. This is normal. You’ll also see that on the vertical crop, the focus is on the planet in the middle. This is normal as well.
Planning the placement of your subject in your photo – and ensuring it works well with BU Banners – doesn’t have to be daunting. We’ve put together several Photoshop templates below to help you understand how your photo will crop at different device sizes, and plan for it.
Photoshop templates
Most professional photos have a 4:3 ratio. The templates below will help show you how these photos will crop, and assist you in placing your subject in the photo.