Working with Images in YaleSites

YaleSites includes a medley of visually engaging Blocks, perfect for captivating your audience’s attention or simply providing a window into the beauty of Yale’s campus. But what size should your photo be? And why do some images appear blurry or pixelated after uploading?

In this user guide, we cover which image dimensions work best in our Blocks and share tips for when you only have access to a low-resolution image.

Aspect ratios

Aspect ratios describe the proportional relationship between the width and height of an image or screen. The first number represents the width, and the second the height.

The easiest way to ensure your photos look their best is to resize them before uploading. First, determine which Blocks you’d like to use, then check the dimensions of your media assets. If your image size falls below the recommended minimum size, you’ll likely need to upscale to avoid blurring or pixelation.

Some Blocks, like the Content Spotlight, Image Block, and Wrapped Image, support multiple aspect ratios. You’ll need to consider how you plan on using them to determine the best aspect ratio to use.

For example, the Content Spotlight supports up to 500 characters of text. If you prefer your images and text to be balanced, a 3:2 aspect ratio is your best bet. When using a Wrapped Image, on the other hand, you’re able to include as much text as necessary. For this use case, a 1:1.6 aspect ratio would be an excellent choice.

Recommended Sizes

Additional information

Action Banner

• Aspect ratio: 16:5
• Minimum size: 1280 × 400
• Tall vs. Short: Use one image. Design for Tall; Short uses the same file and simply shows less height (more vertical cropping).
• Focal point: Works as expected—the image crops around the focal point you set.

Grand Hero

• Aspect ratio: 16:9
• Minimum size: 1280 × 720
• Tall vs. Short vs. Mini: Use one image. Design for Tall; Short and Mini show progressively less vertical area. Visible height varies by screen size in Tall, so the exact crop can’t be predicted.
• Short display height: Always 448px tall (how much is cropped depends on your image’s height).
• Mini display height: Always 224px tall (how much is cropped depends on your image’s height).
• Focal point: Not used—images always crop from the center.

Image Banner

• Aspect ratio: 16:9
• Minimum size: 1280 × 720
• Tall vs. Short: Use one image. Design for Tall; Short uses the same file and shows less vertical area. In Tall, visible height varies by screen size, so the exact crop can’t be predicted.
• Short display height: Always 448px tall (crop depends on your image’s height).
• Focal point: Not used—images always crop from the center.

Adjust the Image Focal Point 

Focal Point is a feature that ensures key parts of your image take center stage. Avoid accidentally cropping out important details—like a subject’s head—and make image cropping easier than ever.

How it Works

Access Focal Point by editing any of the images in your Media Library.

• Simply position the plus icon over your image’s most important area—or focal point—hit Save, and YaleSites does the rest.
• Blocks will automatically adjust to focus on the designated area, eliminating the need to specify multiple cropping sizes.
• The Preview feature lets you see how your image will appear across aspect ratios, allowing you to fine-tune your focal point before saving.

You can see Focal Point in action by watching the Release Demo Video.

Creating Pattern Backgrounds for Blocks

Some blocks on the YaleSites platform now support image backgrounds, giving you more flexibility to create visually engaging content that aligns with your organization’s identity with patterns.

Which blocks support pattern backgrounds?

You can add custom pattern backgrounds to these blocks:

• Quick Links - Perfect for highlighting related resources or navigation
• Callout - Great for drawing attention to important information
• Action Banner - Ideal for promoting key calls to action

Image requirements

Each block type requires a specific image size to ensure your pattern displays correctly:

Pattern Example Files

The links may appear blank because the pattern is white. Right-click on the window and download the image.

Callout Pattern

Action Banner

Working with low-resolution images

You may have encountered a scenario where you’ve uploaded an image only to find it stretched or pixelated after it’s added to your page. When this occurs, it’s a sign that your image’s resolution is too small. If this happens, there are a couple of approaches you can consider.

• Determine whether an image is necessary or simply decorative. For example, if you’re using an image in the place of an icon, it’s best to skip the image altogether.
• Select a suitable replacement image. If you can’t create a higher-resolution version of your original image from the source materials at hand, consider whether another image might do the trick. Luckily, the Office of Public Affairs & Communications maintains an archive of curated images of the Yale campus, its programs, and its people.
• Upscale your image. Sometimes referred to as upsampling, upscaling is the process of maintaining or even improving the quality and details of media when it needs to be displayed at a larger size.

You can use photo editing software like Adobe Photoshop to enhance your images, but these days, you also have the option of using AI to breathe fresh life into your media files. AI image enhancement tools are often easier to use than photo editing software and also yield excellent results.

Yale offers a free subscription to Adobe’s Creative Cloud. Visit Software at Yale to get started. If you opt to explore AI options for image enhancement, please adhere to the University’s guidelines, which uphold our institutional commitment to safety, security, and academic integrity.

Resources

• Photoshop: How to resize your images
• Easily enhance image quality in Lightroom
• AI-Based image upscalers to enhance photo quality

The YaleSites Team is continuously enhancing our media management, so stay tuned for updates. If you’re curious what else is in store for YaleSites, we encourage you to visit the Product Roadmap.