Recommended Image Sizes

Xidipity WordPress Theme Recommended Image Sizes

 

Getting images right goes a long way in creating a great web experience but it is never as easy as it sounds. Web designers are challenged by trying to satisfy the needs of high definition devices while keeping the mobile experience snappy.

 

In some respects images are like paint and by that I mean for the best result they should natively cover the space where they are placed. Everyone has experienced seeing an image which looks grainy. The most likely reason for this is the image was stretched to fill the available space.

 

The rule of thumb is – an image can be too big but it can’t be too small.

 

From a design perspective, the next important item to consider is aspect ratio. Simply put, aspect ratio is the relationship of width to height. The best practice is to group images to their purpose and use images assigned to a purpose which should share the same aspect ratio.

 

An example of an image group is the blog post featured image. An image with a 4×3 aspect ratio works well but this not the only choice.

 

Layout Measurements

To measure the layout I used a Google Pixelbook which has a resolution of 2400×1600 pixels. This is a 6×4 aspect ratio.

 

Page With Sidebar

The width of the content area on a page with a sidebar is 865 pixels. An image which will be used full width should be at least 865 pixels wide. 

 

Page Without Sidebar

The width of the content area of a page without the sidebar is 1165 pixels. An image which will be used full width should be at least 1165 pixels wide. 

 

Sidebar

The width of the content area of the sidebar is 221 pixels. An image which will be used full width should be at least 221 pixels wide. 

 

In those cases where the images will be responsive, always consider an image which satisfies the largest scenario. 

 

Aspect Ratios

In most cases I use Google Drawing to prepare images. It supports the standard 4×3, widescreen 16×9, widescreen 16×10, and custom sizes. On my laptop, the standard aspect ratios are a width of 960 pixels. For example, a standard 4×3 canvas is 960×720 pixels. For pages with sidebars, featured images, and even sidebar images this works. For pages without sidebars, I have to manually set the dimensions of the page.

 

Width @ 960 pixels

Aspect Ratio Dimensions
1×1 960×960
4×3 960×720
6×4 960×640 Classic Film
7×5 960×686
16×10 960×600
16×9 960×540 High Definition
21×9 960×411 Cinemascope 
Custom As needed

Height @ 1080 pixels

For those who are drawn to a standard 16×9 HD image, the following are dimensions locked to a 1080 height.

Aspect Ratio Dimensions
1×1 1080×1080
4×3 1440×1080
6×4 1620×1080 Classic Film
7×5 1512×1080
16×10 1728×1080
16×9 1920×1080 High Definition
21×9 2523×1080 Cinemascope 
Custom As needed

Use Cases

Featured Image

The standard 4×3 image works well but many of the other aspect ratios are also choices. This image is displayed on the blog summary page.

 

Gallery Image

Unless noted otherwise, all aspect ratios are choices.

 

Page Header Image

This is where it can get interesting. Page banners can range from thin one quarter high to full size images.

 

Two Column Image 

All aspect ratios are supported.

 

Site Header

The site header supports two images.

 

1. header background image
The purpose of the background image is to add style the header when the site title and description is displayed. The suggested size for this image is 1165×100 pixels.
2. header logo image
The logo is a 360×100 pixel image which can be displayed left, center, or right. This is configured by editing the “title-align” align variable located in the blog-var.css file. The default is “center”.  If you combine the header background image with the logo a full width presentation can be achieved. It should be noted the logo is dependant upon mobile and the devices your site supports. The 360 pixel image will accommodate most phones two generations old and newer. If the desire is to support older devices a 320 pixel image may be a better fit. If mobile is not a concern, a wider image will certainly work. 

 

Icon-32×32

This is the site icon or favorite icon in either “png” or “ico” format.

 

Performance

A best practice is to compress images to improve performance.