Two Image – Equal
Images: 2 (same size)
Aspect ratio options:
1:1, 3:4, 4:5, 3:2, 4:3, 5:4, 2:3
Minimum size:
480 × 480 (varies by ratio)
Best quality:
Up to 2630 px on the long edge
Image Sizes
Image sizes, aspect ratio, and best practices
HarvardSites Drupal supports high-resolution images used in content types and components. The table below summarizes the suggested image sizes to use in your site.
| Image Type | Where it's used | Minimum recommended size | Optimal size for best quality | Aspect Ratio |
|---|---|---|---|---|
Thumbnail | List components | 480 x 270 px | 960 x 540 px | 16:9 |
Headshot | Person content type | 690 x 865 | 1380 x 1730 | 4:5 |
News banner | News content type | 1920 x 825 | 3840 x 1650 | 21:9 |
Events thumbnail | Events content type | 960 x 768 | 1920 x 1536 | 5:4 |
Hero | Hero component | 1920 x 825 | 3840 x 1650 | 21:9 |
50/50 card | 50/50 Card component | 480 x 480 | 2630 x 2630 | 1:1 |
Vertical card | Vertical Card component | 480 x 270 | 960 x 540 | 16:9 |
Media Gallery | Media Gallery component | At least 480 px on the shortest side | Flexible | Flexible (no fixed crop) |
Text Editor Images
For images added using the Text Editor, the size options correspond to the following pixel dimensions:
- X-Small: 100px
- Small: 360px
- Medium: 720px
- Large: 960px
With the Original/Full Width setting, the image will retain its original dimensions up to the maximum container width.
Note that the dimensions represent the longest side of the image, i.e., height for portrait images and width for landscape images.
Image Grid Component layouts, ratios and sizes
For images added via the Image Grid component, choose a layout first, then upload images that match the recommended aspect ratio and size. This helps ensure images display clearly and avoids unexpected cropping.
Two Image – Large left
Images: 2
Large image:
Aspect ratio: 3:2
Minimum: 1315 × 880
Best quality: 2630 × 1760
Small image:
Aspect ratio: 20:23
Minimum: 480 × 550
Best quality: 960 × 1100
Two Image – Large Right
Images: 2
Large image:
Aspect ratio: 3:2
Minimum: 1315 × 880
Best quality: 2630 × 1760
Small image:
Aspect ratio: 20:23
Minimum: 480 × 550
Best quality: 960 × 1100
Three Image – Equal
Images: 3 (same size)
Aspect ratio options:
1:1, 3:4, 4:5, 3:2, 4:3, 5:4, 2:3
Minimum size:
480 × 480 (varies by ratio)
Best quality:
Up to 2630 px on the long edge
Three Image – Large Left
Images: 3
Large image:
Aspect ratio: 3:2
Minimum: 1315 × 880
Best quality: 2630 × 1760
Small images (2):
Aspect ratio: 3:4 or 1:1
Minimum: 480 × 640 or 480 × 480
Best quality: 1560 × 2080 or 2630 × 2630
Three Image – Large Right
Images: 3
Large image:
Aspect ratio: 3:2
Minimum: 1315 × 880
Best quality: 2630 × 1760
Small images (2):
Aspect ratio: 3:4 or 1:1
Minimum: 480 × 640 or 480 × 480
Best quality: 1560 × 2080 or 2630 × 2630
Related how-tos
Adding an image
How to use the text editor to upload, insert, and format an image.
Media Gallery
How to add images and display them as a media gallery on your site.
Related resources
Images in HarvardSites Drupal: Getting the results you expect (VIDEO)
Learn how images are handled differently depending on how and where you use them.
Hero component: Styles, sizes, and best practices (VIDEO)
Understanding the options available in the Hero component and best practices.
Sharing audio and video on your site
Best practices for sharing audio files (like podcasts) and videos.
When to add alt text
How to approach writing text descriptions that convey concepts in images to screen reader users.
