With our focus on more modern and beautiful templates such as Torquay and Whitehaven, uploading high resolution images in the right dimensions becomes critical. This guide will outline the best image sizes for all templates and is updated regularly.
NOTE: Any image you upload should never exceed 0.5MB. The larger the file, the longer it will take to load for visitors, especially on mobile phones and slower internet connections.
Images should always be uploaded as either JPG, GiFS or PNG files.
- Banner images should be a minimum of 1170 pixels wide and can be any height, but we recommend to do 200 pixels max.
- Project images can be any height and a maximum of 700 pixels in width.
Big cards: 750 by 750 pixel
Small cards: 360 by 360 pixels in first design. There is an overlay of text which differs depending on the amount of text used. Take this into consideration when choosing your image. You can see what this looks like below.
The homepage logo must be 350 pixels in width, but can be any height as seen below.
The site banner and any project banners in Torquay stretch across the entire screen. The banner is responsive which means that on large screens it will be appear higher than it does on smaller screens.
The largest screens you would ever have to cater for are probably 1700 pixels wide. The majority of your visitors will visits the site on screens with 1300 pixels width and less (typical laptop). You can easily test this by manually changing the size of your browser window.
Therefore, there is no one best width, however, we recommend you go with at least 1300 pixels in width. It can be any height.
Slider images must be exactly 1140 by 360 pixels. There is an overlay of 380 pixels to the right of the image that can NOT be removed. Take this into consideration when designing your slider images.
Small cards: 360 by 360 pixels as per the Whitehaven template and the larger square tiles are also 750 by 750 pixels like Whitehaven.
This theme includes a site banner on the homepage which should be at least 1440px wide as it stretches across the entire width of the screen.
The theme also includes a range of different card styles.
Below you can see the card styles for two in a row. You should make the images here 270px by 270px.
Cards that appear as three in a row should be 340px by 240px as shown below.
And finally, four in a row require the images to be 250px by 170px.
If you require to change your project to a different card style the first image you uploaded will be resized to fit the new dimensions. For this reason, it's best to retain the square image dimensions of the first example to get the best reframing of your image.
Favicons are tiny. We recommend you use a png file with transparent background that is no larger than 15 by 15 pixels.
The thumbnails for your news articles need to be 200x150pixels. This is a 4:3 ratio, but for consistency and to make things easier we would stick to 200x150 always.
If you upload images into your forum tool, they will appear automatically as thumbnails. As long as you stick to a 4:3 ratio, your images will look acceptable.
All images are responsive and will change their size according to the screen they are looked it.
There is one exception to this rule. The big card in Whitehaven is NOT responsive.
Images that are too small and don't meet the recommendations outlined above will get stretched and therefore might look blurry such as the image below.
Images that are too high for the box in which they appear will get cut at top and bottom.
Images that are too wide and too small in terms of height will get cut left and right.
If you require further assistance understanding image sizes, please contact email@example.com.