Image guidelines: file sizes, file types, dimensions, and composition

BloomCU Support

Updated July 14, 2023 17:10

For websites launched since fall 2021. (For older websites, some information below may not apply.)

General guidelines for placing images on your website

Match the image orientation to its frame (e.g., landscape, portrait, square). For example, if a CMS block has a landscape oriented frame, then use a landscape oriented image. (That said, some blocks have soft-cropping functionality. With soft-cropping, you can put a landscape oriented image into a square frame, for instance, and it will look good as long as the subject isn't cropped out of the frame.)
Position the subject where it won't be covered by other elements. For example, if you have text on top of a photo of a person, make sure the text doesn't cover their face.
If an image is blurry, upload a bigger size. See "Dimensions and composition" below for examples of minimum dimensions.
Smaller file sizes make your pages load faster. Ideal size: fewer than 500 KB. Max size: 1 MB.
If you put text on top of an image, make sure there is high contrast. We've seen low contrast lead to lower conversion rates.
For (most) icons and background graphics, use an SVG format. SVGs scale infinitely to fill the sizes of their containers. So, they are ideal for vector-only icons and background graphics.
Check images on all screen sizes. Just because an image looks great on desktop, doesn't mean it will look good on mobile (and vice versa). If you're on your desktop computer, you can do a quick check by reducing the width of your browser window to see how an image looks on smaller screens.

Image file sizes

Ideal size: Less than 500 KB

Max size: 1 MB

Smaller image sizes will make your site load faster. A few hundred KBs is ideal, but obviously, the images have to be big enough to look good, too. So, use 1MB as the max size.

Image file types

jpg (aka jpeg)

Pros

Good for photos
Small file size

Cons

Not good for icons and graphics
No transparent layers (e.g., backgrounds)

png

Pros

Transparent layers (e.g., good when you need an image with a transparent background)

Cons

Larger file size than jpg

SVG

Pros

Best for icons and graphics because svgs can scale infinitely to any size without getting blurry
Small file size
Transparent layers

Cons

Usually not good for photos

Note: In order for svgs to work right, they have to be created with an application designed for creating vector graphics (e.g., Sketch, Illustrator) rather than a raster-based application (e.g., Photoshop).