Resizing Images for the Web

Before uploading images to Cascade CMS, there is some image clean-up and resizing that should be done!

1. Images need to be a JPG or a PNG to work correctly in Cascade. You should never upload TIFF files or raw image files. 
    
2. Make sure your images are less than 1MB in size. 
    
3. Make sure the file names of your image are meaningful, in lowercase letters. In most cases, this will mean renaming your file before you upload it. Remove any special characters and make sure there are no spaces in the name of your file; dashes are best as separators (e.g., massachusetts-hall-scenic.jpg). 
    
4. Images should be sized to the appropriate dimensions! If you want two columns to align, make sure your images have the same aspect ratio.

Why is this important?

• Big images cause the website to load slowly (or not at all, on a slow Internet connection).
• On a mobile device, large images will eat up your users' data. This affects your reach and passes the cost on to your users.
• Viewers may get frustrated and leave your page.

Resizing Images on a Mac

Macs come with a piece of software called "Preview." 

1. Open your image in Preview.
2. Click on the Tools menu, then select Adjust Size.
3. Select pixels instead of inches from the first dropdown menu; this is the measurement Cascade uses.
4. Type in the height or width; the other value will change proportionately. Note that you may still want to crop your image after resizing to get exact dimensions.
   1. The widest possible image you will need in Cascade CMS, for a FULL-WIDTH image, is 1440px. Your image should be smaller than that unless it is for your homepage banner. 500px is a good starting point.
5. The minimum resolution can be 72.
6. Click OK.

Cropping images in Preview to get a more exact image size:

1. Click on the center of your image; the cursor will change to a plus (+) sign.
2. Like you select text in Word, click and drag your mouse across the screen and you will see a dotted line with handles and pixel dimensions.
3. Draw the size square or rectangle you need, then release the mouse.
4. The cursor then changes to a hand. Use the hand to move the crop box around. Drag the dots to make the box larger or smaller.
5. Click on the Tools menu and select Crop. (You can also use the shortcut Command + K!)
6. Made a mistake? Click on the Edit menu, select Undo, and try again!
7. Save your cropped image.

Note: this does crop your original file, so make a copy if you want to keep the original.

Resizing Images on Windows 

Windows computers come with a piece of software called "Irfan View."

1. Open your image in Irfan View.
2. Click on Image-Resize/Resample.
3. Select pixels instead of inches; this is the measurement Cascade uses.
4. Type in the height or width; the other value will change proportionately. Note that you may still want to crop your image after resizing to get exact dimensions.
   1. The widest possible image you will need in Cascade CMS, for a FULL-WIDTH image, is 1440px. Your image should be smaller than that unless it is for your homepage banner. 500px is a good starting point.
5. The minimum resolution can be 72.
6. Click OK.

Cropping images in Irfan View to get a more exact image size:

1. Click on the center of your image. The cursor changes to a plus (+) sign.
2. Like you select text in Word, click and drag your mouse across the screen and you will see a dotted line with handles and pixel dimensions.
3. Draw the size square or rectangle you need, then release the mouse.
4. Click on Edit/Crop Selection.
5. Made a mistake? Click on Edit/Undo and try again!
6. Save your cropped image. 

Note: this does crop your original file so make a copy if you want to keep the original.