Recommended Image Sizes for BRS

What This Is

Different areas of BRS use different image sizes and aspect ratios. Uploading the correct dimensions helps your website look clean, professional, and properly aligned across desktop and mobile devices.

The most common problem users run into is not image quality — it is incorrect aspect ratio.

Example:

  • Uploading a tall portrait image into a wide banner area
  • Uploading a square image into a rectangular section
  • Uploading extremely large images that get aggressively cropped

When the aspect ratio does not match the space it is being displayed in, parts of the image may get cut off automatically.

This is why some users think:

  • “BRS cropped my image”
  • “My logo is zoomed in”
  • “The banner cut off important text”

In reality, the uploaded image shape simply did not match the display area.


Recommended Image Sizes

Website Area Recommended Size Notes
Category Images 400 × 300 px Best for category thumbnails and browsing sections
Hero/Homepage Banner 1920 × 700 px Wide horizontal image for homepage banners
Product Images 1000 × 1000 px minimum Square images work best for consistent product layouts
About Us Images / Badges 500 × 500 px Works well for team photos, guarantees, and trust badges
Favicon 512 × 512 px Square logo image used for browser tabs and bookmarks

How to Avoid Cropping Problems

Before uploading:

  • Match the recommended aspect ratio as closely as possible
  • Keep important text and faces centered
  • Avoid placing critical information near edges
  • Leave some empty space around logos and subjects

Example:

A homepage banner is very wide and short.

If you upload:

  • A tall phone photo
  • A square flyer
  • A portrait-style image

parts of the image will likely be cropped automatically to fit the banner space.


Best Practices

Product Images

  • Use clean lighting
  • Avoid cluttered backgrounds
  • Keep products centered
  • Use consistent sizing across all products

Homepage Banners

  • Use wide landscape images
  • Keep text away from edges
  • Avoid placing important elements too high or too low

Category Images

  • Keep visuals simple and easy to recognize
  • Avoid excessive text overlays

Favicons

  • Use simple logos
  • Avoid tiny text
  • Make sure the design is readable at very small sizes

If you still need to upload your main logo and configure branding, see: How to Upload Your Logo and Set Brand Colors.

If you specifically need to configure the browser tab icon, see: How to Add a Favicon.


Free Tools for Resizing Images

Free tools commonly used by BRS customers include:

  • Canva
  • Adobe Express
  • Pixlr

These tools make it easy to:

  • Resize images
  • Crop images correctly
  • Export optimized web versions
  • Create matching aspect ratios before uploading

Important Notes

Uploading a larger image does not automatically make it look better.

Extremely oversized files can:

  • Slow down page loading
  • Hurt mobile performance
  • Reduce customer experience

The goal is not maximum size.

The goal is correct dimensions and correct aspect ratio.