Image Size Recommendations in Palo Alto
Here we will cover recommended image sizes you can use within various sections on the theme. These include the slideshow section, collection banners, blog post featured images, logo, product images, and product feature section images.
The key across all image sections is to keep the focal point of the image in the center. For example, if you're adding text or graphics on top of the image they can easily be cropped out of view.
Slideshow Section Images
The Slideshow section allows you to specify desktop and mobile images as well as specify a slide height.
Image width
Desktop: We recommend using images 1920px in width.
Mobile: We recommend using images 1200px in width.
Image height
The theme provides an option to specify various slide height sizes: Full Screen Height, Image Height, 750px, 650px, 550px,450px.
Definite sizes: If you want to use a definite slide height (750px, 650px, 550px or 450px), make sure your image height is around that size.
For example, if you'd like to use a slide image height of 750px, you'll want to save your image around this same size. This will prevent image cropping both towards the top and bottom. This applies to the other slide height sizes (650px, 550px and 450px).
Full screen height: This option will fit the images to the entire height of the browser window. This option is recommended for images with medium height sizes and not for images with large height sizes, as these will be cropped at the bottom of the image.
Original: Setting this option will have the images displayed in the original height as uploaded. This option is quite useful if you want to have the full image displayed as there will be no cropping of the images. It is also recommended using equal sized images in terms of height for this option to maintain consistency in the slide height as the slideshow advances.
Collection Banner Images
For collection images, we recommend using an image ratio of 2:1 and image sizes around 1400px by 700px.
Product Images
We recommend using images at a ratio of 1:1 and sizes around 1024px by 1024px or smaller images of about 600px by 600px.
Blog Images
The theme provides an option to adjust image aspect ratios for the blog page.
Aspect Ratio 1.0.1
This is the standard setting which works well with square shaped images. We recommend this square ratio because the images will be cropped square on the blog overview page and they'll display in their uploaded ratio on the individual blog post page.
Aspect Ratio 1.5.1
This ratio will result in taller images or rather portrait images.
Aspect Ratio 0.5.1
This ratio can be used to display wider images. We recommend it for landscape images.
Logo Images
We recommend using logo images at a width around 440px.
Product Feature Images
For product images, the theme provides an option to specify either a portrait or square image layout:
For portrait layouts, we suggest using sizes around 300px by 600px (1:2 image ratio).
Square Image Layout
We recommend using square image sizes around 600px by 600px.
