Build Image Dimensions and Resizing

Page Content

Image Dimensions and Resizing

Each content type requires a specific image size. In the past, all photos needed to be resized to the appropriate specs using Photoshop or by submitting a request to Media Support Services before uploading the image to the T4 Media Library. 

Now, with the implementation of the PXL Tool, resizing the image is no longer necessary for the majority of content types. PXL is built into T4 and automatically resizes images that are uploaded to select content types.

Learning objectives

  • Understand the importance of image size specifications for different content types in TerminalFour (T4) and how it impacts website performance and layout
  • Learn about PXL and how it eliminates the need for resizing images for most content types, simplifying the image upload process.
  • Identify which content types still require resized images

Common image sizes in T4

With the implementation of the PXL Tool, resizing most images is no longer necessary for the majority of content types. PXL is built into T4 and automatically resizes images that are uploaded to select content types.

If you are curious to know the dimensions of the different image types in T4, here is a list.

  • Inline Media: 1024x512
  • Tile: Picture:
    • Smallest image:
      • 512x512 (required on all tiles, regardless of width)
    • Biggest image: 
      • Double width: 1024x512
      • Triple width: 1440x480
  • Exploding Picture Tiles:
    • 3 images: 634x480
    • 4 images: 576x480
    • 5 images: 432x480
    • 6 images: 360x480
  • Fifty-Fifty: 720x480
  • Hero Images:
    • Three image sizes required for every hero image content type 
    • Desktop image: 1440x720
    • Tablet image: 1024x512
    • Mobile image: 512x512
  • General Content:
    • Director's welcome message: 318x318
    • Trainee and faculty profile tables: 125x150
  • Photo Galleries:
    • Landscape/horizontal orientation: 960x720 (preferred)
    • Portrait/vertical orientation: 540x720
  • Profile Cards: 512x512

How to resize images

If you need to resize an image for the website, you can use Photoshop. You can also use the portrait cache to save time without resizing images for profiles.

How to resize an image in Photoshop

  1. Open Photoshop.
  2. Click Create new to open a new Photoshop project.
  3. Add the image specs (from specifications list above) under Preset details. 
  4. Click File.
  5. Click Place Embedded.
  6. Navigate to and select the photo you need. Click Place.
  7. A new layer will be added to your Photoshop project.
  8. Hold down the shift key, then click and drag on the image layer to readjust the image to look nice within the frame.
  9. Press Enter to crop the image. 
  10. Right-click on the image layer in the layers panel. 
  11. Click Export as and wait for a dialog box to appear.
  12. Using the drop-down menu, switch the file format to .jpg.
  13. Reduce the quality to 60%.
  14. Click Export all.
  15. Change the file name and location as needed.
  16. Click Save. 

Alternatively: Use the Photoshop 'Crop' tool

Alternatively, you may choose to use the crop tool in Photoshop to resize the image to the needed dimensions.

  1. Open the image in Photoshop.
  2. Select the crop tool.
  3. Set the aspect ratio for the crop box with the appropriate height and width (example 1024x512, 512x512).
  4. Move and adjust the crop frame as necessary.
  5. Double-click to crop the image.
  6. Choose File - Export - Export as and wait for a dialog box to appear.
  7. Under File Settings - Format, choose JPG.
  8. Under Image Size, change the width to the desired width as selected in the initial crop (the height will automatically adjust).
  9. Choose Export.
  10. Change the file name and location as needed.
  11. Click Save.

Download 125x150 Quarterly images from the portrait cache

When adding headshots of trainees or faculty in a profile grid or table, you may want to download the correctly re-sized 125x150 quarterly images from the portrait cache. 

  1. Open the portrait cache by navigating to the following URL: https://quarterly.mayo.edu/qtphotos/xxxxxxx.jpg
    Note: You will see a 404 error when you initially open this page until you complete step #2.
  2. Replace the "xxxxxxx" in the link with the Person ID # (https://quarterly.mayo.edu/qtphotos/5555555.jpg). You can find the Person ID # for the individual in the Quarterly.
  3. Right-click on the image. Click Save image as.
  4. Change the file name and location of the photo as needed.
  5. Click Save.
  6. Follow the instructions on how to upload an image to the T4 Media Library and how to add images to general content (profile tables) in T4. 

Submit image resize request to Media Support Services

If you'd prefer to have Media Support Services (MSS) resize your image, you can submit a request to them through this Workfront form. In your request, be sure to include the needed dimensions of the image(s) from the list above and that you will be using the resized image(s) on the web. 

Submit request to MSS

Best practices

  • Always adhere to the recommended image sizes for each content type to maintain consistency and optimal display across your website
  • You still need to manually resize images used in content types like general content, accordions, and tabs to ensure they display correctly
  • After uploading resized or automatically resized images, test their display on various devices to ensure they render correctly and maintain the desired user experience

Additional resources

By now, you should feel comfortable resizing images in T4.

Ready to enhance your content further?

Check out the next module.

Adding images to T4 Media Library
menu
Close