#  Keep Hero Images Readable 

 



 ##  

  expand\_more  

 
  

 

Heroes are often the first thing visitors see. They set tone and grab attention, but poorly chosen or cropped images can obscure key subjects or clash with your text content.



 

##  Why it matters 

 



 

**First impressions:** Heroes influence a user’s perception immediately.

**Clarity:** Cropping can cut off faces or important details.

**Consistency:** Uneven hero slides look unpolished.



 



      ![Keep Hero Images Readable](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2025-12/images_2.png?itok=lasqBxP6) 

 

 

  

 



 

 

 

##  How to do it 

- Start with a **wide 21:9 crop** that works across sizes.
- Keep key focal points in the center “safe zone.”
- For split-vertical layouts, test both left/right alignment since placement can vary.
- Keep slide text lengths similar to avoid varying hero heigh



 

##  Accessibility tip 

Hero images must never use video or animated backgrounds, per Harvard’s accessibility standards.



 

##  Resources 

- [Hero Component](/hero_OLD "Hero")
- [Autoplaying video backgrounds in the Hero](/news/2025/02/autoplaying-hero-background-videos-digital-design "Autoplaying Hero Background Videos in Digital Design")
- [Hero on the HarvardSites Drupal User Guide](https://drupal.harvardsites.harvard.edu/hero)



 

 



 

 See also:- [ Images ](/how-guides-topics/images)
- [ Media ](/how-guides-topics/media)
- [ Performance ](/how-guides-topics/performance)
- [ How-To Guides ](/page-categories/how-guides)