Optimising your images before uploading them to your website is important to managing your site storage. In this article we look at the optimum sizes for your images in each of the Layout tools in our Framework.
All image sizes given in this article are in pixels (px).
As a general guideline, you want to have at least 72 PPI (pixel per inch) for web images, but 144 PPI is better for devices with Retina screens to ensure crisp, high-quality visuals. The higher the PPI the more storage your image will take up.
Site Icon
Your site image is key for branding your site. Everyone's logos are different shapes and sizes. For guidance keep the ratio the same, but make it no wider than 330px.
Favicon
The favicon is the little image that appears on the browser tab as is saved next to the webpage in favourites. It is often a mini visual of your logo. This image should be set to 512 x 512.
Hero Layout
When you optimise images for use in the Hero, you have three options depending on the height or your Hero.
- 1920 x 500
- 1920 x 400
- 1920 x 350
You can see the height of your Hero in the Edit view of the Hero Layout.
Call to Action
There is no restriction of the image size being used, however consider optimising the image to fit with your content, the larger the file the more storage you will use.
Campaign / Twitter
The size of images used in this Layout are 600 x 350.
Content Blocks & Content Blocks 2 Col
The size of images used in this Layout are 450 x 350. Anything small may result in the image being distorted.
Event Listing
There is no restriction of the image size being used, however consider optimising the image to fit with your content, the larger the file the more storage you will use.
Gallery
The Gallery Layout provides you with the option to pick images already in your library. These images will be displayed depending on how they have been uploaded. Consider the way image to fit with your content, If the images are different sizes, it can make your page look unorganised.
Partners
When adding a Partner the image is limited to 300px wide. Height of the image should meet the appropriate ratio for the 300px wide.
Testimonials
There is no restriction of the image size being used, however consider optimising the image to fit with your content, the larger the file the more storage you will use.
Text Block
There is no restriction of the image size being used, however consider optimising the image to fit with your content, the larger the file the more storage you will use.
Text & Image
The size of images used in this Layout are 450 x 350. Anything small may result in the image being distorted.
Text & Text
There is no restriction of the image size being used, however consider optimising the image to fit with your content, the larger the file the more storage you will use.
Twitter / CTA
There is no restriction of the image size being used, however consider optimising the image to fit with your content, the larger the file the more storage you will use.