# 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. SortImage TypeWhere it's usedMinimum recommended sizeOptimal size for best qualityAspect RatioThumbnail 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](/resource/text-editor "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 – 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 ![Two image equal icon](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2026-01/two%20image%20equal_0.png?itok=JGos4kp4) ### 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 left icon](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2026-01/two%20image%20large%20left_0.png?itok=MKWPjKRU) ### 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 ![two image large right. icon](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2026-01/two%20image%20large%20right_0.png?itok=tbo-POoE) ### 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 – Equal icon](/sites/g/files/omnuum1651/files/styles/hwp_1_1__360x360_scale/public/2026-01/three%20image%20equal_0.png?itok=MOgkXjbU) ### 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 left icon](/sites/g/files/omnuum1651/files/styles/hwp_1_1__360x360_scale/public/2026-01/thre%20image%20large%20left_0.png?itok=ZrEx7Acy) ### 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 ![three image large right](/sites/g/files/omnuum1651/files/styles/hwp_1_1__360x360_scale/public/2026-01/thre%20image%20large%20right_1.png?itok=i2-KcL1y) --- ## Related how-tos [### Adding an image ](/adding-an-image)How to use the text editor to upload, insert, and format an image. ![Table covered with assorted art miniatures and magnets](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-03/thumb_adding_images.jpg?itok=6uQggMnj) [### Media Gallery ](/media-gallery)How to add images and display them as a media gallery on your site. ![an icon that represents a grid layout with photos](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2025-12/media-gallery-thumbnail.png?itok=8ALT2Eiw) --- ## Related resources [### Images in HarvardSites Drupal: Getting the results you expect (VIDEO) ](/resource/images-harvardsites-drupal-getting-results-you-expect-video)Learn how images are handled differently depending on how and where you use them. ![a person using a phone that has images on its screen](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2026-05/pexels-cottonbro-5082579%20%281%29.jpg?itok=JlHI6Xvr) [### Hero component: Styles, sizes, and best practices (VIDEO) ](/resource/hero-component-styles-sizes-and-best-practices-video)Understanding the options available in the Hero component and best practices. ![a tablet computer showing a website](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2026-05/pexels-pixabay-39559.jpg?itok=-VFJXOhB) [### Sharing audio and video on your site ](/resource/sharing-audio-and-video-your-site)Best practices for sharing audio files (like podcasts) and videos. ![a computer screen displaying digital audio waves](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2025-12/pexels-pixabay-257904.jpg?itok=Cp1H1EbL) [### When to add alt text ](/resource/when-add-alt-text)How to approach writing text descriptions that convey concepts in images to screen reader users. ![Two people in a workroom standing in front of a whiteboard, one writing and one observing.](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-10/thumb_alt_description.jpg?itok=aU2s_oZd) See also:- [ Images ](/general-site-management/images)