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

BloomCU Support

Updated February 05, 2025 17:28

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 if the subject isn't cropped out of the frame.)
Position the subject where other elements won't cover it. 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. The ideal size is fewer than 500 KB, and the maximum size is 1 MB.
If you put text on top of an image, ensure high contrast. Low contrast has been linked to lower conversion rates.
Use an SVG format for (most) icons and background graphics that aren't photos. SVGs scale infinitely to fill the sizes of their containers, making them ideal for vector-only icons and background graphics.
Check images on all screen sizes. Just because an image looks great on a desktop doesn't mean it will look good on mobile (and vice versa). If you're on your desktop computer, you can quickly 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 must be big enough to look good. So, use 1MB as the max size.

Image file types

In general, favor JPEG (or WEBP) images over other file types, unless:
- You need background transparency (e.g. on image needs to be visible behind another). IN this case, use PNG (or WebP)
- You have simple vector art (e.g. an icon or logo). In this case use SVG.

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 illustrations because SVGS can scale infinitely to any size without getting blurry
Small file size
Transparent layers

Cons

Usually not suitable 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).