Image rules
Guidelines for sharp, fast-loading images in emails and on funnels or landing pages.
Email template image recommendations
Section titled “Email template image recommendations”-
Logo: Display around 120–200 px wide; upload around 240–400 px wide for sharpness. For a typical horizontal logo, 200 × 50 px display / 400 × 100 px upload works well. Product documentation often uses a header-logo example around 50 × 200 px as a sensible display size.
-
Top banner / hero image: 600 × 200–300 px display; upload 1200 × 400–600 px. That matches the CRM’s default email width and the common email-builder guidance to use roughly 600–660 px minimum, or double that for retina screens.
-
Full-width content image: 600 px wide display; upload 1200 px wide.
-
2-column email image: About 264–330 px wide display; upload about 528–660 px wide.
-
3-column product/image block: About 164–220 px wide display; upload about 328–440 px wide.
-
Social icons: Show them around 24–32 px; upload 48–64 px so they stay crisp. That follows the same “upload roughly 2× the rendered size” rule used for sharp email images.
-
Email background image: Use only if really needed; keep it lightweight and roughly 1200 px wide or less. Note that larger background files load slower, and not all email clients support background images, so a fallback background color is smart.
Funnel / landing page image recommendations
Section titled “Funnel / landing page image recommendations”-
Header / navbar logo: Usually 150–250 px wide on the page; upload roughly 2× that size. A common working file is 400 × 100 px for a horizontal logo. Product documentation uses a header-logo example around 50 × 200 px as a reasonable display size.
-
Hero image / main section image: 1600 × 900 px is a very safe working size. If you want extra headroom for large screens, use 1920 × 1080 px. The CRM recommends 16:9 images such as 1600 × 900 or 1920 × 1080 for slider-style hero visuals.
-
Image slider / gallery images: Keep every slide the same aspect ratio, ideally 16:9, using 1600 × 900 or 1920 × 1080.
-
Regular section/content image: 800–1200 px wide is usually enough for most content blocks, because sizing images close to their real display size avoids uploading giant files.
-
Team photo / testimonial avatar: 300 × 300 px or 400 × 400 px works cleanly for square profile images, with separate mobile sizing if needed.
-
Favicon: Make it square. Google says it must be at least 8 × 8 px, and recommends larger than 48 × 48 px; MDN notes 16 × 16 px is a common browser favicon size. A good workflow is to design from a 512 × 512 px master and export smaller favicon versions from it.
Best file formats
Section titled “Best file formats”For funnel / landing page photos, use JPG or WebP; for graphics that need transparency, use PNG. The CRM media library supports common image formats including JPEG/JPG, PNG, SVG, WEBP, GIF, TIFF, and HEIC. For email images, safer/common formats in mainstream email builders are JPG/JPEG, PNG, and GIF.
Best loading rule
Section titled “Best loading rule”If you want the fastest, smoothest setup in the CRM, use this:
- Email full-width image: 600 px display / 1200 px upload
- Landing page hero: 1600 × 900 px
- Logo: upload at about 2× the display size
- Always compress before upload
- Avoid oversized images just because the CRM can accept them
Resize images before upload where possible—that’s the sweet spot between sharp and fast-loading. Mailchimp’s image guidance also recommends avoiding oversized files and keeping images under about 1 MB.
Reference table (CRM)
Section titled “Reference table (CRM)”| Item | Best display size (CRM) | Good upload size | Best format | Ideal file size | Notes |
|---|---|---|---|---|---|
| Logo (email header) | 120–200 px wide | 240–400 px wide | PNG | 20–80 KB | A logo around 50 × 200 px often fits a header well; higher-resolution uploads constrained to display size look sharper on high-density screens. |
| Logo (landing page / website header) | 150–250 px wide | 300–500 px wide | PNG or SVG | 20–100 KB | The CRM media library supports PNG, JPEG, SVG, WEBP, and more. SVG is ideal for crisp logos on websites. |
| Email hero / banner | 600 × 200–300 px | 1200 × 400–600 px | JPG or PNG | 80–250 KB | Matches the CRM’s default email content width; use roughly 600–1200 px wide assets for 600 px layouts (including retina). |
| Email full-width body image | 600 px wide | 1200 px wide | JPG or PNG | 80–200 KB | Best for a typical single-column email section. Keep compressed and under 1 MB. |
| Email 2-column image | 264–330 px wide | 528–660 px wide | JPG or PNG | 50–150 KB | Aligns with common two-column email layouts (Mailchimp). |
| Email 3-column / product image | 164–220 px wide | 328–440 px wide | JPG or PNG | 30–100 KB | Suited to product grids and three-column promo blocks (Mailchimp). |
| Social media icon in email/footer | 24–32 px | 48–64 px | PNG | 5–20 KB | Keep icons small and light for faster loading. Email image elements commonly support JPG, PNG, GIF. |
| Landing page hero image | Full section width | 1600 × 900 px | JPG or WEBP | 150–400 KB | 16:9 works well (e.g. 1600 × 900 or 1920 × 1080) for slider-style hero areas. |
| Landing page large hero (extra wide) | Full section width | 1920 × 1080 px | JPG or WEBP | 200–500 KB | Use when the layout truly needs it; very large files slow pages—resize before upload. |
| Landing page section/content image | 600–1200 px wide | 800–1200 px wide | JPG or WEBP | 80–250 KB | Upload close to real display size; avoid oversized files. |
| Background image (page section) | Depends on section | 1600–1920 px wide | JPG or WEBP | 150–400 KB | Use sparingly. Heavy optimization can look blurry; balance quality and file size. |
| Image slider / gallery image | Same ratio on every slide | 1600 × 900 px | JPG or WEBP | 150–350 KB each | Keep 16:9 consistent across slides. |
| Team / testimonial profile photo | 150–250 px shown | 300 × 300 or 400 × 400 px | JPG or PNG | 30–120 KB | Square images work well; you can set separate desktop/mobile sizes where supported. |
| Favicon / site icon | 16–48 px shown | 512 × 512 px master | PNG | 10–50 KB | One square source file; export smaller sizes for browsers. |
Easiest rule to remember
Section titled “Easiest rule to remember”| Use case | Safe size to use |
|---|---|
| Email banner | 1200 × 400 px |
| Email normal image | 1200 px wide max |
| Email logo | 300–400 px wide |
| Website hero image | 1600 × 900 px |
| Website regular image | 800–1200 px wide |
| Profile/testimonial image | 400 × 400 px |
| Social icon | 64 × 64 px |
Best format choice
Section titled “Best format choice”| Image type | Best format |
|---|---|
| Photo | JPG or WEBP |
| Transparent logo | PNG |
| Website logo that must stay super sharp | SVG |
| Email image | JPG or PNG |
| Small icon | PNG |