Optimizing Images for the Web

Nobody Likes to Wait

Optimizing images is an essential part of creating a high-quality user experience on the website. Large, unoptimized images can slow down page load times, especially on mobile devices where users often rely on slower connections. A slow website can frustrate visitors, increase bounce rates, and reduce accessibility.

By preparing images correctly, we ensure that pages load quickly and consistently across all devices.

We use the WebP file format because it provides excellent image quality at a smaller file size compared to older formats like JPEG or PNG. This means faster load times without sacrificing visual quality, which is especially important for prospective students and other audiences who often access the site on their phones.

Image sizes

To maintain consistency and ensure images display correctly, all web images should be cropped and saved to the following ratios and sizes (for use on pages with side navigation):

Consistency Matters

For visual consistency, avoid mixing image ratios within the same component. This is especially important in the card grid component, where mismatched image shapes can make the layout appear uneven or unprofessional. Using the same ratio throughout ensures a polished and cohesive look across the site.

Easily Crop & Resize Images

We provide actions to standardize crop sizes and formats for the website. Photoshop actions are pre-set functions that automatically apply specific settings to your images.

Follow the steps below to prepare your images for the website.

Steps

1. Download the action file

• Save the Photoshop Action file (Web resize.atn) to your computer.

2. Add the action to Photoshop

• Open Photoshop.
• Open the Actions Panel: Window > Actions.
• Load the action in one of two ways:
  • Drag and drop the .atn file into the Actions Panel, or
  • Open the Actions Panel menu (☰) in the top right corner → Load Actions... → select the .atn file.
• A folder named Web Resize will appear in your Actions Panel. Inside, you’ll see three options: Hero, Square, and 16x9.

3. Open an image and apply an action

• Open the image you want to process in Photoshop.
• Select one of the actions (Hero, Square, or 16x9).
• Click the Play button (▶) at the bottom of the Actions Panel.

4. Adjust the crop

• The Crop Tool will activate with the correct settings.
• Reposition and adjust the crop area as needed.

5. Confirm the crop

• Press Enter, or click the check mark in the properties bar at the top of Photoshop.

6. Save the image

• Photoshop will open the Save As dialog box.
• Choose a location and filename:
  • Use descriptive words so the file is easy to identify.
  • Follow Cascade CMS naming standards: all lowercase, words separated by hyphens (e.g., austin-hall.webp).
• Click Save.

7. Confirm the file format

• When the WebP options dialog appears, click OK.

8. For hero images only

• Repeat the save process for the mobile version.
• Add an m- prefix to the filename (e.g., m-austin-hall.webp).

9. Done

• Photoshop will close the file once saving is complete.