Skip to content

Image rules

Guidelines for sharp, fast-loading images in emails and on funnels or landing pages.

  • 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 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.

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.

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 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.

ItemBest display size (CRM)Good upload sizeBest formatIdeal file sizeNotes
Logo (email header)120–200 px wide240–400 px widePNG20–80 KBA 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 wide300–500 px widePNG or SVG20–100 KBThe CRM media library supports PNG, JPEG, SVG, WEBP, and more. SVG is ideal for crisp logos on websites.
Email hero / banner600 × 200–300 px1200 × 400–600 pxJPG or PNG80–250 KBMatches the CRM’s default email content width; use roughly 600–1200 px wide assets for 600 px layouts (including retina).
Email full-width body image600 px wide1200 px wideJPG or PNG80–200 KBBest for a typical single-column email section. Keep compressed and under 1 MB.
Email 2-column image264–330 px wide528–660 px wideJPG or PNG50–150 KBAligns with common two-column email layouts (Mailchimp).
Email 3-column / product image164–220 px wide328–440 px wideJPG or PNG30–100 KBSuited to product grids and three-column promo blocks (Mailchimp).
Social media icon in email/footer24–32 px48–64 pxPNG5–20 KBKeep icons small and light for faster loading. Email image elements commonly support JPG, PNG, GIF.
Landing page hero imageFull section width1600 × 900 pxJPG or WEBP150–400 KB16:9 works well (e.g. 1600 × 900 or 1920 × 1080) for slider-style hero areas.
Landing page large hero (extra wide)Full section width1920 × 1080 pxJPG or WEBP200–500 KBUse when the layout truly needs it; very large files slow pages—resize before upload.
Landing page section/content image600–1200 px wide800–1200 px wideJPG or WEBP80–250 KBUpload close to real display size; avoid oversized files.
Background image (page section)Depends on section1600–1920 px wideJPG or WEBP150–400 KBUse sparingly. Heavy optimization can look blurry; balance quality and file size.
Image slider / gallery imageSame ratio on every slide1600 × 900 pxJPG or WEBP150–350 KB eachKeep 16:9 consistent across slides.
Team / testimonial profile photo150–250 px shown300 × 300 or 400 × 400 pxJPG or PNG30–120 KBSquare images work well; you can set separate desktop/mobile sizes where supported.
Favicon / site icon16–48 px shown512 × 512 px masterPNG10–50 KBOne square source file; export smaller sizes for browsers.
Use caseSafe size to use
Email banner1200 × 400 px
Email normal image1200 px wide max
Email logo300–400 px wide
Website hero image1600 × 900 px
Website regular image800–1200 px wide
Profile/testimonial image400 × 400 px
Social icon64 × 64 px
Image typeBest format
PhotoJPG or WEBP
Transparent logoPNG
Website logo that must stay super sharpSVG
Email imageJPG or PNG
Small iconPNG