Skip to Main Content

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 100,000 images on FIU's Flickr or images in this FIU Stock collection, which are free to use without permission. Please check with our Multimedia Manager Tim ( tilong@fiu.edu) for use of other images. 

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

Zaida Morales portrait
Three baseball players posing for a portrait.
Student's gathered and sitting down in the DM plaza
Student's looking at posters in the Graham Center pit
LGBT students holding the FIU sign at the Pride parade in South Beach
An FIU student preparing food at the SOBE food and wine festival
FIU students, faculty, staff and the community gathered on the GC lawns for the homecoming event, the uncaging
Student's putting together an electrical box at the Moss school of construction.

Image use

Banner images

  • Size: All banner images must be 1600 x 800-pixel resolution and <999KB size if possible. This ensures that your photo is high quality, fits in the banner image space and doesn’t take a while to load on the page.
  • No text: Banner images are decorative and should not include any text. This is to maintain accessibility standards.
  • Subject: 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: Images on pages typically should be 600x400.
  • 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.

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 banner images

When cropping images for banners, always keep in mind the focus of your photo. Utilize the rule of thirds grid to ensure it doesn't get cut off. The focus should be within the middle band of the rule of thirds. 

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, download the Cascade guide.

For more information, visit the Cascade training page.