Images can be powerful visual assets to a webpage. Using images is a great way to add color and help tell a story on your site. It’s important for images to be high quality and be relevant to what is being spoken about on the page. Read more to learn how to choose images, edit them and place them within Cascade.

Choosing Images

Images can be a great asset to your website. Search over 88,000 images on FIU's Flickr or images in this FIU Stock collection, which are free to use without permission.

While searching for images keep in mind these ideas in mind:

  • Portraits - with simple backgrounds
  • Dynamic - engaging and in the moment
  • Friendly and student oriented
  • Thriving - campus shots that show a sense of community

Image Copyright

If using images that are not from FIU Flickr or FIU Stock collection, please be weary of possible copyright infringement. Make sure to get written permission from the owner to use the image or purchase the image for use.

If the website is part of a paid marketing initiative, this may require permission from individuals featured in the images.

When using images of specific programs or individuals, always check with the FIU unit for use of the image. Additionally, the use of identifiable athletes must be cleared by FIU Athletics and should be generally avoided.

Sample Images

Well-composed horizontal headshot

Well-composed, Everglades research photo

Well-composed vertical portrait

Well-composed photo of FIU students and alumni at the Port of Miami

Image Use

Banner images

Size: All homepage banner images must be 1600x550-pixel resolution and all subpages should be 1600x450-pixel resolution.

Example of 1600x550 image

Example of a 1600x550 banner image

Example of 1600x450 image

Example of a 1600x450 banner image

Subject & Composition: Use the rule of thirds to ensure the intended subject of your photo is also the focus of your photo. Position the subject in the middle band to ensure they don’t get cut off when you place the image on the page in Cascade.

Standard images on pages

Size: For horizontal orientation, images on pages should be 800x600; high resolution 1600x1200. For vertical orientation, images on pages should be 500x500; high resolution 1000x1000

Example of 800x600 image

Example of an 800x600 image

Example of 500x500 image

Example of an 500x500 image

Purpose: Images on pages can have text if it’s relevant to what’s on the page. If so, you must add alternative text (or alt text) to the Image Description. This is to maintain accessibility standards.

Preferred image sizes by module

All images should be <999KB if possible. This ensures that your photo is high quality and doesn’t take a while to load on the page.

Module

Standard size

High resolution sizes

Banner

Homepages: 1600x550
Subpages: 1600x450

Homepages: 3200x1100
Subpages: 3200x900

Calls to action

800x600

1600x1200

Carousel

800x600

1600x1200

Content grid

800x600

1600x1200

Full width content + media

800x600

1600x1200

Gallery

800x600

1600x1200

Large cards

1200x800

2400x1600

Multimedia background

Tall: 1600x700
Short: 1600x640

Tall: 3200x1400
Short: 3200x1280

Overlapping content + media

Horizontal option: 800x600
Vertical option: 500x500

Horizontal: 1600x1200
Vertical: 1000x1000

Profile images

500x500

1000x1000

Quote with an image

300x300

600x600

Thumbnail grid

Horizontal option: 800x600
Vertical option: 500x500

Horizontal: 1600x1200
Vertical: 1000x1000

Editing Images

Photoshop

Banner

  1. Open your photo with Photoshop.
  2. Click the crop button on the upper left corner.
  3. Make the crop ratio 2:1
  4. Click the Overlay options button and select “Rule of Thirds”
  5. Select “Always Show Overlay”
  6. It’s recommended to have the focus of your photo falls within the middle band to ensure it doesn’t get cut off when it’s uploaded into Cascade.
  7. Click the checkmark on the upper right corner.
  8. Select ‘File’. Then ‘Export’. Then ‘Export As’
  9. Under ‘Image Size’ input 1600x800.
  10. If your image is above 1MB you can reduce it by slightly lowering the quality of the image (No lower than 90%).

Standard images

  1. Open your photo with Photoshop.
  2. Click the crop button on the upper left corner.
  3. Select desired ratio. A ratio of 2:3 (4:6) is recommended, but choose what works best for your page layout.
  4. Click the checkmark on the upright corner.
  5. Select ‘File’. Then ‘Export’. Then ‘Export As’
  6. Under ‘Image Size’ input appropriate dimensions. For example, if using 2:3, input 600x400. Choose what works best for your desired page layout. Too large dimensions will result in slower load times. Too small dimensions will result in pixelated or grainy quality.
  7. If your image is above 1MB you can reduce it by slightly lowering the quality of the image.

Pixlr

Banner

  1. Go to Pixlr Express and click ‘Continue with Express’ (make sure to enable flash on your browser).
  2. Click ‘Browse’
  3. Select your image.
  4. Click ‘Adjustment’ on the lower left corner
  5. Select ‘Crop’ and choose the 16:9 aspect ratio.
  6. Select ‘Resize’ then input 1600 for the width.
  7. Then hit ‘Apply.’
  8. Click ‘Save’ in the upper right corner.
  9. Adjust quality as needed to keep image under 1MB.

Standard images

  1. Go to Pixlr Express and click ‘Continue with Express’ (make sure to enable flash on your browser).
  2. Click ‘Browse.’
  3. Select your image.
  4. Click ‘Adjustment’ on the lower left corner
  5. Select ‘Crop’ and choose the aspect ratio. A ratio of 2:3 (4:6) is recommended, but choose what works best for your page layout.
  6. Select ‘Resize’ then input appropriate dimensions. For example, if using 2:3, input 600x400. Choose what works best for your desired page layout. Too large dimensions will result in slower load times. Too small dimensions will result in pixelated or grainy quality.
  7. Then hit ‘Apply’.
  8. Click ‘Save’ in the upper right corner.
  9. Adjust quality as needed to keep image under 1MB.

Cropping Images

Bad crop

Below is an example of a bad crop. The focus of the photo, which is the group of people, will get cropped off because they don't fit within the middle band of the rule of thirds grid.

Good crop

Below is an example of a good crop. The focus of the photo, the graduate student, is well within the middle band of the rule of thirds grid.

Uploading Images to Cascade

To learn how to upload images to Cascade, read the Cascade guide.

For more information, visit the Cascade training page.

Gradient Overlays

  1. Open your image in Photoshop
  2. On the lower right-hand side, click on your image layer
  3. Then click the Adjustment Layer icon & select black & white
  4. The properties panel will open. Check the box next to tint
  5. Your photo will now have a sepia tint
  6. Next, click the color that appears next to it
  7. In the hexcode field, place of the recommended tint colors code
  8. In this case, we’ll be using FIU Gold. #B6862C
  9. Click ok
  10. You’ve added a color overlay to your image
  11. Be sure to adjust the opacity to 80%
  12. Now you can Save and Export your photo and upload it to your page

Resizing Images for Alignment in a Three Column, Thumbnail Grid, etc.

When you’re adding photos in a three column, or a thumbnail grid, the easiest way to get them to perfectly align, is to ensure they are all the same size. Typically, we suggest using 800x600 for images on the page. However, this may vary depending on the photos and in the case of a thumbnail grid, how large you’d like them to look.

When aligning photos in a three column, make sure they are on the same line, you can ensure this by eyeballing where it falls in the WYSIWYG, but it may be easier to see where they appear in the Source Code <>.