One of the keys to a fast, professional-looking website is using the right image sizes in the right places. Uploading overly large or incorrectly sized images can slow down your site or make your design look messy. In this lesson, you’ll learn which image dimensions work best for key areas of your site.

📌 Why Image Size Matters

• ✅ Keeps your website fast to load

• ✅ Ensures images look sharp and well-positioned

• ✅ Prevents distortion or awkward cropping

• ✅ Helps maintain a consistent brand look

📏 Recommended Image Sizes by Section

Here are the optimal sizes for common image placements:

1. Hero Background

• Size: 2,500 x 1,250 px

• Purpose: This is the large banner image at the top of your homepage or landing page.

• Tips:

  • Use landscape images with minimal text.

  • Make sure important parts (like a person or product) are centered—some edges may be cropped on mobile.

2. Footer Call-to-Action Background

• Size: 2,000 x 1,125 px

• Purpose: A background image behind your newsletter signup, final CTA, or contact prompt in the footer.

• Tips:

  • Go for clean or subtle backgrounds (like patterns or color overlays) so the text is easy to read.

  • Use darker overlays if the background is too bright.

3. Team Portraits

• Size: 1,080 x 1,248 px

• Purpose: Individual headshots for your team or about page.

• Tips:

  • Use vertical orientation.

  • Keep backgrounds consistent (e.g., all white or all blurred office scenes).

  • Crop from the chest up for better visibility.

4. Logo

• Size: 772 x 334 px

• Purpose: Displayed in the header, footer, and sometimes in the browser tab (favicon).

• Tips:

  • Save as .PNG with transparent background.

  • Consider uploading a smaller version for mobile (some builders allow you to set both).

5. Featured Blog Image

• Size: 1,280 x 720 px

• Purpose: The thumbnail that appears when sharing a blog post or viewing the blog archive.

• Tips:

  • Use high-quality landscape images.

  • Add a title overlay if your website theme displays it.

  • Keep it consistent across all blog posts for a uniform look.

6. About Section Image

• Size: 1,280 x 720 px

• Purpose: An image beside your company or founder bio.

• Tips:

  • Choose a photo that represents your work or story (e.g., workspace, behind-the-scenes, the founder).

  • Make sure it’s not too busy, especially if text is placed next to or over it.

7. Client Logos

• Size: 450 x 208 px

• Purpose: Display logos of your clients or partners, typically in a grid or slider.

• Tips:

  • Use high-contrast or monochrome versions for consistency.

  • Ensure background is transparent if possible.

  • Keep all logos the same height visually, even if widths vary.

🛠️ Bonus Tips

• Export as JPG for photos and PNG for logos or images with transparency.

• Keep image file sizes under 300 KB when possible (especially for blog and hero images).