The Berkeley Brand guidelines provide standard image sizes for Brand components such as Hero, Photo Thumbnail, and Promo widgets. Stock images are provided in two sizes, primarily for use in the two styles of Hero widgets.
Image Information and Guidance
If you have your own images and would like to use them in Brand widgets, they should be cropped (using an external image editing tool, such as Photoshop, Preview on Mac or Paint/Photos on Windows) to the appropriate aspect ratio before uploading (see list below). Without cropping to the recommended aspect ratios, your images will be automatically cropped and scaled to fit the aspect ratio and size required by the widgets. (Note: Crop values below are initial suggestions; you may find that different crop values for a specific photo will give a preferred display for your target resolution.)
Image Sizes/Aspect Ratios
- Text box or Video split hero: Crop to 800px wide by 450px high (aspect ratio 1.777:1)
- Landing hero or Image Only hero: Crop to 1200px wide by 450px high (aspect ratio 2.667:1)
- Mega Menu image: Crop to an aspect ratio of 1.5:1, with a minimum width of 308px. For example, crop to 308px wide by 205px high.
- Rectangle-style widget (Thumbnail List, Photo Thumbnails, Promo with Image, Featured Image): Crop to an aspect ratio of 1.5:1, with a minimum width of 768px. For example, crop to 768px wide by 512px high.
- Square-style widget (Photo Thumbnails, Promo with Image): Crop to a square, with a minimum width of 768px (aspect ratio 1:1)
- Photo Thumbnail with Zoom and Photo Thumbnail with Gallery: Photos should be a minimum of 768px wide by 512px high (aspect ratio 1.5:1)
Portrait Photos
If the image you'd like to use is in portrait orientation (taller than it is wide), and you can't crop it into square or landscape orientation, see the Brand toolkit's Photoshop templates to transform your image into landscape orientation.