#  Choose the right image size and format 

 



 ##  

  expand\_more  

 
  

 

Images that are too large or in the wrong format can slow your site and make it harder to maintain. Choosing the right size and file type helps your site load quickly while keeping images clear.



 

##  Why it matters 

 



 

**Performance:** Heavy images are one of the biggest causes of slow load times.

**Clarity:** Crisp images help your content look professional on all devices.

**Consistency:** Preparing images at the correct aspect ratio avoids awkward crops or backgrounds.



 



      ![Formatted images](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2025-12/images_1.png?itok=IUtWRnDW) 

 

 

  

 



 

 

 

##  How to do it 

- Use **JPG** for photos and complex visuals.
- Use **PNG** only for logos, line art, or transparency.
- Use **SVG** for icons and simple graphics.
- Export at close to the **maximum display width**: Hero ~1920px, 50/50 Card ~800px, Vertical Card ~600px, List thumbnails ~400px.
- Keep most images under **200 KB**.
- Test across devices to confirm clarity.



 

##  Accessibility tip 

Every non-decorative image must include descriptive alt text.



 

##  Resources 

- [Adding an Image on the HarvardSites Drupal user Guide](https://drupal.harvardsites.harvard.edu/adding-an-image)
- [Image Sizes on the HarvardSites Drupal User Guide](https://drupal.harvardsites.harvard.edu/resource/image-sizes)
- [What size should I make my images? on the HarvardSites Drupal User Guide](https://drupal.harvardsites.harvard.edu/faq/what-size-should-i-make-my-images)



 

 



 

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