How To: Use Correct Image Sizes

two people

Image Cheat Sheet

Before uploading a photo: Check to make sure the image file you want to use is at or near the suggested Width and Height indicated in this cheat sheet.


See “Useful Image Editing Tools” section at the end of this document for free web-based photo editing application resources to help you resize your images.

 

Flex Page Hero Image

How To Flex

 


 

 

 

 

 

 

 

 

 

 

 

Dimensions : 2000 pixel width x 600 pixel height, “Landscape” orientation

example

 

 

 


 

 

 

Program Page Hero Image

How to Program page

 



 

 

 

 

 

 

 

 

Dimensions: 600 pixel width x 600 pixel height, “Square” orientation

example

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

News Page Featured Image

Dimensions: 850 pixel width x 520 pixel height, “Landscape” orientation

news how to

 

 

 

 

 

 

 

 

 

 

 

Event Page Image

Dimensions: 800 pixel width x 800 pixel height, “Square” orientation

Event Page How To

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

WYSIWYG

Dimensions: Recommend 1000 pixels width to fill the width of the body text area, orientation can be square, vertical, horizontal

 


COMPONENTS
 

Two Column Callout

callout how to

 

 


 

 

 

 

 

Dimensions: 1000 pixels width x 550 pixels height, “Horizontal” orientation

callout example

 

 

 

 

 

 

 

 

 

 

Two Column Billboard

billboard how to

 

 

 

 

 

 

 

 

 

 

Dimensions: 600 pixel width x 450 pixel height, “Horizontal” orientation

billboard example

 

 

 

 

 

 

 

 

 

 

 

 

 

Two Column Callout 4 Links

4 links how to

 



 

 

 

Dimensions: 500 pixel width x 500 pixel height, “Square” orientation

four link example

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


Callout Vertical

how to vertical

 

 

 

 

 

 

 

 

 

 

Dimensions: 800 pixel width x 800 pixel height, “Square” orientation

Event Page How To

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Gallery Photo Block

photo block how to

 

 

 



 

 

 

 

 

 

 

Dimensions: 800 pixel width x 800 pixel height, “Square” orientation

Event Page How To

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Callout / Single Column / One Button

single how to

 


 

 

 

 

 

 

 

 

 

 

Dimensions: 850 pixel width x 520 pixel height, “Landscape” orientation

news how to

 

 

 

 

 

 

 

 

 

 

 

Gallery Carousel

gallery how to

 


 

 

 

 

 

 

Dimensions: 500 pixel width x 500 pixel height, “Square” orientation

four link example

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Hero Landing Page

saint marys website screenshot

 

Dimensions: 2500 pixel width x 1866 pixel height, “Horizontal” orientation

2500 w x 1866 h

 


 

Useful Image Editing Tools (Free, no Login Required)

 

Adobe Express Free Image Resizer 

- Resize the Dimensions (Width and Height) of Your Image

https://www.adobe.com/express/feature/image/resize?

 

 

Pixlr 

- Resize and more

https://pixlr.com/e/#editor

 

Step 1: File > Open image

open two

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Step 2: Page > Resize page (scale) 

resize one

 

 

 

 

 

 

 

 

 

 

 

Step 3: Apply desired Width and Height, and select “Apply”

resize how

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Step 4: File > Export > Quick export page, and done!  Your file will be added to your downloads folder

export four

 

 

© 2024 Saint Mary’s College of California