Image shapes and sizes (Berkeley Brand)


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.

If you have your own images and would like to use them in Brand widgets, for best results you should crop them (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). Otherwise, 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

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.