Using Images in Red
Great images are as important to your website as your text.There are several ways to use images on Red, each component that uses images includes help text on minimal sizes needed. All images require Alt text for accessibility and have optional fields for captions and photo attribution.
See below for a list of image sizes in each component or post type, as well as how to make custom images for the Homepage Only components.
Image File Format and Size
Heading link
Note that WordPress will automatically scale images that it considers “big.” You can discover which images were scaled in your media library. Next to the image thumbnail, you will see the image title and the image file name. Scaled images will be labeled like this: image-file-name-scaled.jpg.
File size for images is limited on Red to avoid overly large files and to manage file storage. It is recommended to keep image size smaller on the web than you would use for print in order to improve site load times. One of the Core Web Vitals that Google uses to evaluate websites for SEO is time to load the page. Large image files will load slower than optimized images.
The recommended resolution for images for the Web is 72 DPI. Using jpg files at that resolution should keep your file size well under the maximum size for Red.
Resources for Images
Heading link
UIC Policy: Photos / Video Consent & Permissions
Image Sizes
Heading link
| Image Location | Width x Height in pixels |
|---|---|
| Home Page Header Type A | 1440x700 |
| Home Page Header Type B | 1440x420 |
| Landing Page Header Type A | 1440x600 |
| Landing Page Header Type B | 1440x166 |
| Mega Menu Listings | 600x365 |
| Advanced Content Wrapper | Height must be 464 pixels |
| Advanced Tab Group | Height must be 464 pixels |
| Text Block full | 1,090x596 |
| Text Block Half | 545x355 |
| Text Block Third | 400x480 |
| Highlights | 600x600 |
| Highlight Link List | Min Width 512 pixels |
| Link Tiles regular | 600x365 |
| Link Tiles Featured | 600x397 |
| Grid | 760x760 |
| Weighted Calls to Action | Height must be 464 pixels |
| Testimonials | 240x240 |
| Slideshows | 1090x541 |
| News & Event posts Main Image | 1090x595 |
| News & Event posts Thumbnail | 600x365 |
| Profiles | 600x688 |
| Research Project post | 1090x595 |
| Accreditation Icons in Footer | 200x60 recommended |
Custom Images for Homepage components
Heading link
The most impactful way to use images in the homepage only components — Advanced Content Wrapper, Advanced Tab Group, and Weighted Calls to Action — is to create custom “cut-out” images to create the effect of the top portion of the image extending above the content wrapper.
To create these images, you can follow the templates in specific Photoshop files available on Box through the link below.
Steps to create Image Cutout banner in Adobe Photoshop using the Image Cutout Template
Heading link
The Image Cutout Template is composed of four main layers:
- Background white
- Background image
- Color overlay (blue, navy, teal, purple, red)
- Cutout image with invisible background
Adding background image to the Image cutout template
- Make sure that the color layer you picked in the Image Cutout Template is visible and all other color layers are hidden (ex. purple layer)
- Open the image you wish to use as a background image in Adobe Photoshop
- Drag the image onto the layer of the Image Cutout Template
- Make sure the background image is in the right layer (ex. purple layer)
- Make sure that the image remains in the lower portion of your layers
- Adjust the size of your background image
- Remember not to cover the 32 px color cutout gap
- Add Layer Mask to the background image layer to fade the edges (rectangle with a black circle in the center)
- Use Fade-Left / Fade-Right layers in the Image Cutout Template to fade the sides
- Adjust opacity of an image as needed
Color overlay (blue, navy, teal, purple, red)
- Color overlay layer needs to be switched on and on top of your background image
Creating cutout image with invisible background
- Open the image you wish to remove the background from
- Select Quick Selection Tool, Magic Wand or Lasso Tool to remove the background
- Add Layer Mask to the image (rectangle with a black circle in the center)
- Make adjustments to the mask to improve its appearance and smooth out the edges
- Image with invisible background is now ready to be transported onto the Image Cutout Template
Placing cutout image onto the Image Cutout Template
- Make sure that the color layer you picked in the Image Cutout Template is visible and all other color layers are hidden (ex. purple layer)
- Drag the image with invisible background onto the layer of the Image Cutout Template
- Make sure your image is inside the layer of your choice (ex. purple layer)
- Cutout image with invisible background needs to sit on top of your Color Overlay layer (ex. purple rectangle)
- Adjust the size and make sure that the image fits in the 1040 px content width
- See measurements layer in the Image Cutout Template for more information