The majority of images within the Avenue theme take the width into consideration and will accommodate a variety of heights.
In this section...
- Logo's
- Full vs Container Width Images
- Columns & Grids
- Header
- Slideshow
- Product Images
- Collections
- Blog Posts
- Theme Setting > General > Gift Card
- Theme Setting > Favicon
- Theme Setting > Checkout
Logo's
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.
Full vs Container Width Images
Some sections like the Slideshow & Image with text overlay have 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 | Min Image Width | Max Image Width | Mobile |
|---|---|---|---|---|
| Full width checked | 100% | 1900px | 2560px | 768px |
| Full width unchecked | 1280px | 1280px | -- | 768px |
This is not a definitive guide since overall height may affect the background image width. Below is an example using a 1900x800px image in a 1280px wide section container:
The same image would be stretched to almost twice the size
Columns & Grids
Columns
Many sections divide the content in half (2 columns) or may have the option to set the columns, like the Image Gallery. Refer to the following table to reference content widths & optimal image sizing:
| Columns | Desktop Width | Minimum Image Width |
|---|---|---|
| 1 | 280px | 320px |
| 2 | 600px | 600px |
| 3 | 920px | 960px |
| 4 | 1240px | 1280px |
Similar to the Full vs Container Width Images, the height of each image can affect the other, so it is recommended to use image with similar heights. The code will serve the proper sized image for mobile
Grids
The Collections List Page and sections like Featured Collection can set the number of items per row. If you are not using the default images and need to create your own:
| Items Per Row | Desktop Width | Minimum Image Width |
|---|---|---|
| 1 | 1240px | 1280px |
| 2 | 605px | 600px |
| 3 | 394px | 480px |
| 4 | 288px | 320px |
| 5 | 224px | 220px |
Header
Mega Menu Promotion
| Screen Size | Minimum Image Width |
|---|---|
| Mobile | 480px |
| Desktop | 320px |
Story Bar
A minimum of 600px wide is recommended
Slideshow
Image width depends on the 'Text layout' setting
| Setting | Minimum Image Width | Max Image Width | Mobile |
|---|---|---|---|
| Left & Right, or Full width mobile | 768px | -- | 768px |
| Full width | 1900px | 2560px | 768px |
Product Images
To provide a good zoom but keep file sizes low, it is recommended to use images with a minimum width of 1024px
Collections
Image
A minimum of 960px wide is recommended
| Setting | Height | Minimum Image Width |
|---|---|---|
| Small | 25% of screen height | 960px |
| Medium | 35% of screen height | 960px |
| Large | 50% of screen height | 960px |
| Original Aspect Ratio | Height of image | 960px |
Promotional Image
The desktop image will follow the Grids recommendations above, but mobile should use a minimum width of 480px
Blog Posts
The article featured image has options for the image height. It is recommended to start with an image of at least 1280px wide:
| Setting | Height | Minimum Image Width |
|---|---|---|
| Small | 25% of screen height | 1280px |
| Medium | 35% of screen height | 1280px |
| Large | 50% of screen height | 1280px |
| Original Aspect Ratio | Height of image | 1280px |
Images embedded in the content should have a max-width of 768px. this will allow the images to 'overlap' the content column
Theme Settings > General > Gift Card
A minimum of 600px wide is recommended
Theme Settings > Favicon
32 x 32px
Theme Settings > Checkout
Banner
1000 x 400px
Logo
There are 3 sizes available, each with a max height:
- Small: 40px
- Medium: 60px
- Large: 80px