How To: Use Correct Image Sizes
![two people](/sites/default/files/styles/header_mobile/public/2022-11/twohelp.jpg?itok=i6R58mV2)
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](/sites/default/files/styles/cke_media_resize_large/public/2022-12/Screenshot%202022-12-13%20at%2012.46.29%20PM.png?itok=rZ0t5Tam)
Dimensions : 2000 pixel width x 600 pixel height, “Landscape” orientation
![example](/sites/default/files/2022-12/example2000x600.jpg)
Program Page Hero Image
![How to Program page](/sites/default/files/2022-12/Screenshot%202022-12-13%20at%2012.48.45%20PM_0.png)
Dimensions: 600 pixel width x 600 pixel height, “Square” orientation
![example](/sites/default/files/2022-12/example600x600.jpg)
News Page Featured Image
Dimensions: 850 pixel width x 520 pixel height, “Landscape” orientation
![news how to](/sites/default/files/2022-12/example850x520.jpg)
Event Page Image
Dimensions: 800 pixel width x 800 pixel height, “Square” orientation
![Event Page How To](/sites/default/files/2022-12/example800x800.jpg)
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](/sites/default/files/2022-12/Screenshot%202022-12-13%20at%208.06.05%20PM.png)
Dimensions: 1000 pixels width x 550 pixels height, “Horizontal” orientation
![callout example](/sites/default/files/2022-12/example1000x550.jpg)
Two Column Billboard
![billboard how to](/sites/default/files/2022-12/Screenshot%202022-12-13%20at%208.09.51%20PM.png)
Dimensions: 600 pixel width x 450 pixel height, “Horizontal” orientation
![billboard example](/sites/default/files/2022-12/example600x450.jpg)
Two Column Callout 4 Links
![4 links how to](/sites/default/files/2022-12/Screenshot%202022-12-13%20at%208.12.18%20PM.png)
Dimensions: 500 pixel width x 500 pixel height, “Square” orientation
![four link example](/sites/default/files/2022-12/example500x500.jpg)
Callout Vertical
![how to vertical](/sites/default/files/2022-12/Screenshot%202022-12-13%20at%208.20.18%20PM.png)
Dimensions: 800 pixel width x 800 pixel height, “Square” orientation
![Event Page How To](/sites/default/files/2022-12/example800x800.jpg)
Gallery Photo Block
![photo block how to](/sites/default/files/2022-12/Screenshot%202022-12-13%20at%208.17.03%20PM.png)
Dimensions: 800 pixel width x 800 pixel height, “Square” orientation
![Event Page How To](/sites/default/files/2022-12/example800x800.jpg)
Callout / Single Column / One Button
![single how to](/sites/default/files/2022-12/Screenshot%202022-12-13%20at%208.16.00%20PM_0.png)
Dimensions: 850 pixel width x 520 pixel height, “Landscape” orientation
![news how to](/sites/default/files/2022-12/example850x520.jpg)
Gallery Carousel
![gallery how to](/sites/default/files/2022-12/Screenshot%202022-12-13%20at%208.25.26%20PM.png)
Dimensions: 500 pixel width x 500 pixel height, “Square” orientation
![four link example](/sites/default/files/2022-12/example500x500.jpg)
Hero Landing Page
![saint marys website screenshot](/sites/default/files/styles/cke_media_resize_large/public/2024-02/HomepageHeroComponent.jpg?itok=bT_E_a0e)
Dimensions: 2500 pixel width x 1866 pixel height, “Horizontal” orientation
![2500 w x 1866 h](/sites/default/files/2024-03/Artboard%201.png)
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
Step 1: File > Open image
![open two](/sites/default/files/2022-12/Screenshot%202022-12-09%20at%2012.53.41%20PM.png)
Step 2: Page > Resize page (scale)
![resize one](/sites/default/files/2022-12/Screenshot%202022-12-09%20at%2012.51.18%20PM.png)
Step 3: Apply desired Width and Height, and select “Apply”
![resize how](/sites/default/files/2022-12/Screenshot%202022-12-09%20at%2012.51.24%20PM_0.png)
Step 4: File > Export > Quick export page, and done! Your file will be added to your downloads folder
![export four](/sites/default/files/2022-12/Screenshot%202022-12-09%20at%2012.51.42%20PM.png)