> For the complete documentation index, see [llms.txt](https://hifunnel.gitbook.io/hifunnel-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hifunnel.gitbook.io/hifunnel-help-center/documentation/website/page/recommended-image-dimensions-for-page-templates.md).

# Recommended Image Dimensions for Page Templates

Recommended image dimensions, resolutions, aspect ratios, and file formats for Hero banners, cards, logos, and background images in Hifunnel.

Using recommended image dimensions and resolutions ensures your landing pages load quickly while maintaining crisp visual quality across desktop monitors, retina displays, and mobile devices.

Refer to this comprehensive guide when designing graphics and uploading assets to your Hifunnel Page Builder.

***

## Quick Reference Summary Table

| Asset Type                     | Recommended Dimensions (Width x Height) | Aspect Ratio | Max File Size | File Format |
| ------------------------------ | --------------------------------------- | ------------ | ------------- | ----------- |
| **Hero Background Image**      | 1920 x 1080 px                          | 16:9         | < 500 KB      | JPG / WebP  |
| **Section Background Image**   | 1920 x 1080 px (or 1920 x 800 px)       | Landscape    | < 400 KB      | JPG / WebP  |
| **Feature / Card Image**       | 800 x 600 px (or 600 x 600 px)          | 4:3 or 1:1   | < 200 KB      | JPG / WebP  |
| **Product / Course Thumbnail** | 1280 x 720 px                           | 16:9         | < 300 KB      | JPG / WebP  |
| **Header Logo**                | 400 x 120 px (Transparent)              | Variable     | < 100 KB      | PNG / SVG   |
| **Favicon Icon**               | 512 x 512 px (Square)                   | 1:1          | < 50 KB       | PNG / ICO   |
| **Social Sharing (OG Image)**  | 1200 x 630 px                           | 1.91:1       | < 300 KB      | JPG / PNG   |
| **Avatar / Testimonial Photo** | 300 x 300 px (Square)                   | 1:1          | < 100 KB      | JPG / WebP  |

***

## Detailed Category Guidelines

### 1. Hero & Section Background Images

* **Recommended Resolution**: 1920 x 1080 px (Full HD)
* **Optimization**: Compress images using free compression tools (e.g., [TinyPNG](https://tinypng.com/) or [Canva](https://www.canva.com/)) before uploading. Keep background file sizes under 500 KB to maintain fast page load speeds.

### 2. Header Logo & Branding

* **Header Logo**: 400 x 120 px (PNG format with transparent background).
* **Footer Logo**: 300 x 100 px.
* **Favicon**: 512 x 512 px square PNG.

### 3. Feature Cards & Testimonials

* **Feature Cards**: 800 x 600 px (4:3 ratio) or 600 x 600 px (Square 1:1 ratio).
* **Testimonial Headshots**: 300 x 300 px square crop to ensure perfect circular avatars.

### 4. Video Thumbnails & Product Covers

* **Course & Video Cover**: 1280 x 720 px (16:9 ratio).

***

## Image Optimization Best Practices

{% hint style="info" %}
**3 Golden Rules for High-Speed Pages:**

1. **Use WebP or Compressed JPG**: WebP offers up to 30% smaller file size compared to standard JPG without loss of quality.
2. **Compress Before Uploading**: Always compress images using tools like TinyPNG to ensure image file size stays under 300 KB.
3. **Avoid Uploading Raw Camera Photos**: Never upload uncompressed 10MB+ raw camera photos directly to your landing pages.
   {% endhint %}