Images and performance
Prepare images for their display area
| Placement | Implemented behavior | Preparation guidance |
|---|---|---|
| Team portraits | 4:5 frame, cover sizing | Use portraits with room around the face; edges can be cropped. |
| Partner logos | 4:3 frame, contain sizing | Keep logos legible with sufficient surrounding space. The full image fits inside the frame. |
| Product Hero, Product Detail Hero, Product Directory, Product Portfolio | 4:3 frame, contain sizing | Use clear product imagery. Empty space can remain around images with a different ratio. |
| Clinical Applications and Resource Directory images | 4:3 frame, contain sizing | Choose images that remain understandable when scaled down. |
| Editorial Feature | Cover cropping in the desktop media layout | Keep important subjects away from edges and check both desktop and mobile. No single fixed ratio is prescribed. |
| Blog featured images | Responsive image display without a fixed crop frame | Use an image suitable at its natural proportions; check the listing and article separately. |
| Header/footer logo | Size constrained by branding styles | Prefer a clear logo that remains readable at the configured maximum width. |
No particular upload pixel dimensions are required by this guide. Choose sufficient resolution for the intended display without uploading unnecessarily large originals.
Improve loading without sacrificing clarity
Compress images appropriately before upload and use formats supported by your HubSpot workflow. Avoid putting essential copy inside images. Add useful alt text and check whether a logo is inherited or overridden.
Many module images default to lazy loading, while introductory hero imagery can load eagerly. Where a loading control is exposed, choose it according to placement; do not force every image to load immediately. The blog listing lazily loads featured images, while the post's featured image loads eagerly.
Review pages with actual images, forms, and embeds on a mobile connection. Third-party scripts, oversized media, and custom content can change loading behavior. The theme does not guarantee a performance score.
See responsive and accessibility guidance for the final visual review.