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

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

screenshot of template image file

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:

  1. Background white
  2. Background image
  3. Color overlay (blue, navy, teal, purple, red)
  4. 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