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
- Content images
- Blog images
- Photo Gallery images
- Mailing List images
- 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.
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.
All Bandzoogle templates are responsive to viewing on mobile. Responsive headers will ‘adapt’ to screen sizes, from desktop to mobile. This means the image you upload will be scaled proportionally to display in the header space for different screen sizes.
There are no set dimensions for the header image as it will resize to fill the screen. We know this can be vague and frustrating so 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 1500 pixels wide. The height should be in a similar proportion, 1000 - 1500 pixels.
- While your image will always maintain its proportions, the space it is contained in will change. For example, if you add an image that is wide but not very high, the sides of the image may get cut off when the image is viewed on narrow and tall screens, like on mobile devices.
- Use landscape (horizontal) images instead of tall portrait (vertical) images.
- Use images where the focus 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 in 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 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.
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.
Note: The Image and Text feature offers various layout options, so images there will scale depending on the selected layout and column configuration.
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.
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.
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
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.
- Make sure you have a current Flash player installed on your computer. You can download a new version of Flash here. After you've updated Flash, close and reopen your browser.
- There may be a web browser setting blocking Flash. You can try restoring your internet settings to clear this problem.
- 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 images 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.
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:
- Use the live header editor under Edit content > Edit image to drag and reposition the header image and crop it to the appropriate size
- Choose a landscape image instead. This is an image that is horizontal, or wider than it is tall.
- Change themes under Design > Choose a new theme. You can change themes as often as you’d like, without losing your website content.
- 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.