Skip to main content

What are the Recommended Image Sizes?

  • Updated

Versions 1.0.0-1.7.3

The majority of images within the Avenue theme take the width into consideration and will accommodate a variety of heights.

In this section...

 

When possible, it is always best practice to use a PNG file for your logos.  JPEG may reduce file size, but they will also reduce clarity and you want your brand looking sharp.

It is recommended to use an image width double the 'Max logo width' setting to keep your logos sharp. The slider provides a minimum of 40px wide to a max of 250px with 10px steps in between.

The overall height of your logo will determine the height of your Header Navigation to the right.

 

Banners, Backgrounds & Slideshows

There are 2 slideshow sections & banner images can be found in various home sections, collections, products & some pages like contact.

Width

The banner image has the option of being as wide as the screen or only as wide as the content container. Refer to the following table to reference content widths & optimal image sizing:

Setting Desktop Width Minimum Image Width
Full width checked 100% 1900px
Full width unchecked 1200px 1200px

 

Height

The overall height of the banner in relation to the height of the screen. 0-5% is the minimum, and it steps up by 5 to a maximum of 100%.

 

Image with Text Overlay

The design is based on a 12 column, 1200px wide layout. Refer to the following table to reference content widths & optimal image sizing:

Setting Desktop Width Minimum Image Width
12.5% 200px 600px
25% 300px 600px
33% 400px 600px
50% 600px 600px
66% 800px 800px
75% 900px 900px
87.5% 1000px 1000px
100% 1200px 1200px

 

Product Images

To provide a good zoom but keep file sizes low, it is recommended to use 1024 x 1024px images.

 

Blogs

Post Featured Image

The article featured image is used on the blog category page. The lead article background image dimensions depend on 2 options:

Setting Desktop Width Minimum Image Width
Full width checked 100% 1900px
Full width unchecked 1200px 1200px

 

Post Content Image

Max width of 680px

 

Theme Setting: Product Grids and Rows > Swatches

Custom images should be 140 x 140px PNG's

 

General > Gift Card

1024 x 1024px

 

Checkout

Banner

1000 x 400px

 

Logo

There are 3 sizes available, each with a max height:

  • Small: 40px
  • Medium: 60px
  • Large: 80px

 

Logo List

The size of the logos will dynamically resize depending on the number of blocks added.  This will help any combination of logos align with other content throughout the site.  It is recommended to use PNG files to keep your logo edges sharp and to double the dimensions of the provided space.  To help size your logos appropriately, refer to the following:

Image Blocks Available Desktop Width Recommended Image Width
1, 3 & 5 220px 440px
2, 4 & 6 180px 360px

 

There are 2 options for images in the footer. To help size your images appropriately & accommodate responsive sizing:

    • Main: 500px max width
    • Content Block:
Setting Desktop Width Maximum Width
25% 300px 1200px
33% 400px 1200px
50% 600px 1200px
66% 800px 1200px
75% 900px 1200px
87.5% 1000px 1200px
100% 1200px 1200px