Images come in all shapes and sizes but not all images work well on a website. To be sure images look great on your Bandzoogle website, please use the image sizing guidelines below.

This help article includes the following:

  • Optimal sizing:
    • Header image
    • Logo
    • Content images
    • Blog images
    • Photo Gallery images
    • Mailing List images
  • Troubleshooting:
    • Upload issues
    • Images displaying sideways
    • Oversized images

Note: Images must be in JPG, PNG, or GIF format. For the header image, animated GIF files will work in the editor screen but will not be animated on the live website. For movement in the header use the video header option instead.

Optimal sizing

This help article covers image sizing guidelines. For more information on each of these features or tools, please click the title in each section below.

Header images

The most important image on your website is your header image, since it’s the first image that displays on your website. Many Bandzoogle templates offer a header image container and the placement depends on the template design. You can change templates at any time to experiment with different header image placement options.

The header image container offers two options for how your image fills the area: ‘Fill’ or ‘Fit.’ The ‘fill header area’ option will adjust your image within the device’s frame it’s viewed on. The ‘fit header area’ option will keep the full image in view on all screens, with framing options of your choice.

To learn more about header image styling options, please review the ‘Header images’ Help article.

In addition to the ‘Header images’ Help article, here is a short list of guidelines to follow for your header image:

  • Use a standard web resolution of 72 dpi (dots per inch).
  • The image should be at least 2800 pixels wide.
  • Use landscape (horizontal) images instead of tall portrait (vertical) images.
  • Use images where the focus (the subject) is in the center of the photo. Avoid using images that have important visual elements or text close to the outside edges - use those images within the content area of your site instead.

Note: Any text added to your header should be added through the Site Title section of the ‘Edit Theme’ tab, or in a Call-to-action feature through the Edit Content tab.

Logo

Logo image files must be in JPG, PNG, or GIF format. We recommend using a PNG with a transparent background, so that your site can be seen behind the logo shape.

Warning: The logo option should not be used as your header image as this can cause issues with the site’s display. The logo option is designed to display a smaller image that sits in the menu section or overtop of the header image. Please use the header image tools in the ‘Edit Content’ tab to set up your main header image.

  • Logos will be placed in an area of your header that likely won’t exceed 1024 pixels in width, so uploading an image file of that size is optimal.

Some templates place the site logo image overtop of the header image, while other templates place the logo within the navigation menu bar.

  • For logos over the header: Many themes make your logo ‘responsive’, so the size of your logo may change depending on the size of the browser window and or screen used to view your site.
  • For logos in the navigation menu: To avoid stretching the navigation bar (and possibly causing display issues), it’s best to use a horizontal or ‘landscape’ logo, instead of a square, vertical, or ‘portrait’ style logo.

Logo resizing options:

  • Logo Size: Adjusts the size of your logo on desktop. Increase or decrease the percentage using the slider and see the live preview of how it displays on the right.
  • Custom Mobile Size: Toggle this on to customize the size of your logo on mobile devices. Click the 'Tablet' or 'Mobile' icons in the top-right to adjust your live preview accordingly as your work.
    • Tablet Logo size: Adjust the size of your logo for display on all tablets.
    • Mobile Logo Size: Adjust your logo sizing for display on all smart phones.

Content images

There are no set dimensions for images in the content section. But all sizes of images uploaded to your site are scaled to display nicely on the website. Here are the scaled dimensions for the Image feature (for desktop/laptop computers):

  • We scale large images to the maximum display of 940 x 725 pixels when they are added to a full-width column.
  • If you upload an image smaller than these dimensions to a full-width column, the image will display with its original file dimensions.
  • 'Image and Text' feature images should be at least 1400 pixels in width. There are various layout options available that will scale your image and you can apply fruther image adjustments within the feature.

Blog images

The Blog feature offers two places to upload photos: the thumbnail image for a post, and images within the post content.

  • Thumbnail image: Must be at least 500 x 500 pixels. The image will scale depending on the display format and column configuration you choose.
  • Post images: Although there are no set dimensions for image uploads, we recommend uploading images under 25MB.
  • Once uploaded you can resize images using the in-feature settings to make it small, medium, large, or original-size.

Photo gallery images

Although there are no set dimensions for your photo gallery images, we recommend using images between 500 x 1500 pixels to display properly. The feature will respond to the size of images that you upload, and if you would like to resize them, you can use the in-feature option to make it small, medium, large, or original-size.

Mailing List images

The Mailing List feature offers two options to add photos: the image in the campaign header, and images within the campaign content.

  • Header image: Must be at least 600 pixels wide. The image will scale depending on the size of the mail program used to view the campaign.
  • Email images: Although there are no set dimensions for image uploads, we recommend uploading images under 25MB.
  • Uploaded images can be resized using the in-feature options to make them small, medium, large, or original-size.

Troubleshooting Image Issues

Upload issues

If you are having trouble uploading images, try these steps outlined below. If these don’t help, please contact our support team from the HELP tab in your account or here. Support is available 7 days a week.

  • Disable any toolbars, browser extensions, or web products that may have been added to your browser. These can interfere with the website builder.
  • Check if you have any internet security programs running. Some examples are AVG, Norton, and McAfee. If they are running, you need to temporarily disable them as they may be blocking the website builder functions.

Images displaying sideways

This can happen if the mobile device is selecting the picture orientation based on the way the image was taken or saved prior to uploading. If the image was captured sideways on a mobile device, it will display that way on other mobile devices. In any image feature, you can use the rotate options to resolve this issue.

Oversized images

If your header or background image appears too large and can't be zoomed out, this usually means the header image isn't a suitable shape for the design you have chosen. Most templates work best with a landscape header image (wide), instead of a portrait image (tall).

You have 4 options:

  1. Use the live header editor under Edit content > Edit image to drag and reposition the header image and crop it to the appropriate size
  2. Choose a landscape image instead. This is an image that is horizontal, or wider than it is tall.
  3. Change themes under Design > Choose a new theme. You can change themes as often as you’d like, without losing your website content.
  4. Use portrait images in the content area of your website (instead of the header.) Use the layout options to create a 2 or 3 column layout, or use the Image and Text feature for various layout options for your portrait image.